netbeast / react-native-color-wheel Goto Github PK
View Code? Open in Web Editor NEW:rainbow: A react native reusable and color picker wheel
Home Page: https://getyeti.co
License: MIT License
:rainbow: A react native reusable and color picker wheel
Home Page: https://getyeti.co
License: MIT License
Pan out of the circle
Really appreciate the awesome work!!
The issue might be a corner case. Here is a gif of the issue.
It is understandable that, the draggable thumb is where user must be pressing and dragging. But the pan responder is set on the outer View, so it is very much possible to touch anywhere on the outer view and drag. This actually opens the gateway for the issue.
When the user start dragging from outside, the outBounds method will return true and prevents setting pan value inside onStartShouldSetPanResponderCapture
. The outBounds
call inside onPanResponderMove
also returns true but pageX
and pageY
has been changing the all way along.
Was wondering if there was any particular reason why the pan responder is set on the outer view, and not the image itself ?
Here is a reproducible demo if you would like to try.
Thanks!
react-native 0.63.3
use the library will show the error malformed calls from js field sizes are different
import { ColorWheel } from 'react-native-color-wheel';
<ColorWheel
initialColor="#ee0000"
onColorChange={color => console.log({color})}
onColorChangeComplete={color => console.log('onChange(color)', color)}
style={{width: Dimensions.get('window').width}}
thumbStyle={{ height: 30, width: 30, borderRadius: 30}}
/>
Is react native latest version causes the issue ?
react: 16.9.0 => 16.9.0
react-native: 0.61.4 => 0.61.4
onColorChange returns a negative value for hue
{ color: { h: -77.86555987333482, s: 69.93991897257706, v: 100 } }
Hi,
Is there a way to have multiple selection using this library? I want to be able to set the colors of multiple lights in a room individually using a single color wheel.
Regards.
Hello.
I saw that you fixed the error Unable to resolve yeti/app/assets/img/color-wheel.png
in 0c3ad52, but the package wasn't updated on npm, so I'm still getting the error.
Could you publish a new version, please?
Thanks in advance.
Hi, first of all, thanks for this repo, great work!
I found an issue when selecting a color in the right-bottom area.
When for instance selecting a color completely on the right, it shows red as the selected color. However the color wheel image shows orange in that location, red is much lower. It seems that the color calculation doesn't quite match the color-wheel image.
Hi there,
I am looking at this lib to implement a simple color pickel in my app.
I can select the color and the user experience is good. However the onColorChange
props does not return the selected color in hex. Instead I get some h
, s
and v
props but It's unclear how to convert them to an actual color
Also the initial color is a hex number which is somewhat inconsistent with the onColorChange
props
How can I get the selected color in hex?
Thanks,
Michael
Thanks for this component.
I found out that the area from 5 o'clock to 9 o'clock always returns something red in console.
BTW I am using tinycolor to convert the hsv to hex. But I don't think that's related in some ways.
A user (@npreiser) commented on a pr asking why some stuff didn't work. We've had a lot of breaks in the code recently that appear they were never tested properly.
the commit:
0a72b1036925bb54214603697b25d5b6db93f065 (Updates branch to yeti code)
Breaks edge sliding (easy selecting of full saturation colors)
9f0245ce85e08e22a010069de42437ce68b73002 (Reducing image area equals to the thumb radius )
Breaks thumb slider position and image drawing size. forces thumb to be drawn outside of image instead of on the edge as expected
from the summary of the commit it almost sounds intentional but that can''t be the case.
Here is an image npreiser posted about.
Originally posted by @npreiser in #15 (comment)
I can verify npreiser's findings, happens on both ios and android. I haven't looked deep into the exact lines of code that break the control. But It's not
Hello, I come to you because I have a problem with this bookstore, I would like to change the wheel so that it becomes a wheel of colors in kelvin. I've tried to tinker with several things but without any effect, I'm really struggling with polar calculations and all that goes with it if someone could point me to it.
Thanks to you guys
I am trying the example and getting this
Invarian Violation: [3, "RCTImageView",11,{"width":<>","height":"<>","overflow":"hidden","alignSelf":"center","source": ...
looks like some issue with png on iOS
Any ideas, please
I understand that the color selection is based on the wheel.png file.
There are a lot of color variations for blue and red for example. It's almost impossible however to pick a dark green. Is there a reason for that?
Thanks,
Michael
Is it possible to make such a sliding along the borders, as in the example?
Example:
Now:
Was working on React Native 0.59, imported your library, and realized that there was an invariant violation in ColorWheel.js.
It seems to be fixed on a later fix to master, but for some odd reason, NPM didn't pick up your changes.
This is a fantastic library, and I can't wait for the update.
The module is calling for an image that does not exist within the package. Could you please put the image in the package instead?
Is there any way of creating a value prop so that the color wheel can 'jump' to a selected hex value?
Greate Library! Would be great if the pan was limited to the size of the color circle as currently the color pan can be dragged outside of the circle
I have tried this an nothing is happening,
I searched the module, and did not find any references that actaully invoke it...
is it working?,
thanks
onChangeColor and onChangeColorComplete not working?
If I create a ColorWheel component as a child of a flexbox View component, like so:
<View style={{display: "flex", flexDirection: "column", justifyContent: "flex-start"}}>
<Text>Alpha</Text>
<Text>Beta</Text>
<Text>Gamma</Text>
<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}}
/>
</View>
the color wheel's height and width are set to zero -- only the thumb slider remains visible:
By changing line 224 of ColorWheel.js
from flex: 1,
to display: flex,
, the color wheel is properly sized and positioned in the flexbox:
Let me know if this change fixes any issues or if I'm using the component wrong. Thanks in advance!
I was having Invariant Violation issue on regular installation, thus I imported the script as a component and used it like the following
import ColorWheel from '../../components/ColorWheel';
<View style={{flexDirection:'row', justifyContent: 'center'}}>
<View style={{width:'50%', paddingHorizontal: 5}}>
<Label style={{fontSize: 14, fontWeight: 'bold', paddingVertical: 5, textAlign: 'center'}}>COLOR (IF Any)</Label>
<ColorWheel
initialColor="#ffffff"
onColorChange={color => this.onColorChange(color)}
thumbStyle={{ height: 30, width: 30, borderRadius: 30}}
style={{ height: 180, width: 180, elevation: 100000}}
/>
</View>
</View>
<View style={{flexDirection:'row', justifyContent: 'center'}}>
<View style={{width:'50%', paddingHorizontal: 5}}>
<Label style={{fontSize: 14, fontWeight: 'bold', paddingVertical: 5, textAlign: 'center'}}>COLOR (IF Any)</Label>
<ColorWheel
initialColor="#ffffff"
onColorChange={color => this.onColorChange1(color)}
thumbStyle={{ height: 30, width: 30, borderRadius: 30}}
style={{ height: 180, width: 180, elevation: 100000}}
/>
</View>
</View>
It works fine if it is used single time, but I need to use it multiple time (5 times for 5 different colors). It stops working then, Nothing happens if the image is clicked or if the thumb is tried to drag.
Thanks in advance
How to pick a black color?
Is this library really working?
I am not getting any color change event, not even able to change styles of thumb.
<ColorWheel initialColor="#30A9DE" onColorChanged={color => console.log({color})} onColorChangeComplete={color => this.onColorChanged(color)} style={{ width: Dimensions.get('window').width - 60 }} />
onColorChanged and onColorChangeComplete not returning anything.
library version
"react-native-color-wheel": "^0.1.6",
such as onMoveStart , onMoveEnd ?
Hello, thanks a lot for this project.
The h
property of the color object always stays 100
. Is it an expected behavior? In this case when I convert from hsl
to hex
using this library https://github.com/davidmarkclements/hsl-to-hex the color output is always white. I changed the luminosity
value from 100 to something else and the color is changing. Should color.v
ever change?
see the video
Hi,
I am using the latest master 8cf9b24 from this repo, and I'm using this in a View that has an animation which shift this component into the screen (from right edge of the screen).
From the documentation onLayout
is fired immediately once the layout has been calculated.
on Android, the x
in measureOffset()
is always 0, but on iOS, it there's a chance it won't be 0, but some number between [0, width
]
So the x
in measureOffset()
will eventually be 0 once the animation is finished, but depends on when onLayout()
is called, it might not? ๐ค (I'm new to React, maybe I have no idea what I'm talking about)
measureOffset () {
/*
* const {x, y, width, height} = nativeEvent.layout
* onlayout values are different than measureInWindow
* x and y are the distances to its previous element
* but in measureInWindow they are relative to the window
*/
this.self.measureInWindow((x, y, width, height) => {
const window = Dimensions.get('window')
const absX = x % width
const radius = Math.min(width, height) / 2
const offset = {
x: absX + width / 2,
y: y % window.height + height / 2,
}
this.setState({
offset,
radius,
height,
width,
top: y % window.height,
left: absX,
})
this.forceUpdate(this.state.currentColor)
})
}
for now I would just forcefully set absX
to 0 instead of x % width
since my animation will make x
to be 0
eventually.
But I wonder if there is there a nicer way to do this?
Hello,
When trying to implement a colour wheel into my app, the initial image renders fine, but as soon as you try to select a colour and then let go of the mouse, I get an error saying 'onChange is not a function. (In 'onChange(color)', 'onChange' is undefined), as seen in the below image.
I took the implementation from the docs for this package at https://www.npmjs.com/package/react-native-color-wheeland changed nothing, so not sure if there's maybe something missing? I'm relatively new to RN so this may be a small thing that I don't quite understand.
Any help would be great :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.