React-native-interactable: HandleTouches example isn't running properly on Android

[motiazu]

The cards in the example are hard to drag on Android, they keep "slipping" off the finger after a short movement most of the time.

I tried to look into it a little bit. Looks like the ScrollView is what is causing the problem there. I added a TouchableWithoutFeedback on the IconDrawer example (no ScrollView + horizontal), it drags perfectly (but it is pressed even when you drag it all the way).

I also tried to remove all touchables from the card and just keep the ScrollView, same result. Also tried removing the horizontalOnly prop, still slipping.

Screen recording of the issue

[talkol]

Good catch.. the iOS implementation works a little better.

I plan to add several more complex touches examples and then we'll fix all of them together

@LoyalBlocks-tzachi is planned to work on the Android touches fixes starting Sunday

[LoyalBlocks-tzachi]

Hi guys! I fixed most of the Android touch issues in this branch: https://github.com/wix/react-native-interactable/tree/androidFixes

I'll appreciate if you can give feedback before I merge to master

The issue that still remains unresolved (I'm still working on it) is horizontal scroll inside horizontal moving interactable (or anything with horizontal drag like a slider)

[motiazu]

The issues we had in our app with it seem to be gone in that branch :)
Looks good to me, great work!

[tomislavHonig]

When can we expect merge with master?

[LoyalBlocks-tzachi]

Hi everyone. The "androidFixes" branch is merged to master.
In addition, I have an experimental solution to the "scrolling element inside" problem in this branch: https://github.com/wix/react-native-interactable/tree/touchBlockerBranch
(Note: this only works on android for now)

What I did is add a new component called "touchBlocker", which can be used to wrap any element that need to receive touch events and not let the Interactable view "steal" them.
It has a parameter "blockAllTouch":
if set to true, this component will always receive all touch events on its surface. you can see this usage in the "Touches Inside" example, where the webview and the slider are wrapped in it, so they always respond to touch gestures, horizontal or vertical.
if "blockAllTouch" is false, this element will only receive touch events when the Interactable view is at the top boundary and the gesture is upwards. This is used in the "Collapsing Header with Scroll" example, where the ScrollView will scroll only when the header is collapsed.
Hope that makes sense :) try it and tell me what you think...