ScrollView/FlatList not working in @react-navigation/stack with react-native-gesture-handler

[Artem29383]

Description

In a React Native app, after updating react-native-gesture-handler from version 1.x.x to 2.x.x, I encountered an issue where scrolling (ScrollView, FlatList) stopped working inside modals created using @react-navigation/native and @react-navigation/stack.

I know that you can use ScrollView / FlatList from RNGN, but in the first version everything worked with components from RN and I want to continue as it was, otherwise the whole project will have to get used to the changes and hack animation components from reanimated.

The bug is reproduced only on a real device! On the emulator it works as expected.

Code example:

import {CardStyleInterpolators, createStackNavigator, StackNavigationOptions} from '@react-navigation/stack';
const RootStack = createStackNavigator();
<RootStack.Screen component={RefillScreen} name={navigatorModal.RefillOperation} />

import styled from 'styled-components/native';

const ContentContainer = styled.ScrollView`...`;

Component returns <ContentContainer>{...children...} </ContentContainer>

Steps to reproduce

Create a navigation stack with a modal screen using createStackNavigator from @react-navigation/stack. Inside the modal screen, add a ScrollView or FlatList component from react-native. Wrap everything in GestureHandlerRootView to ensure gesture handling works properly. Run the app with react-native-gesture-handler version 2.x.x. Scrolling within the modal stops working, while other gestures (e.g., modal dismiss) still work fine. Also this problem with Animated components from Reanimated lib.

Snack or a link to a repository

https://snack.expo.dev/iFekXg616qHwrb4WZrdGP

Gesture Handler version

2.20.1

React Native version

0.74.2

Platforms

Android

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

None

Build type

Debug mode

Device

Real device

Device model

Samsung Galaxy A13 (version 13)

Acknowledgements

Yes

[m-bert]

Hi @Artem29383!

I encountered an issue where scrolling (ScrollView, FlatList) stopped working inside modals created using @react-navigation/native and @react-navigation/stack.

Does this work with components from Gesture Handler? (i.e. ScrollView and FlashList). You've said that you're aware that you can use them, but does this actually help?

[Artem29383]

@m-bert Hi!

Yes, I tested ScrollView , FlatList from RNGH inside a modal window from react-navigation/stack and it worked, but with native components from react-native itself, preference is given to gestures of the modal window, ignoring the rest, for example, when we try to scroll scrollview inside a modal window, the window intercepts the gesture and events on scrollviews are ignored.

In the previous version of RNGH there were no such problems, even just updating the library, you can immediately encounter such a problem. The problem was reproduced on android (on a real device), ios and emulator behaved as expected.

I can try to record a screencast from the phone, if it helps.

[Artem29383]

I mean modal like this

import {CardStyleInterpolators, createStackNavigator, StackNavigationOptions} from '@react-navigation/stack';
const RootStack = createStackNavigator();

<RootStack.Navigator
        screenOptions={{
            ...defaultModalScreenOptions,
            cardStyleInterpolator: CardStyleInterpolators.forVerticalIOS,
            gestureDirection: 'vertical',
        }}
    >
<RootStack.Screen component={RefillScreen} name={navigatorModal.RefillOperation} />

[m-bert]

I understand. Sadly, if our versions of given components work, there's not much that we can do about this issue. This is why we have them in our package - to enable such interactions.

If there's a specific issue that happens after migrating to our components, feel free to either reopen this one, or create a new one.