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

Help me I also facing the same error.

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

Please focuse correct id. It will work perfectly.

@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! 💃

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 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!

@Lang-le I did the same 👍🏽

@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 !,

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

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?

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.

@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 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.

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