Drawer does not close after selecting item

[JenilynnB]

Current behavior

When using a drawer navigator with nested stack navigators and selecting an item, the selected screen will appear, but the drawer will not close.

This happens on iOS devices with "Reduce Motion" and "Prefer Cross-Fade Transitions" enabled.

RPReplay_Final1715791549.mov

Expected behavior

The drawer should close when an item is selected

Reproduction

https://snack.expo.dev/@jbrandes/authentic-yellow-apple

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-tab-view

Environment

package	version
@react-navigation/native	6.1.12
@react-navigation/drawer	6.6.15
@react-navigation/stack	6.3.29
react-native-safe-area-context	4.10.1
react-native-screens	3.31.1
react-native-gesture-handler	2.16.1
react-native-reanimated	3.10.1
react-native	0.74.1
expo	51.0.5

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 6.1.12, latest: 6.1.17)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[JenilynnB]

Confirmed. Issue still exists.

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[Eonfuzz]

This is currently happening in our expo project too since migrating to expo51

[drewjoh]

This is happening for me as well.

This causes strange things such as needing to tap a menu item in the drawer twice to close it.

Or if you find yourself having closed it (such as by putting a delay before props.navigation.closeDrawer();) - then trying to open the menu up causes some things to execute (such as drawerHideStatusBarOnOpen), but to not actually open the drawer until you do another iteration (click 3 more times to open the menu).

[JenilynnB]

Also now having reports of some Android users experiencing the same issue with their "Remove Animations" setting turned on.

[DivyaniPatel96]

Hello, Did any one got resolution for this issue? I am also facing same issue for iOS.

[tipleavalentin]

Also happens on my end. [email protected], [email protected], [email protected], @react-navigation/[email protected].
It took me a while to figure how to reproduce the issue on Android, it happens only when animations are disabled.
Did someone found a fix?
Thanks!

[Eonfuzz]

@tipleavalentin We've messed around with the newer reanimated / expo versions to no success so far. I think we'll have to wait until a maintainer works on the project. For now has anyone reverted Expo versions successfully?

[nympheastudio]

for me the bug disapear when updating to 6.6.15 :

"@react-navigation/drawer": "6.6.15",
"@react-navigation/native": "^6.1.17",
"expo": "^51.0.8",

[JenilynnB]

Still experiencing the issue with those versions. This is becoming a huge annoyance in my project and rolling back was a big undertaking, so I edited the Drawer component myself to make it work in the meantime. Here's what worked for me.

In the file node_modules/@react-navigation/drawer/src/views/modern/Drawer.tsx in the toggleDrawer function add reduceMotion: ReduceMotion.Never to the animation configuration and add ReduceMotion as an import from react-native-reanimated

  translationX.value = withSpring(translateX, {
    velocity,
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 0.01,
    restSpeedThreshold: 0.01,
    reduceMotion: ReduceMotion.Never
  });

[tipleavalentin]

Still experiencing the issue with those versions. This is becoming a huge annoyance in my project and rolling back was a big undertaking, so I edited the Drawer component myself to make it work in the meantime. Here's what worked for me.

In the file node_modules/@react-navigation/drawer/src/views/modern/Drawer.tsx in the toggleDrawer function add reduceMotion: ReduceMotion.Never to the animation configuration and add ReduceMotion as an import from react-native-reanimated

  translationX.value = withSpring(translateX, {
    velocity,
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restDisplacementThreshold: 0.01,
    restSpeedThreshold: 0.01,
    reduceMotion: ReduceMotion.Never
  });

Hi!
Thank for your solution.
While this works fine on the development live run on the final build (android) it doesn't apply. I also added the property in 3 other places in node_modules/drawer folders (js compiled code) and still doesn't work.
I'm using cmd: "eas build --platform android --local --profile android-apk"
Did you managed to fix this?
Thanks!

Later edit:

• "eas build" does npm install again after it copies project files in a tmp directory so any change to node_modules it won't apply as it's reinstalled in the tmp dir;
  I found a solution:
• We need to set this cmd in package.json ->
• {
  scripts: "eas-build-post-install": "cp node_modules/@react-navigation/drawer/src/views/modern/Drawer.tsx [tmp]/node_modules/@react-navigation/drawer/src/views/modern/Drawer.tsx"
  }
• Also we need to update the build cmd: EAS_LOCAL_BUILD_WORKINGDIR=[tmp] eas build --platform android --local --clear-cache;
• [tmp] can be replaced with the path you want, by default /tmp it's used;

[JenilynnB]

Thank you for this. I hadn't done a build, only pushed an update with eas update

My attempts to get this to work while building on expo servers (rather than local builds) aren't working, but I'd rather not spend more time on this. Will rely on the update until the package is fixed.