react-native-gesture-handler
react-native-gesture-handler copied to clipboard
Simultaneous Gestures (Pan, Native) not working w/ FlashList
Description
Current Behavior: I have a FlashList with items that can be panned to reveal timestamps and it seems I can either Pan or Scroll the FlashList even though I have a composed simultaneous gesture.
Expected/Desired Behavior: https://github.com/user-attachments/assets/268d80cd-0e24-4e72-9982-05fd42348369
Something like iMessage timestamp revealing where I can almost free-pan so I can reveal timestamps and scroll.
I have tried:
- Single Gesture Detector with composed gesture
- renderScrollComponent from FlashList w/ GestureDetector wrapping a ScrollView passed in (https://github.com/software-mansion/react-native-gesture-handler/issues/2622#issuecomment-2276746709)
- 2 gesture detectors w/ outer one Gesture.Native() wrapping FlashList & other Gesture.Pan() wrapping messages
- .simultaneousWithExternalGesture(Gesture.Native()) on pan gesture
- overrideProps w/ some ref that is passed to FlashList & Gesture Detector
- ref to access native scrollable node of FlashList
FlatList instead of FlashList does work technically but it is awful looking with live data fetching and lots of messages.
Minimal reproducible example: https://snack.expo.dev/@yaboibrando/flashlistgestures?platform=ios All things I have tried are on the snack to try
FlatList working and not FlashList indicates that Native gesture detection is not working on the FlashList which is why I've seen a lot of people suggesting the renderScrollComponent and passing a ScrollView in there, and also why I tried to use getScrollableNode from FlashList for the scrollableRef but these did not seem to work. The most commonly suggested solution online is using gesture handlers which are from older versions of RNGH like here: https://github.com/software-mansion/react-native-gesture-handler/issues/2175#issuecomment-1230207219
Are there any workarounds or is this not supported? The most recent similar issue (#2622 ) I found was active like 10 months ago so I'm hoping something has changed since then.
Steps to reproduce
- Open Snack
- Try simultaneous pan + scroll using FlashList
- Comment out FlashList + try FlatList
- Observe difference in behavior
- Try uncommenting different things I've tried to see if they work
A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.
https://snack.expo.dev/@yaboibrando/flashlistgestures?platform=ios
Gesture Handler version
2.16.1
React Native version
0.74.3
Platforms
iOS
JavaScript runtime
None
Workflow
Using Expo Go
Architecture
None
Build type
None
Device
iOS simulator
Device model
No response
Acknowledgements
Yes