GestureDetector breaks vertical scrolling on Android (works fine on iOS)

[Yandamuri]

Description

When using GestureDetector from react-native-gesture-handler to wrap my app’s router or layout, vertical scrolling (ScrollView / FlatList) becomes unresponsive on Android.
The same code works perfectly on iOS — the issue appears only in an Expo managed app on Android.

Steps to reproduce

1. Wrap the root view as shown below

    const swipe = Gesture.Pan().onEnd(event => {
          if (IS_IOS && event.translationX < -50 && event.translationY < 100) navigate(-1)
     });
   
   
   <GestureDetector gesture={swipe}>
    	<View style={{ flex: 1 }} collapsable={false}>
    		<App />
    	</View>
    </GestureDetector>
   

2. Then you can witness what ever the ScrollView or FlatList inside the app will stop Working in Android.

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

const swipe = Gesture.Pan().onEnd(event => { if (IS_IOS && event.translationX < -50 && event.translationY < 100) navigate(-1) }); <View style={{ flex: 1 }} collapsable={false}>

Gesture Handler version

2.28.0

React Native version

0.81.4

Platforms

Android

JavaScript runtime

Hermes

Workflow

Using Expo Prebuild or an Expo development build

Architecture

New Architecture (Fabric)

Build type

Debug mode

Device

Real device

Device model

Pixel 7A

Acknowledgements

Yes

[github-actions]

Hey! 👋

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

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[m-bert]

Hi @Yandamuri! Do you use ScrollView/FlatList from react-native-gesture-handler?

[zenghaojim33]

I got the same result on Android with FlatList from react-native. I have seen people recommended using Gesture.Native but it didn't work for me. Like you I got perfect result on iOS but on Android the Flatlist is frozen.

    <GestureDetector gesture={panGesture}>
      <View style={{ flex: 1 }}>
            <GestureDetector gesture={nativeGesture}>
              <FlatList
                ListHeaderComponent={
                  <ErrorHandler error={proposalDataProvider.error} mode={'scrollable'} />
                }
                data={[
                  { id: 1, color: '#FF6B6B' },
                  { id: 2, color: '#4ECDC4' },
                  { id: 3, color: '#45B7D1' },
                  { id: 4, color: '#96CEB4' },
                  { id: 5, color: '#FFEAA7' },
                  { id: 6, color: '#DDA0DD' },
                  { id: 7, color: '#98D8C8' },
                  { id: 8, color: '#F7DC6F' },
                ]}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({ item }) => (
                  <View
                    style={{
                      height: 100,
                      backgroundColor: item.color,
                      margin: 10,
                      borderRadius: 8,
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}>
                    <Text style={{ color: '#333', fontSize: 16, fontWeight: 'bold' }}>
                      Item {item.id}
                    </Text>
                  </View>
                )}
                onScroll={onScroll}
                ref={proposalListRef}
                refreshControl={
                  Platform.OS == 'ios' ? (
                    <></>
                  ) : (
                    <RefreshControl refreshing={false} onRefresh={onRefresh} colors={['red']} />
                  )
                }
              />
            </GestureDetector>
      </View>
    </GestureDetector>

here are my gestures:

  // Create native gesture for FlatList (inner gesture)
  const nativeGesture = Gesture.Native();

  const panGesture = Gesture.Pan()
    .simultaneousWithExternalGesture(nativeGesture)
    .onStart(() => {
      console.log(`Pan gesture started`);
    })
    .onUpdate((event) => {
      console.log(` Pan gesture update:`, {
        translationX: event.translationX,
        translationY: event.translationY,
      });
    })

EnvironmentL: React native:0.73.2 RNGH:2.18.1

[m-bert]

Hi @zenghaojim33!

EnvironmentL: React native:0.73.2 RNGH:2.18.1

That's quite old and it is possible that something has changed since then. Could you check that on newer versions?

[m-bert]

Okay, I've just created minimal repro app. Seems like using ScrollView from Gesture Handler solves this issue. Below you can find reproduction code.

If it doesn't help, let me know.

Reproduction code

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView as RNScrollView,
} from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
  ScrollView as GHScrollView,
} from 'react-native-gesture-handler';

const swipe = Gesture.Pan().onEnd(() => {});

const App = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <GestureDetector gesture={swipe}>
        <View style={styles.container}>
          <GHScrollView
            horizontal
            style={{ marginTop: 24, maxHeight: 60 }}
            contentContainerStyle={{
              alignItems: 'center',
              paddingHorizontal: 16,
            }}
            showsHorizontalScrollIndicator={false}>
            {Array.from({ length: 10 }).map((_, idx) => (
              <View
                key={idx}
                style={{
                  width: 80,
                  height: 40,
                  backgroundColor: '#e0e0e0',
                  borderRadius: 8,
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginRight: 12,
                }}>
                <Text>Item {idx + 1}</Text>
              </View>
            ))}
          </GHScrollView>
        </View>
      </GestureDetector>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 18,
    color: '#333',
  },
});

export default App;