netbeast / react-native-color-wheel

:rainbow: A react native reusable and color picker wheel

react-native-color-wheel

🎨 A react native reusable and color picker wheel

Usage

import React, { Component } from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import { ColorWheel } from 'react-native-color-wheel';

const Example = ({onChange}) => (
  <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>
);

Props

Name	Description	Type
initialColor	Initial value in hex format	String
onColorChange	Callback when the value is changed or moved	func
onColorChangeComplete	Callback on mouseup or drag event has finished	func
thumbSize	Width of draggable thumb	Number
thumbStyle	CSS for the draggable thumb	Object

PRs and issues are more than welcome.

 This package powers Yeti Smart Home and is used in production. Follow us in Github or https://twitter.com/netbeast_co.

react-native-color-wheel's Issues

Color wheel misbehaves when placed in flexbox View

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!

Change color to kelvin

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

the Wheel is not the right size

 render() {
    return (
      <View>
        <ColorWheel
          initialColor="#00ee00"
          style={{marginLeft: 20, padding: 40, height: 200, width: 200}}
        />
      </View>
    );
  }

Retrieve selected color as HEX?

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

Multiple select spots

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.

Merge 'Invariant Violation fix' to npm library

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.

Draggable thumb goes off the view

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!

Not working if it is used multiple times

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

Invariant Violation error on android emulator -- RCTImageView

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

thanks ,

Sliding along the boundaries

Is it possible to make such a sliding along the borders, as in the example?

Example:

1.mp4

Now:

2.mp4

Prevent pan outside of the color circle

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

Black color

How to pick a black color?

Is this library open source?

Wrong color when picking from left bottom

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.

Help! Can I use this image?

The luminosity value (color.v) always stays the same

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?

thumb

Color picker doesn't show the correct color when selecting in the bottom-right area

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.

can u provide more event handlers?

such as onMoveStart , onMoveEnd ?

is onColorChangeComplete enabled/working

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

How to pick darker color?

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

malformed calls from js field sizes are different

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 ?

Error PanResponder !!!

Pan out of the circle

recent commits have caused issues

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

absX in measureOffset() is not reliable?

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?

How Can I get the Hexadecimal?

onColorChange returns negative hue value

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

not getting color change event

onChangeColor and onChangeColorComplete not working?

Unable to resolve module `yeti/app/assets/img/color-wheel.png`

The module is calling for an image that does not exist within the package. Could you please put the image in the package instead?

Invarian Violation

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

Having this issue whenever I reload my app

thumb display in a wrong position while parent view is ScrollView

I found some bug with move

see the video

https://youtu.be/hvSlA8nu1G4

Publish new version to npm

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.

Create value prop

Is there any way of creating a value prop so that the color wheel can 'jump' to a selected hex value?

onChange is undefined

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 :)

ColorPicker

onColorChanged Not working

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",