Invariant Violation error on android emulator -- RCTImageView

[npreiser]

Has anyone else seen this issue, when trying to run the examples:

thanks ,

[jsdario]

Haven't experienced that, so far. Can you share your development stack?

• React version
• React Native version
• OS (your machine)
• Target OS (phone)

[npreiser]

thanks for getting back to me, i'm using the latest stuff,
react native 0.58.3, windows 10, targeting android 9, both emulator and actual phone.
It appears to be a bundling issue.

this control is working fine: https://github.com/instea/react-native-color-picker

but I like this one , with a full wheel more , and would like to get it working.

after some research, it looks like its an issue with the system not finding some of the
standard react native bundled items.
Are there any other dependencies that I need to explicitly import.

thanks.

[npreiser]

I created a brand new app, and just added the example code, and here is the error I get.

[npreiser]

after more digging I have found that it appears the issue has to do with the "radius" variable that gets set to "{state}" , at the top of render(), . The radius is getting set to undefined...
If I hard code radius to a valid number (like 300), it appears to work.

[jsdario]

Thanks for your work so far. In Yeti we have not yet updated to React Native 0.58.x in order to avoid breaking changes and issues (like this apparently). If we do soon, I'll come back to this issue.

Thank you for sharing your issues and troubleshooting so far.

[RickeyWard]

it doesn't get set to {state}
it's actually a destructuring assignment
render () { const {radius} = this.state
which is the equivalent of
const radius = this.state.radius

This is a legit bug, the issue is that the initial state doesn't have a radius, so it is undefined the first pass of render.

radius doesn't get added to state until the View's onlayout get's called. Which calls the controls method onlayout, which then calls measureOffset which sets radius.

I haven't looked at the code history to see if something changed in react-native-color-wheel that broke this, or it's something in latest react native. But a quick fix would be for you to not set it to some arbitrary number in render but instead just add radius: 1, to the initial state object,` the error will then go away and nothing else should be affected.

should be a quick fix. If no one has resolved it by the weekend I'll look into it.

[npreiser]

thanks for getting back to me on this, for the past days I have been able to work around it by hard coding the variable in the render routine, not ideal.
I'll try your workaround instead, thanks again,

[FrederickEngelhardt]

Invariant Violation: [159,"RCTImageView",1,{"width":"<<NaN>>","height":"<<NaN>>","overflow":"hidden","alignSelf":"center","source":[{"__packager_asset":true,"width":730,"height":730,"uri":"http://localhost:8081/assets/node_modules/react-native-color-wheel/color-wheel.png?platform=ios&hash=ee111b20e68d3b9a1e779a8c4e1d00f7","scale":1}],"resizeMode":"cover"}] is not usable as a native method argument

Same error iOS

[jsdario]

Just merged a fix proposal.

Please those users of the master version tell me if it works so I push it again to npm

[RickeyWard]

I've confirmed that 8cf9b24 fixes the invariant violation issue. Though the examples directory ColorWheel.js is out of sync with the root dev directory.
There is also some other issues with alignment and dragout That will still need addressed.

[davidpaulhunt]

@jsdario radius: 0 does fix this issue for me on iOS - any chance you'll publish to npm soon?

p.s. thanks for the package!

[mhadi512]

Hi Guys,

I'm running into the same bug. I'm using the latest version of everything.

"expo": "~40.0.0", "expo-status-bar": "~1.0.3", "react": "16.13.1", "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", "react-native-color-wheel": "^0.1.7", "react-native-web": "~0.13.12"

I've copied the code sample from this github repo. which is the following:
<View style={{flex: 1}}> <ColorWheel initialColor="#ee0000" onColorChange={color => console.log({color})} onColorChangeComplete={color => onChange(color)} style={{width: Dimensions.get('window').width}} thumbStyle={{ height: 30, width: 30, borderRadius: 30}} /> <ColorWheel initialColor="#00ee00" style={{ marginLeft: 20, padding: 40, height: 200, width: 200 }} /> </View>

Please advice.