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

abdul-elah-js · 2019-02-01T20:39:00Z

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 }
/>

The text was updated successfully, but these errors were encountered:

thang-nm · 2019-02-02T03:54:42Z

I have same problem! >.<

abdul-elah-js · 2019-02-02T10:08:48Z

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

thang-nm · 2019-02-02T10:11:08Z

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

abdul-elah-js · 2019-02-02T10:13:34Z

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 · 2019-02-04T19:00:31Z

@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 · 2019-02-05T03:19:33Z

@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 · 2019-02-05T03:26:30Z

@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 · 2019-02-05T10:35:47Z

@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 · 2019-02-05T10:35:59Z

@Lang-le I did the same 👍🏽

EdisonDevadoss · 2019-03-01T10:42:40Z

Help me I also facing the same error.

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

mingxin-yang · 2019-03-22T09:56:04Z

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 · 2019-03-22T15:12:31Z

Is this android or iOS? @mingxin-yang

mingxin-yang · 2019-03-22T16:01:06Z

android @brh55

bamaarintoko · 2019-03-27T08:14:02Z

this is solved? i got same error

brh55 · 2019-04-26T06:07:53Z

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 · 2019-05-02T13:22:42Z

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 · 2019-05-02T13:35:46Z

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 · 2019-05-02T20:54:24Z

@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 · 2019-05-03T08:39:56Z

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 · 2019-05-03T14:20:41Z

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 · 2019-05-04T01:02:55Z

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 · 2019-05-06T02:06:11Z

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

dragonStandard123 · 2019-05-06T14:20:52Z

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 · 2019-05-23T00:14:20Z

same error

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

hejun041 · 2019-05-29T03:39:47Z

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 · 2019-05-30T09:17:59Z

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

traxx10 · 2019-06-02T08:06:23Z

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 · 2019-06-03T17:27:44Z

@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 · 2019-07-07T13:16:20Z

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 · 2019-08-30T16:52:19Z

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 · 2019-10-03T04:08:30Z

Please focuse correct id. It will work perfectly.

nickjuntilla · 2019-10-06T01:45:47Z

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

RyanKeepRunning mentioned this issue Mar 31, 2019

Failed prop type? #108

Open

RestlessThinker added a commit to RestlessThinker/react-native-masonry that referenced this issue Sep 9, 2019

temp bugfix brh55#105

5dca20f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

abdul-elah-js commented Feb 1, 2019 •

edited

thang-nm commented Feb 2, 2019

abdul-elah-js commented Feb 2, 2019

thang-nm commented Feb 2, 2019

abdul-elah-js commented Feb 2, 2019

brh55 commented Feb 4, 2019

thang-nm commented Feb 5, 2019

thang-nm commented Feb 5, 2019

abdul-elah-js commented Feb 5, 2019

abdul-elah-js commented Feb 5, 2019

EdisonDevadoss commented Mar 1, 2019 •

edited

mingxin-yang commented Mar 22, 2019 •

edited

brh55 commented Mar 22, 2019

mingxin-yang commented Mar 22, 2019 •

edited

bamaarintoko commented Mar 27, 2019

brh55 commented Apr 26, 2019

hack-and-backslash commented May 2, 2019

hack-and-backslash commented May 2, 2019

brh55 commented May 2, 2019 •

edited

dragonStandard123 commented May 3, 2019

hack-and-backslash commented May 3, 2019 •

edited

brh55 commented May 4, 2019

brh55 commented May 6, 2019

dragonStandard123 commented May 6, 2019

pmella16 commented May 23, 2019

hejun041 commented May 29, 2019 •

edited

hack-and-backslash commented May 30, 2019

traxx10 commented Jun 2, 2019

brh55 commented Jun 3, 2019 •

edited

lc3t35 commented Jul 7, 2019

erick4556 commented Aug 30, 2019 •

edited

cocadev commented Oct 3, 2019

nickjuntilla commented Oct 6, 2019

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

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

Comments

abdul-elah-js commented Feb 1, 2019 • edited

Expected Behavior

Current Behavior

Context (Environment)

thang-nm commented Feb 2, 2019

abdul-elah-js commented Feb 2, 2019

thang-nm commented Feb 2, 2019

abdul-elah-js commented Feb 2, 2019

brh55 commented Feb 4, 2019

thang-nm commented Feb 5, 2019

thang-nm commented Feb 5, 2019

abdul-elah-js commented Feb 5, 2019

abdul-elah-js commented Feb 5, 2019

EdisonDevadoss commented Mar 1, 2019 • edited

mingxin-yang commented Mar 22, 2019 • edited

brh55 commented Mar 22, 2019

mingxin-yang commented Mar 22, 2019 • edited

bamaarintoko commented Mar 27, 2019

brh55 commented Apr 26, 2019

hack-and-backslash commented May 2, 2019

hack-and-backslash commented May 2, 2019

brh55 commented May 2, 2019 • edited

dragonStandard123 commented May 3, 2019

hack-and-backslash commented May 3, 2019 • edited

brh55 commented May 4, 2019

brh55 commented May 6, 2019

dragonStandard123 commented May 6, 2019

pmella16 commented May 23, 2019

hejun041 commented May 29, 2019 • edited

hack-and-backslash commented May 30, 2019

traxx10 commented Jun 2, 2019

brh55 commented Jun 3, 2019 • edited

lc3t35 commented Jul 7, 2019

erick4556 commented Aug 30, 2019 • edited

cocadev commented Oct 3, 2019

nickjuntilla commented Oct 6, 2019

abdul-elah-js commented Feb 1, 2019 •

edited

EdisonDevadoss commented Mar 1, 2019 •

edited

mingxin-yang commented Mar 22, 2019 •

edited

mingxin-yang commented Mar 22, 2019 •

edited

brh55 commented May 2, 2019 •

edited

hack-and-backslash commented May 3, 2019 •

edited

hejun041 commented May 29, 2019 •

edited

brh55 commented Jun 3, 2019 •

edited

erick4556 commented Aug 30, 2019 •

edited