Simultaneous Gestures (RNGH) .Pan() + .Native() not working together w/ FlashList

[brandonlarue00]

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. Also seems that native gestures are not being detected from the FlashList

Expected Behavior

ScreenRecording_06-20-2025.14-26-02_1.mov

Something like iMessage timestamp revealing where I can almost free-pan so I can reveal timestamps and scroll. This works with FlatList so it likely means native gestures are not being detected from the FlashList. Some method to expose native elements?

I have tried

• Single Gesture Detector with composed gesture
• renderScrollComponent from FlashList w/ GestureDetector wrapping a ScrollView passed in (Support multi-touch behaviour with panning and scrolling software-mansion/react-native-gesture-handler#2622 (comment))
• 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: software-mansion/react-native-gesture-handler#2175 (comment)

Are there any workarounds or is this not supported? The most recent active issue I have seen here: #551 was closed 3 weeks ago with an outdated solution almost 3 years old and on the older version of RNGH so I am wondering if anybody has found something for RNGH >2.0?

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

FlashList Version

1.6.4

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

[naqvitalha]

Hi! 👋

We're now focusing exclusively on FlashList v2 and React Native's New Architecture. This means we're closing older issues and suggestions that aren't relevant to v2.

If this issue/suggestion is still relevant:

• Please verify it still occurs in FlashList v2
• Open a new issue with v2-specific details
• We'll be happy to take a look!

Resources:

• FlashList Documentation

Thank you for your understanding! 🙏

[HyopeR]

Are there any updates or guidance on this issue? It seems like the scrolling behavior of FlashList is completely ignored when using Gesture.Native and Gesture.Pan in parallel.

After some trial and error, I found a way to fix it. This might help others experiencing this problem. You just need to force Gesture.Native to start when you launch it. To do this, use .shouldActivateOnStart(true).

Example:

export const FlashPage = () => {
  const gestureNative = Gesture.Native().shouldActivateOnStart(true);
  return (
    <GestureDetector gesture={gestureNative}>
      <FlashList
        data={Array.from({length: 20}, (_, i) => i + 1)}
        keyExtractor={item => item.toString()}
        renderItem={({item}) => (
          <View style={styles.item}>
            <Text style={styles.itemText}>Item: {item}</Text>
          </View>
        )}
      />
    </GestureDetector>
  );
};

[GeorgeHop]

I can confirm, can see this issue on Android when on ios everything is working, for some reasons FlashList not responding to any gestures when wrapped in a GestureDetector with gesture.Naitve() in it. This thing is a big issue and not allow to create any complex gestures on Android.

[zyestin]

Hit the same class of bug on Android with this stack:

• react-native-pager-view (PagerView outside)
• @shopify/flash-list v2 (a vertical scrollable inside the center page)
• React Native 0.76+, RNGH 2.27+

Symptom: in the inner scrollable, press anywhere with no RNGH child gesture for ~1s, then drag vertically → all subsequent ACTION_MOVE events are silently dropped, the list does not scroll. Pressing on a button (Gesture.Tap) and then dragging works fine. Reproducible 100% of the time on Pixel devices.

What we tried (all insufficient on their own):

1. Replace inner ScrollView with RNGH ScrollView via FlashList renderScrollComponent — recommended in #3918 but not enough by itself.
2. Wrap PagerView with <GestureDetector gesture={Gesture.Native()}> — recommended in #3268 but no effect alone.
3. Pass the pager's native gesture down via withRef + Context, then add it to the inner GHScrollView via simultaneousHandlers (the FlashList overrideProps={{ simultaneousHandlers: pagerNativeRef }} pattern from j-piasecki in Dynamic item height causes items to overlap during fast scroll #2175) — improved coordination inside the RNGH state machine but did not fix the press-then-drag case.
4. shouldActivateOnStart={true} on the inner NativeViewGestureHandler — "fixes" press-then-drag but unconditionally cancels every child Tap/Pan, breaking all buttons, sliders and the pager's own horizontal swipe (this is documented behaviour, not a bug).

Root cause we settled on: the bug lives one layer earlier than RNGH — in the RN ResponderSystem ↔ Android ViewGroup native touch routing. PagerView's internal NestedScrollableHost claims touch ownership at ACTION_DOWN, holds it through the long-press window, then refuses to release ACTION_MOVE to the child. Anything inside RNGH (simultaneousHandlers, Gesture.Native(), blocksExternalGesture) operates after this routing decision and cannot revert it.

Workaround that actually works: claim the RN responder at the same ACTION_DOWN on every "bare View" region inside the inner scrollable, using the legacy RN onStartShouldSetResponder API on a non-collapsible View. RN's responder claim propagates to native via requestDisallowInterceptTouchEvent(true), which is the only signal NestedScrollableHost honours.

// PassiveTouchSeed.tsx — drop into any "bare View" region (list header,
// list item background, gaps between items) inside the nested scrollable.

import React from 'react'
import { View, type ViewProps } from 'react-native'

const claimResponder = () => true

export function PassiveTouchSeed({ children, ...props }: ViewProps & { children: React.ReactNode }) {
  return (
    <View
      {...props}
      accessible={false}
      collapsable={false}                                    // (1)
      onStartShouldSetResponder={claimResponder}             // (2)
      onResponderTerminationRequest={claimResponder}         // (3)
    >
      {children}
    </View>
  )
}

Why each line matters:

1. collapsable={false} — Android RN folds Views with no native side-effect into their parent. Without this, PassiveTouchSeed does not exist as a native View and onStartShouldSetResponder never registers.
2. onStartShouldSetResponder={() => true} — at ACTION_DOWN, RN's ResponderSystem asks "does anyone want to be the responder?". Claiming it triggers requestDisallowInterceptTouchEvent(true) on the parent ViewGroup chain, which tells PagerView's NestedScrollableHost: do not hijack this gesture.
3. onResponderTerminationRequest={() => true} — when the inner GHScrollView later asks to take over (because the user actually started dragging), agree to release. Cooperative, not greedy.

Wrap any region inside the nested scrollable that has no RNGH child gesture: list header, item background, gaps between items. Do not wrap things that already have RNGH gestures (vote buttons, sliders, etc.) — they are already fine.

After this change, in our app:

• press-then-drag (anywhere) → scrolls correctly ✅
• buttons / sliders / RNGH children → unchanged ✅
• pager horizontal swipe → unchanged ✅

This sits underneath RNGH and is independent of any simultaneousHandlers / Gesture.Native() plumbing. We kept the j-piasecki-recommended simultaneousHandlers pattern from #2175 as defense in depth, but the fix above is what actually unblocks the press-then-drag case.

Hope this helps anyone else stuck on Android × PagerView × any nested vertical scrollable.