DrawerLayout containing FlatList stays open when using openDrawer

[statico]

Description

We have a main drawer that we open with a button. The home screen of our app has a big FlatList with content. After opening the DrawerLayout twice using openDrawer(), if you scroll down, the drawer gets stuck open. There is no transition when it opens the final time and logging suggests that it thinks it's closed.

I have a full reproduction here: https://github.com/statico/rngh-mobile-bug

Direct link to code: https://github.com/statico/rngh-mobile-bug/blob/main/app/index.jsx

CleanShot.2023-08-22.at.15.30.26.mp4

  "dependencies": {
    "expo": "^48.0.19",
    "expo-application": "~5.1.1",
    "expo-constants": "~14.2.1",
    "expo-dev-client": "~2.2.1",
    "expo-linking": "~4.0.1",
    "expo-router": "^1.0.0",
    "expo-status-bar": "~1.4.4",
    "metro": "^0.76.6",
    "metro-resolver": "^0.76.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-ios": "^1.1.0",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-web": "~0.18.10"
  },

Steps to reproduce

1. Check out the project https://github.com/statico/rngh-mobile-bug
2. yarn install and run eas build --profile simulator --platform ios to build a development build, or try grabbing it from https://expo.dev/accounts/statico/projects/rngh-drawer-bug/builds, or maybe eas build:run -p ios just works? I'm not sure.
3. Tap the blue "Open Drawer" button
4. Tap the gray space on the right to close the drawer
5. Repeat steps 3-4 once or twice
6. Scroll the red FlatList items
7. Enjoy a stuck drawer

Snack or a link to a repository

https://github.com/statico/rngh-mobile-bug

Gesture Handler version

2.9.0

React Native version

0.71.8

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

None

Build type

Release mode

Device

Real device

Device model

All iPhones are affected

Acknowledgements

Yes

[Maddoc42]

We see the same behavior when upgrading from 2.9.0 to 2.10.0 (and above).

Edit: my mistake, our issue is similar, not identical though. Happens with 2.10.0 above only, not below (you mention testing with 2.9.0). We have:

• Call openDrawer() from button
• Close by clicking negative space
• Call openDrawer() from button
  --> drawer can no longer be closed by clicking on negative space

This happens 100% of the time on web and sometimes on android / iOS. For android / iOS it seems to happen when you spam click the interface and it's trying to animate something else when doing a drawer close. Behavior similar to #2208 (comment)

We have no FlatList in the root view but do have a FlatList in the drawer itself. The list does not need to be scrolled to cause this issue.

[statico]

I upgraded to [email protected] and built a new build, and this issue still occurs.

[statico]

If anyone has any workarounds or possible fixes, I would be happy to try them!

[statico]

This actually happens in the example too:

CleanShot.2023-08-27.at.09.13.24.mp4

[statico]

BetterHorizonatalDrawer in the examples works fine. Copying BetterHorizonatalDrawer.tsx into our project and using that instead of the default DrawerLayout fixes this problem for now.

[linxianxi]

This problem has nothing to do with FlatList. I have this problem even if I don’t have FlatList.

[linxianxi]

https://reactnavigation.org/docs/drawer-layout/ I used this now, it works fine.

[noway]

Experiencing this as well on react-native-gesture-handler 2.15.0 and React Native 0.70

[j-piasecki]

This is a duplicate of #2208