naeemur / react-native-wheel-color-picker Goto Github PK

Calling "revert()" API sometimes throws Uncaught Error: null is not an object (evaluating 'rgb.r') from hex2Hsv method.

Version of react-native-wheel-color-picker
^1.2.0

Version of react-native
0.66.3

Platforms you faced the error (IOS or Android or both?)
iOS

Expected behavior
revert() should not throw

Actual behavior
It is random occurance. Sometimes it throws above error, other times it works as expected.

Tested environment (Emulator? Real Device?)
Emulator

Steps to reproduce the behavior

const colorPickerRef = useRef();
 const [color, setColor] = React.useState(props.color || "#FFF");

return (<View style={styles.wrapper}>
<ColorPicker
          ref={(ref) => (colorPickerRef.current = ref)}
          color={props.color || "#000000"}
          swatchesOnly={false}
          onColorChangeComplete={setColor}
          thumbSize={40}
          sliderHidden
          sliderSize={10}
          noSnap={true}
          row={false}
          swatchesLast={true}
          swatches={false}
          discrete={false}
        />

<Button text="Cancel" onPress={() => colorPickerRef.current?.revert()} />
</View>)

When I change the picture, the color I get is wrong

Could not find a declaration file for module 'react-native-wheel-color-picker'.

May it be possible that a type declaration is added to this package?

onColorChangeComplete and onColorChange method return wrong color code when color selected and set in TextInput . Even if select same color it's value change .

I am using react-native-wheel-color-picker to select a color, and then generate a color scheme from that color. I thought it would be cool if I used the palette prop to show the generated colors but I found that the colors of the palette prop doesnt update after the first render.
(Full code here)

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import ColorPicker from 'react-native-wheel-color-picker';
import {genColorScheme} from './helpers/colorGenerator'

export default function App() {
  const [ colors, setColors ] = React.useState(genColorScheme());
  // unmounting and remounting color picker shows correct palette
  const [showPicker , setShowPicker] = React.useState(true);
  const rerenderColorPicker = ()=>{
    setShowPicker(false);
    setTimeout(()=>{
      setShowPicker(true)
    },0)
  }
  return (
    <View style={styles.container}>
      <Button
        title="Force Picker Rerender"
        onPress={rerenderColorPicker}
      />
      <View style={styles.pickerContainer}>
        <Text>Actual Palette:</Text>
        <View style={styles.row}>
          {colors.map(color=>
              <View style={[styles.circle,{backgroundColor:color}]}/>
          )}
        </View>
        {showPicker && <ColorPicker
            style={styles.picker}
            color={colors[0]}
            onColorChange={color=>{
              setColors(genColorScheme(color))
            }}
            thumbSize={24}
            palette={colors}
          />
        }
      </View>
    </View>
  );
}

Further inspection into the source code revealed that palette is generated by this.renderSwatches. renderSwatches is called in the only called in the constructor. And because the constructor only runs once, the swatches doesnt update when palette changes

       <ColorPicker
          style={styles.colorPickerStyle}
            color={ThemeObj.bgColor}
            onColorChangeComplete={color => {
              //console.log('onColorChangeComplete===>', color);
              selectedPickerColor = color;
            }}
            thumbSize={30}
            sliderSize={30}
            noSnap={false}
            swatches={false}
            row={false}
            gapSize={1000}
          />

how we can solve this issue?

I am trying to use the library with expo web which is working great so far.

But there is one issue when used in mobile, which is that the dragging of the window is interfering with the dragging of the color-dragger.

This is not working on iOS nor Android. Is there any way to fix this easily?

Issue reproduced on mobile:
https://snack.expo.io/@hit-em/excited-salsa

Hello! I'm getting a warning when adding this to my react native project:

Animated: useNativeDriverwas not specified. This is a required option and must be explicitly set totrueorfalse``

Here is the code I use. I added useNativeDriver at the end to try to fix the issue, but true/false still gives the same error.

<ColorPicker
      color={'#ffffff'}
      // onColorChange={(color) => setColor(color)}
      // onColorChangeComplete={(color) => setColor(color)}
      thumbSize={40}
      sliderSize={20}
      noSnap={true}
      row={false}
      swatchesLast={false}
      swatches={false}
      discrete={false}
      useNativeDriver={true}
/>

Would appreciate any help with this! Thank you!

When i use this color picker inside scrollview the color picker is not working smoothly

please fix this problem (in the video) in the RTL application.
thanks.

Would you be interested in updating the current code base to use React hooks, functional components & TypeScript?

I am using this module on react-native-web:

Failed to compile.

