Comments (12)
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.
from react-native-color-wheel.
@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!
from react-native-color-wheel.
Haven't experienced that, so far. Can you share your development stack?
- React version
- React Native version
- OS (your machine)
- Target OS (phone)
from react-native-color-wheel.
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.
from react-native-color-wheel.
I created a brand new app, and just added the example code, and here is the error I get.
from react-native-color-wheel.
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.
from react-native-color-wheel.
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.
from react-native-color-wheel.
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,
from react-native-color-wheel.
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
from react-native-color-wheel.
Just merged a fix proposal.
Please those users of the master version tell me if it works so I push it again to npm
from react-native-color-wheel.
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.
from react-native-color-wheel.
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.
from react-native-color-wheel.
Related Issues (20)
- thumb
- recent commits have caused issues HOT 3
- not getting color change event HOT 1
- onColorChanged Not working HOT 1
- the Wheel is not the right size HOT 1
- Error PanResponder !!! HOT 2
- Help! Can I use this image? HOT 2
- Merge 'Invariant Violation fix' to npm library HOT 8
- Create value prop HOT 1
- Draggable thumb goes off the view HOT 5
- onColorChange returns negative hue value HOT 3
- Invarian Violation HOT 6
- Color wheel misbehaves when placed in flexbox View HOT 2
- Not working if it is used multiple times HOT 2
- malformed calls from js field sizes are different HOT 2
- Change color to kelvin HOT 1
- Multiple select spots HOT 1
- absX in measureOffset() is not reliable? HOT 2
- onChange is undefined
- Sliding along the boundaries
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-color-wheel.