react-native-gesture-handler: becomes unresponsive when used within a List
Description
Using a RectButton in a List component (FlatList/SectionList) will become unresponsive in certain scenarios. I am not sure whether this is an incorrect usage of this library or it’s something new with RN. This wasn’t an issue in production before.
- It’s observed that the event handler is not called when it’s unresponsive
It’s observed that when RectButton is unresponsive, it’s also unresponsive to swipe up to close the android app- It’s observed that using the same example, it cannot be reproduced on Snack
- Finally, setting
shouldActivateOnStart=trueon RectButton seems to solve the issue - Additionally, I initially thought it’s because I’m not using RectButton inside RNGH’s ScrollView so I’ve added a SectionList export via
patch-package. This also seems to solve the issue other than settingshouldActivateOnStart=true.
Platforms
- iOS
- Android
- Web
Screenshots
Steps To Reproduce
Using RN’s SectionList
- Scroll multiple times to the bottom of the list
- All <RectButton> instances become unresponsive
- Navigate to “Solution” by pressing the button in Header
- All <RectButton shouldActivateOnStart> instances are still responsive (however the ripple effect is gone)
- Exit and reload the app and navigate straight to “Solution” and repeat Step 1
- Everything works fine
Using re-exported SectionList by overriding its ScrollViewComponent with RNGH’s ScrollView via renderScrollComponent
- Apply the package by running
yarn patch-package - Scroll multiple times to the bottom of the list
- Everything works fine
Expected behavior
- RectButton does not become unresponsive when used within a List component on Android
Actual behavior
- RectButton becomes unresponsive when used within a List component Android
Snack or minimal code example
https://github.com/nujhong/RNGH-RectButton-In-a-List
Package versions
- React:
18.0.0 - React Native:
0.69.1 - React Native Gesture Handler:
2.5.0 - React Native Reanimated:
2.9.1
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 2
- Comments: 18 (4 by maintainers)
An update that is hopefully useful @j-piasecki
This seems to be a problem specific to
react-native-gesture-handler@2.5.0+ Android 12, without regards toreact-native, as Expo SDK 46 also bumped it from2.2.0to2.5.0.For the peers, we eventually downgraded it to
2.3.2and it works for us without any workarounds now.@itsramiel yes, in my example, you can also see that I can’t even press the top right header button. It was only working when I added
shouldActivateOnStart. I’m back to business now, I will try to pull in the draft to see if that resolves the issue.This is not an issue only with lists. I am experiencing the same problem. Basically the four buttons shown in a non list component, neither a ScrollView nor a Flatlist. The whole app is wrapped using GestureHandlerRootView yet this is the result
One of the buttons was not responsive after numerous tries, then another became responsive. Coming to first pressed button is again responsive.
https://user-images.githubusercontent.com/80689446/189156842-83aced93-c84a-46fe-8467-48773e1f219a.mp4
Hi! At the first glance it might be related to the overscroll animation introduced in Android 12, however when you want to use gestures or components from Gesture Handler in a list, you should use the
ScrollViewexported from Gesture Handler. UsingrenderScrollComponentto override the defaultScrollViewis the correct solution in my opinion.