[Android] Touchable inside Gesture Handler's ScrollView still fires onPress when the touch only stops a fling (3.3.0)

[janicduplessis]

Description

On Android, a v3 Touchable inside Gesture Handler's own scroll components (FlatList/ScrollView from react-native-gesture-handler, or a SectionList whose renderScrollComponent returns RNGH's ScrollView) fires onPress when the touch only stops a fling: fling the list, put a finger down to stop it, lift without moving, and the row under the finger fires onPress.

Expected: the tap only stops the fling and no onPress fires. That is what happens with React Native's ScrollView/FlatList since #4432 was fixed by #4441 in 3.3.0.

Rows	Scroll container	RNGH	Result
RN Pressable	RN SectionList	3.2.1	no press
Touchable	RNGH ScrollView via renderScrollComponent	3.2.1	phantom onPress
Touchable	RNGH ScrollView via renderScrollComponent	3.3.0	phantom onPress
Touchable	RN SectionList	3.3.0	no press
Touchable (minimal repro)	RNGH FlatList	3.3.0	phantom onPress, 5/5 trials
Touchable (minimal repro)	RN FlatList	3.3.0	no press, 0/5 trials

The first four rows are from our app (two trials each, same emulator and build); the last two are from the minimal repro below. Without the tap, the same fling scrolls to the end of the list, so the tap lands while the list is still moving. A tap on a list at rest fires onPress with both lists. The fling and tap were driven with adb shell input.

Recording of the minimal repro: first half RNGH FlatList (the counter goes 0 -> 1 -> 2), second half RN FlatList (the counter stays at 0).

rngh4547.mp4

Steps to reproduce

1. Create the app from the gist below: npx create-expo-app@latest rngh4547 --template blank-typescript@sdk-57, npm install react-native-gesture-handler@3.3.0, replace App.tsx, npx expo run:android. It renders 30 Touchable rows in RNGH's FlatList and shows a press counter.
2. On an Android emulator (1080x2400), scroll to the top: adb shell "input swipe 540 800 540 2200 100; input swipe 540 800 540 2200 100; input swipe 540 800 540 2200 100".
3. Fling and tap while the list is still moving: adb shell "input swipe 540 2000 540 900 40; input tap 540 1400".
4. The counter increments: the row under the tap fired onPress.
5. Tap the gray button at the top to switch to React Native's FlatList and repeat steps 2-3. The tap only stops the list and the counter stays at 0.

A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.

https://gist.github.com/janicduplessis/80f4ac8a40f128c7d68c101e20110dd5

Gesture Handler version

3.3.0 (also reproduced in our app on 3.2.1)

React Native version

0.86.3 in the minimal repro; first seen in our app on 0.88.0-rc.1

Versions of related libraries

• Minimal repro: expo 57.0.25 only. Reanimated, Worklets and Screens are not installed, and the bug still reproduces.
• Our app: react-native-reanimated 4.7.0, react-native-worklets 0.13.0, react-native-screens 4.28.0, expo 58.0.0-preview.7

Platforms

Android. iOS not verified.

JavaScript runtime

Hermes

Workflow

Using Expo Prebuild or an Expo development build

Architecture

New Architecture (Fabric)

Build type

Debug mode

Device

Android emulator

Device model

sdk_gphone64_arm64 (Android 16, API 36), gesture navigation

Acknowledgements

Yes

[github-actions]

Hey @janicduplessis! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack, a gist or a link to a GitHub repository that reproduces the problem?

[github-actions]

Hey @janicduplessis! 👋

Some of the required information in this issue is missing, incomplete or invalid. Could you take another look at the template and make sure each of these is filled in with something we can act on?

• Description - what happens, and what you expected to happen instead
• Steps to reproduce - steps somebody else can follow, not just numbering
• Gesture Handler version - the exact version from your package.json or lockfile
• React Native version - the exact version from your package.json or lockfile
• Versions of related libraries you mention (Reanimated, Worklets, Screens, Expo) - the versions actually installed
• Platforms - the platforms you actually see the bug on

Once the issue is updated we will take another look. Thanks!

[janicduplessis]

Updated with a minimal repro (https://gist.github.com/janicduplessis/80f4ac8a40f128c7d68c101e20110dd5) and the template fields.

[huextrat]

Same here 👍

Setup

• react-native-gesture-handler 3.3.0
• react-native 0.86.3, expo 57.0.25, Fabric, Hermes
• react-native-reanimated 4.7.0, react-native-worklets 0.13.0, react-native-screens 4.28.0
• Android

Where it shows up
A horizontal ScrollView from react-native-gesture-handler rendered inside a vertical FlashList

I'm currently testing #4548 on our side, the change makes sense to me. Will report back.

Edit: PR as patch is working great 👍

@m-bert if you have some time to look into this 🙏

[janicduplessis]

@huextrat I changed the approach a little bit in #4548, would you mind testing out that version of the patch too?

[huextrat]

@huextrat I changed the approach a little bit in #4548, would you mind testing out that version of the patch too?

@janicduplessis

Tested f772720: the phantom press is gone, but there is a new side effect that c3806d5 did not have.

Setup: RN 0.86, RNGH 3.3.0 + this patch. Vertical FlashList with horizontal RNGH ScrollView carousels nested inside it.

Repro: fling the vertical FlashList, then while it is still scrolling put the finger down on one of the horizontal RNGH ScrollViews and swipe vertically again to fling faster. The scroll stops instantly on touch down, and the following swipe does not scroll or re-fling. On c3806d5 the second swipe re-flings as expected.

[m-bert]

Hi @janicduplessis @huextrat!

Just to let you know, I'm currently investigating this issue.

I changed the approach a little bit in #4548

After those changes it looks like one of the options that I've prepared as a fix. I'm still looking at it, but it seems to be the right way. I'll let you know in the review.

there is a new side effect that c3806d5 did not have.

I don't think that that's "new side effect" - as far as I can see it currently behaves this way, and the previous version of the PR accidentally fixed it. Could you confirm that? I've checked that on main so if 3.3.0 works then probably some other commit broke it.

Anyways, I should have more information tomorrow. Thank you for looking into this and providing valuable information!

[m-bert]

Hi again @janicduplessis @huextrat!

We've discussed this today, I've also dug deeper into the issue itself.

34d7c6c (latest commit in #4548) fixes ScrollView issue - that's true. However, it changes activation of underlying Native gesture and it also changes how your fix for Touchable works under the hood. As I mentioned earlier, the scroll bug is also current behavior on main.

We do have another approach to fix that, but we'd like to avoid it if it's not necessary. @huextrat, would it be possible to change scroll component in FlashList to our ScrollView via renderScrollComponent prop? In that case it should work as expected. Let me know if you can do this and if you can - if it works.

As for the fix, we can merge it, but with this latest commit reverted (so the state at f772720). Let me know if you agree @janicduplessis.

[huextrat]

Thanks @m-bert!

Fine with me to merge at f772720 👍 That's what we're testing as a patch, and it solves the main issue. The remaining scroll-catch behavior is not a big problem for us.

I'll try renderScrollComponent with your ScrollView in our app in the coming weeks. Switching the scroll component might have a cost for us though: that FlashList is fairly complex and we'll have to make sure everything still works on both platforms.

[m-bert]

Good to hear that @huextrat!

Switching the scroll component might have a cost for us though: that FlashList is fairly complex and we'll have to make sure everything still works on both platforms.

Sure, if you encounter any problem let us know and we'll look into it 😅