react-native-gesture-handler icon indicating copy to clipboard operation
react-native-gesture-handler copied to clipboard

Simultaneous Gestures (Pan, Native) not working w/ FlashList

Open brandonlarue00 opened this issue 5 months ago • 0 comments

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

  1. Open Snack
  2. Try simultaneous pan + scroll using FlashList
  3. Comment out FlashList + try FlatList
  4. Observe difference in behavior
  5. 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

brandonlarue00 avatar Jun 20 '25 18:06 brandonlarue00