PanGestureHandler does not pass through scroll actions on Android

[eirikhanasand]

Description

When nesting scrollable items such as flatlist or scrollview inside of a PanGestureHandler, the scroll is not passed through on iOS, but it is on Android. Ideally it should be passed through on both, to allow swipe navigation on top of a scrollable element.

Steps to reproduce

See the snack. You simply nest a scrollable component inside of a PanGestureHandler. When running the snack, you will see that you are able to scroll on iOS, but not on Android.

Snack or a link to a repository

https://snack.expo.dev/@eirikhanasand/ranting-indigo-tea?platform=android

Gesture Handler version

2.12

React Native version

0.72.6

Platforms

Android, iOS

JavaScript runtime

None

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

None

Device

Real device

Device model

Have been tested on many physical devices, as well as both iOS and Android as the Expo snack linked above.

Acknowledgements

Yes

[j-piasecki]

This comes from the differences in the iOS and Android implementation of Gesture Handler. If you import FlatList from react-native-gesture-handler instead of react-native it should work the same as on iOS.

Here's an example

import React from 'react';
import { Text, SafeAreaView, StyleSheet, View } from 'react-native';
import {
  GestureHandlerRootView,
  PanGestureHandler,
  FlatList,
} from 'react-native-gesture-handler';

export default function App() {
  const item = [
    { id: 1, title: 'hei' },
    { id: 2, title: 'hei' },
    { id: 3, title: 'hei' },
    { id: 4, title: 'hei' },
    { id: 5, title: 'hei' },
    { id: 6, title: 'hei' },
    { id: 7, title: 'hei' },
    { id: 8, title: 'hei' },
  ];

  return (
    <SafeAreaView style={styles.container}>
      <GestureHandlerRootView>
        <PanGestureHandler>
          <View style={{ height: 300 }}>
            <FlatList
              style={{ flex: 1 }}
              data={item}
              keyExtractor={(item) => `${item.id}`}
              renderItem={(item) => (
                <Text style={styles.paragraph}>{item.title}</Text>
              )}
            />
          </View>
        </PanGestureHandler>
      </GestureHandlerRootView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'black',
  },
  paragraph: {
    backgroundColor: 'red',
    margin: 24,
    fontSize: 18,
  },
});

Or you can use `FlatList` from RN, but replace the scroll component with the one from GH

import React from 'react';
import { Text, SafeAreaView, StyleSheet, FlatList, View } from 'react-native';
import {
  GestureHandlerRootView,
  PanGestureHandler,
  ScrollView,
} from 'react-native-gesture-handler';

export default function App() {
  const item = [
    { id: 1, title: 'hei' },
    { id: 2, title: 'hei' },
    { id: 3, title: 'hei' },
    { id: 4, title: 'hei' },
    { id: 5, title: 'hei' },
    { id: 6, title: 'hei' },
    { id: 7, title: 'hei' },
    { id: 8, title: 'hei' },
  ];

  return (
    <SafeAreaView style={styles.container}>
      <GestureHandlerRootView>
        <PanGestureHandler>
          <View style={{ height: 300 }}>
            <FlatList
              renderScrollComponent={(props) => <ScrollView {...props} />}
              style={{ flex: 1 }}
              data={item}
              keyExtractor={(item) => `${item.id}`}
              renderItem={(item) => (
                <Text style={styles.paragraph}>{item.title}</Text>
              )}
            />
          </View>
        </PanGestureHandler>
      </GestureHandlerRootView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'black',
  },
  paragraph: {
    backgroundColor: 'red',
    margin: 24,
    fontSize: 18,
  },
});