Add ability to configure movement threshold

[motiazu]

First of all, amazing work. I was dealing with a lot of pain with dragging things in RN and currently trying to use Interactable instead. So far it looks excellent, except for one thing.

I have a draggable view that is tappable in some of it's areas. I looked through the examples and noticed you don't have an example of a Touchable inside an Interactable.View.
I tried it and it's rather hard to tap my buttons with it.

Before this solution I used PanResponder and was able to work through this issue by defining a threshold to distinguish between a drag and any other touch with something like this:

onMoveShouldSetPanResponder : (e, gestureState) => {
    const {dx, dy} = gestureState;
    const threshold = 20;        

    return (Math.abs(dx) > threshold) || (Math.abs(dy) > threshold);
},

I would imagine a nice api for that would just be some sensitivityThreshold prop that accepts a number or something similar.

Edit:

I've gathered a bit more information - looks like my taps are happening even if I drag, but because I'm not using the native driver (throws some exception atm) it happens after a couple of seconds of latency.
I'm guessing the cause of the latency is that the touch leave is queued after all the touch movement had been handled, although it seems to be handled perfectly on the spot but the onPress is still triggered at least a whole second after I stopped dragging.

Ideally I would like to prevent dragging inside my threshold and let it go through to my touchables, but if it is considered a drag - the touches shouldn't propagate to these touchables.

[motiazu]

I started working on it in my fork, managed to make it work on Android already. I'll clean the code and push it tomorrow and we can talk about the feature and it's api before I go on to implement it for iOS.

[talkol]

Hi, there's actually an example of a TouchableOpacity inside an interactable view here:

https://github.com/wix/react-native-interactable/blob/master/example/src/HandleTouches.js

This is actually the example we use to test some cases of touches hell. There is an external ScrollView which can be scrolled vertically and inside Interactables that can be dragged horizontally. And inside buttons with TouchableOpacity that can be tapped. Fun!

The way it was resolved on iOS is with gesture recognizers. This was the commit where I fixed the touches problems in this example: ec6be42

Regarding the issue of taps of contained buttons happening even if you drag, the main trick was to cancel the touch events sent to JS. It's done in the commit in the cancelCurrentReactTouch function, take a look.

Also, if you make changes, make sure to test this example before and after and see that it behaves the same way.

Conflicting touches are complicated as hell :)

[motiazu]

Oh I didn't find that example since I was looking at the real-life-example.
I ran it on Android and it doesn't seem to work correctly. It's very hard to drag the card, 90% of the time it get's mixed up with pressing it.
Only if my finger is keeping a very straight horizontal line does it drag, and when I leave my finger it still sometimes press the button although I did drag.

I only found cancelCurrentReactTouch in iOS and I only tested on Android so far. Is this a feature that already works on iOS but not on Android or something?
Either way, defining a threshold does give a developer better control on how you are going to handle this, and it seems to work pretty good for me on Android. I'll update with a working example so you can feel the difference at least on Android.

[motiazu]

I continued to test the feature with the examples and realized it wasn't really preventing clicks when it should, only worked in my use case because of some specific circumstances.

Also realized this wasn't really the feature I was missing here, so I'm closing this issue and try to settle on what's missing in my use case to make it work properly.

[talkol]

Regarding the example you ran on Android with the touches:
https://github.com/wix/react-native-interactable/blob/master/example/src/HandleTouches.js

You said that you ran it on Android and it didn't work.. if so we should take care of it because it's supposed to work on Android (it was working when originally implemented).

If the example is not working, you should reopen the issue or create a new one for this.

[Talor-A]

i know this is closed, but is it possible for panResponder and Interactible.View to work together? (see #80 ) I'm trying to detect a 2-finger pinch with panResponder but also drag with Interactible.View.

[ghost]

I'm currently facing a similar issue only on Android. When I press a touchable inside an Interactable.View it's never fired. It looks like the views are way more sensitive in Android and I have to press very straight and without moving my finger.

[manpreetsingh3215]

#187 (comment) check this out , may it would help
thanks :)