picker view outside of the circle about react-native-wheel-color-picker

[MrRedwing]

I noticed that for anything that causes the color picker to reload (state of a prop changes or expo fast load update) the component started to work again. Here's a small workaround that I could recommend when I was working on my project.

const [size, setSize] = useState(30);

const generateNewSize = () => {
    // range of possible sizes (can possibly be smaller)
    const min = 29;
    const max = 31;

    // ensures new size is different in order to trigger a reload because the state is now different in the size prop
    let newSize = size;
    while (newSize === size) {
      newSize = Math.random() * (max - min) + min;
    }

    setSize(newSize);
}

return (
    <ColorPicker
        style={styles.colorPickerStyle}
        color={ThemeObj.bgColor}
        onColorChangeComplete={color => {
            selectedPickerColor = color;
         }}
        thumbSize={size}
        sliderSize={size}
        noSnap={false}
        swatches={false}
        row={false}
        gapSize={1000}
        onInteractionStart={generateNewSize}
    />
);

Hopefully, this workaround proves helpful to you and this is eventually patched.

[MrRedwing]

I have the same issue. It's a shame because the frequency of this error makes it unusable in my project. I found assigning the thumb-size and slider size a state variable that changing the state to a slightly different size upon interaction can help but it still occurs.

[ArtsiomAstrouski]

This problem is still relevant

[javiermojito]

Hey @dharay that fix works, thanks! good job!

[Naeemur]

Added prop useNativeLayout in v1.3.0 with some additional checking. That should fix the issue.
See README.md please.