Draggable thumb goes off the view

[rimzici]

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!

[techyoob]

Hello,
I am having same issue.

[RickeyWard]

In order to get a full saturation color, you want to be able to hug the thumb to the outside of the image, putting the handler on the image means it stops responding toward the edge because your interaction has left the image. Are you using the github version or the npm version?

[ivantacca]

Hello, I have the same issue
It seems like more you make it smaller, more the thumb is inaccurate
Am I doing something wrong?

<ColorWheel
    initialColor="#FFFFFF"
    onColorChange={color => console.log({color})}
    onColorChangeComplete={color => console.log({color})}
    style={{alignSelf:'center', width: Dimensions.get('window').width * 1}}
/>

[RickeyWard]

ivantacca, are you using the github version or the npm version?, some issues have been fixed on github and are not on npm. Which should include this issue.

[ivantacca]

ivantacca, are you using the github version or the npm version?, some issues have been fixed on github and are not on npm. Which should include this issue.

I am using the PR made by RNTop
https://github.com/netbeast/react-native-color-wheel/blob/524050e4462fdf22dcd48727d545f7afe14c973a/ColorWheel.js
because the npm version gave me the Invariant Violation issue