Touchable shouldn't be pressed while scrolling in a ScrollView

[Freddy03h]

The problem
In a list of links, <TouchableHighlight> inside <ScrollView>, the scroll event doesn't disable the possibility to trigger the touchable onPress.
When triggering a pressIn and seing the underlayColor, if we start to scroll we still can see the underlayColor (and seing underlayColor mean that the onPress while be triggered, this part is expected).
The underlayColor disappear after Y pixels scrolling (in both ways), but if we go back near the pressIn event, underlayColor can reappear.

How to reproduce

Simplified test case: https://codesandbox.io/s/react-native-scroll-and-touchable-epskt

I made the gif on Chrome 80, macOS 10.15.2 in responsive-mode, and I can reproduce it on my devices : iPhone X iOS 13.3 Safari and Nexus 5X Android 8.1 on Chrome 80 and Firefox 68

Steps to reproduce:

1. Open https://epskt.csb.app/ on a mobile
2. Scroll slowly to see the underlayColor
3. Scroll far and near the initial position to see the underlayColor appear and disappear

Expected behavior

On a React Native application, starting to scroll hide immediately the underlayColor and will never trigger an onPress event on a Touchable component inside a ScrollView.

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.12.0
• React (version): 16.12.0
• Browser: Chrome (macOS in responsive-mode and Android) Safari (iOS) Firefox (Android)

Oh! I tried to change RNW to 0.11.7 and React to 16.7.0 on the codesanbox, and it seem to work as expected! I didn't notice before because I started my project with 0.12.0-rc.1, so it seem to be a regression on 0.12 (or React?).

Additional context

I see similar issues linked to the Responder Event System #1219 but it seem they don't use the <ScrollView>.

I think this unexpected behavior is also the issue about the fact that it's too easy to trigger an onPress on this list if you scroll fast.

[wong2]

I'm having the same issue

[xuchaoying]

I think TouchableWithoutFeedback has the same problem.

When scrolling in a <ScrollView>, it is very likely to mis-click a <TouchableWithoutFeedback>

[Freddy03h]

After reading #1568, I've got a better understanding about the relation between react-native-web and react-dom, I tried to downgrade react and react-dom.

react-native-web@0.12.2 + react(-dom)@16.8.6 doesn't work, I can go down this version because of the hooks support.

But I will be really happy to test an alpha version of the Responder Event System rewrite when it will be ready, thank you!

[necolas]

Please try version 0.0.0-33f8505d6 (a canary release) and let me know if the problem is resolved. See #1538

[wong2]

@necolas it works

[Freddy03h]

It works also for me on iOS Safari and Android Chrome 👍
Thank you !

[necolas]

Going to keep this open until the patches land in master