Invariant Violation [923, "RCTImageView" ... ] is not usable as a native method argument

[abdul-elah-js]

Expected Behavior

To Render The Masonry Images

Current Behavior

Breaks Down

Context (Environment)

1- react v16.6.3
2- react-native v0.58.1
react-native-masonry v^0.5.0-alpha.3

All I want to do is to render a simple Masonry but i keep getting this error

i pass the images array with additional data like this

[ { uri: 'image_url', description: 'txt' }, { uri: 'image_url', description: 'txt' } ]

<Masonry
     sorted
     columns={ 3 }
     bricks={ props.images }
/>

[thang-nm]

I have same problem! >.<

[abdul-elah-js]

are you using the same version of react-native ? 0.58.1 ? @Lang-le

[thang-nm]

@abdul-elah-js I use React Native 0.58.3.

[abdul-elah-js]

could it be because of the whole .58 version ? i read the changelog but i don't remember finding anything relevant about the RCTImageView 🤔, anyhow i'll try it with 0.57 version just to be sure, if you figured it out, help me out

[brh55]

@abdul-elah-js
I suspect the error has to do with the fact that your application is probably having issues getting that image as it's deriving NaN in it's resizing calculations -- it's supposed to log it if it receives a 400/404, so there maybe a bug there.

You might see some logs in the console, or I would try directly creating an image element with that URL and see if there are any issues with it.

[thang-nm]

@brh55
Yeah. So do i. But use Google logo at Google.com, so it can't be 400/404 (etc..)
Images show for the first time and i reload simulator (Command + R), then i got that error!

[thang-nm]

@abdul-elah-js
I created my own masonry layout base on FlatList and height of the image.
If you already know image size, you can make your own layout. I think it's better than automatic calculation!

[abdul-elah-js]

@brh55 I tried giving the image a height, width and resizeMode but still i got the same error without any logs, the weirdest thing though is this error is only triggered after running perfectly for the first time !,

[abdul-elah-js]

@Lang-le I did the same 👍🏽

[EdisonDevadoss]

Help me I also facing the same error.

    "react": "16.6.3",
    "react-native": "0.58.6",

[mingxin-yang]

I have same problem! The images success to display at the first time, but It show errors the next time

"react": "16.8.3",
"react-native": "0.59.1",

[brh55]

Is this android or iOS? @mingxin-yang

[mingxin-yang]

android @brh55

[bamaarintoko]

this is solved? i got same error

[brh55]

Update, error stems from the fact that onLayout in the view doesn't get triggered within Android in some newer versions of React-Native.

Clearly, this is an important basis for calculating appropriate image resizing, hence the NaN. Messing around with potential workarounds for the time being.

[hack-and-backslash]

Facing the same issue. It has to be something with cache. Coz I am not getting the error on first run or after I clear the cache. Could this be because local images (cached, that become local once cached) need height and width to be passed as props or there's no such thing?

[hack-and-backslash]

Facing the same issue. It has to be something with cache. Coz I am not getting the error on first run or after I clear the cache. Could this be because local images (cached, that become local once cached) need height and width to be passed as props or there's no such thing?

I added width and height to my brick object and it seems to have fixed the issue for me.

[brh55]

@hack-and-backslash Issue comes from the fact onLayout (which is used to get parent dimensions of the layout) for Android is triggered after the masonry layout attempts to render. I've been trying to fix it so that an empty layout is rendered initially until onLayout can provide some details and then render again, but it still doesn't like that.

Adding height and brick will work in theory, but we really don't want users to be doing that as it will result in potential funky behavior :3.

[dragonStandard123]

still same error

"react-native-masonry": "^0.5.0-alpha.4",
"react-native": "0.59.5",

How can I add width and height to the brick data?

[hack-and-backslash]

still same error

"react-native-masonry": "^0.5.0-alpha.4",
"react-native": "0.59.5",

How can I add width and height to the brick data?

Just like you add other stuff like uri, onPress etc.

uri: 'http://pic.com/3424343.jpg', width: 1080, height: 1920, onPress: () => {}

But again, as @brh55 says, it might result in potential funky behavior. I haven't found anything funny yet though.

[brh55]

The odd behavior is the first "brick" will render with incorrect resize dimension, but it should promptly fix itself with the correct dimensions on the second re-render. Ironically, this might be a hotfix solution by giving the parent default dimensions.

[brh55]

Yeah thought that may have worked, but causing this odd behavior:

[dragonStandard123]

I tried severally, but failed.

-If I use the normal image views, the red screen is shown as followed

uri: 'http://192.168.43.236:8088/assets/img/imageUpload/1532657517567.JPEG',
width: 1080, 
height: 1920, 
onPress: () => {}

-When I use the FastImages, the result....
Only first time, it shows 'normally',
but on next reload, the red screen is appeared.

          uri: 'http://192.168.43.236:8088/assets/img/imageUpload/1532657517567.JPEG'
          
          <Masonry
                        sorted
                        bricks={this.state.data}
                        customImageComponent={FastImage}
                        // customImageProps={{width:300, height:500,}}
                    />

How can I handle masonry?

[pmella16]

same error

"react": "16.6.3", "react-native": "0.58.4",

[hejun041]

give the node_modules\react-native-masonry\components\Masonry.js 's dimentsions a default value
like this:
this.state = {
dataSource: this.ds.cloneWithRows([]),
dimensions: { width: Dimensions.get('window').width, height: 0, gutter: Dimensions.get('window').width / 100 * this.props.spacing },
initialOrientation: true,
_sortedData: [],
_resolvedData: [],
_columnHeights: columnHeights,
_uniqueCount: props.bricks.length
};
In general, you only need 'width' whitch almost is the window`s width.
'gutter ' you can give what ever you want

and edit node_modules\react-native-masonry\components\Column.js line:64
let { height, width } = parentDimensions;

this works for me

[hack-and-backslash]

@brh55 Did you try what @hejun041 said. Can this be a potential fix?

[traxx10]

give the node_modules\react-native-masonry\components\Masonry.js 's dimentsions a default value
like this:
this.state = {
dataSource: this.ds.cloneWithRows([]),
dimensions: { width: Dimensions.get('window').width, height: 0, gutter: Dimensions.get('window').width / 100 * this.props.spacing },
initialOrientation: true,
_sortedData: [],
_resolvedData: [],
_columnHeights: columnHeights,
_uniqueCount: props.bricks.length
};
In general, you only need 'width' whitch almost is the window`s width.
'gutter ' you can give what ever you want

and edit node_modules\react-native-masonry\components\Column.js line:64
let { height, width } = parentDimensions;

this works for me

This works for me

[brh55]

@brh55 Did you try what @hejun041 said. Can this be a potential fix?

This does work as long as the parent element has no padding around your Masonry. I'll take this as PR fix if anyone wants to submit.

I've been struggling to come up with a clean fix to support the masonry being placed anywhere since the changes to onLoad.

I appreciate all the eyes and support on this! 💃

[lc3t35]

Same here (RN by expo sdk33 : 0.59.8 , react 16.8.3), if you can send width/height in bricks it passes the first time...

[erick4556]

In my case, I had an error : "RCTView", in this line: <View style={{alignItems: 'center', position:'relative', left: (window.width/2), top:50, flexDirection: 'column'}}> in my file.
I deleted "left: (window.width/2)" and it works
I use react-native: 0.60.5
react:16.8.6
react-native-cli: 2.0.1

[cocadev]

Please focuse correct id. It will work perfectly.

[nickjuntilla]

Is there any way to fix this without modifying the package?