./node_modules/react-native-wheel-color-picker/ColorPicker.js
SyntaxError: /Users/kasra/Documents/realnote_app/react/node_modules/react-native-wheel-color-picker/ColorPicker.js: Support for the experimental syntax 'jsx' isn't currently enabled (499:4):

  497 |         renderSwatches () {
  498 |                 this.swatches = PALLETE.map((c,i) => (
> 499 |                         <View style={[ss.swatch,{backgroundColor:c}]} key={'S'+i}>
      |                         ^
  500 |                                 <TouchableWithoutFeedback onPress={x=>this.onSwatchPress(c,i)}>
  501 |                                         <Animated.View style={[ss.swatchTouch,{backgroundColor:c,transform:[{scale:this.swatchAnim[i].interpolate({inputRange:[0,0.5,1],outputRange:[0.666,1,0.666]})}]}]} />
  502 |                                 </TouchableWithoutFeedback>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-native-wheel-color-picker": "^1.1.0",

I believe this prop should receive a function with color as the argument as that's the whole point of this prop. I console logged 'color' and indeed got a color as a string.

Hello,

As far as I can see there is no support for alpha/transparency?
The following snippet will crash and there is no way to control transparency of color?

<ColorPicker
    shadeWheelThumb
    sliderSize={16}
    thumbSize={20}
    swatches={false}
    color={value} // if values is: "transparent" or "rgba(0, 0, 0, 0)" or "#00000000" ColorPicker crashes.

My setup is basically something like this:

`

    const someEvent = () => {
          setCurrentColor('#cccccc');
    }
    
    const [currentColor, setCurrentColor} = useState('#ffffff');
    
   <ColorPicker
          color={currentColor}
          onColorChange={setCurrentColor}
    />

`

When someEvent function is triggered, currentColor is not affecting <ColorPicker/> component.

Would appreciate any help with this

I've been reading the docs but couldn't find any solutions so increase/decrease the swatches size, but I found in the source code that this is made with just a simple style.

By now i'm just a begginer in react native and cant make a fork to code a solution for that, could you please make a parameter for that?

Hello, I'm from Brazil, in my project I would like to use only the wheel without slider. Could this option/feature be available soon ?

When user changes color on the picker onColorChange fires multiple times, probably the "state" being applied again.

I think when the state sets color={currentColor}, there shouldn't be an event fired.

    const someEvent = () => {
          setCurrentColor('#cccccc');
    }
    
    const [currentColor, setCurrentColor} = useState('#ffffff');
    
   <ColorPicker
          color={currentColor}
          onColorChange={setCurrentColor}
    />

Possibly related #5

Hello there,
when using onColorChangeComplete the call back function is executed thrice.
<ColorPicker color={this.state.rgbObject.rgbHex} style={{paddingBottom: 40, marginTop: 20}} onColorChangeComplete={this.onChangeColor} thumbSize={30} sliderSize={30} gapSize={10} swatchesLast={false} row={false} />

where
onChangeColor = (color) => { console.log('onChangeColor Called', color) }

I can't seem to update the discreteLength and palettes props to a specific or desired value.

Version of react-native-wheel-color-picker
^1.1.0

Version of react-native
0.65.1

Platforms you faced the error (IOS or Android or both?)
IOS and Android

Expected behavior
Replacing discreteLength: 10 to 6 would display only 6 shades from swatch along with replacing color palettes to desired colors.

Actual behavior
Does nothing basically.

Tested environment (Emulator? Real Device?)
Emulator

Steps to reproduce the behavior
Replace the props with desired values.
<ColorPicker
color={color}
onColorChangeComplete={(color) => setColor(color)}
swatchesLast={false}
sliderSize={30}
thumbSize={30}
discrete={true}
discreteLength={6}
palette={PALETTE}
/>

const PALETTE = ['#ed1c24', '#d11cd5', '#1633e6', '#00c85d', '#ffde17'];

It would be nice if we could have styling options to position the well and all the other components.

Would it be possible for you to add an ActivityIndicator while the image is loading. Maybe a configurable property for that?
I'm using this for a project with a very constrained bandwidth. The user therefore just sees an empty field at the beginning which is a bit annoying.

I'd like to be able to call

<ColorPicker ... disabled={true} />

which would then show the color picker with its current input but without the ability to select a new color.

Is it possible with the current API?

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Currently, all props on the ColorPicker component needs to be specified even though in reality it doesn't need to as you have defined static default props in the component itself. onColorChange and onColorChangeComplete also had wrong types. This patch fixes both of the issues that I mentioned, feel free to incorporate them if you agree with the changes.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-wheel-color-picker/types.d.ts b/node_modules/react-native-wheel-color-picker/types.d.ts
index 365aab5..6fec768 100644
--- a/node_modules/react-native-wheel-color-picker/types.d.ts
+++ b/node_modules/react-native-wheel-color-picker/types.d.ts
@@ -1,20 +1,20 @@
 import * as React from 'react';
 
 export interface ColorPickerProps extends React.Props<ColorPicker> {
-  row: boolean,
-  noSnap: boolean,
-  thumbSize: number,
-  sliderSize: number,
-  discrete: boolean,
-  swatches: boolean,
-  swatchesLast: boolean,
-  swatchesOnly: boolean,
-  color: string,
-  shadeWheelThumb: boolean,
-  shadeSliderThumb: boolean,
-  autoResetSlider: boolean,
-  onColorChange(): void,
-  onColorChangeComplete(): void,
+  row?: boolean,
+  noSnap?: boolean,
+  thumbSize?: number,
+  sliderSize?: number,
+  discrete?: boolean,
+  swatches?: boolean,
+  swatchesLast?: boolean,
+  swatchesOnly?: boolean,
+  color?: string,
+  shadeWheelThumb?: boolean,
+  shadeSliderThumb?: boolean,
+  autoResetSlider?: boolean,
+  onColorChange?(color: string): void,
+  onColorChangeComplete?(color: string): void,
 }
 
 declare class ColorPicker extends React.Component<ColorPickerProps, any> {

This issue body was partially generated by patch-package.