After Drawer was closed replacement with StackNavigator causes duplicated mounting and animation glitch

[okwast]

Hello there, thank you for spending your time on this issue.
It is much appreciated 🙂

Current Behavior

In our app we have a drawer navigator within the logged in state of the app.
When logging out we switch over to a StackNavigator for the login management.
The issue is when the drawer was opened and the app switches to the login navigator, the login screen gets mounted twice also causing the switch to be animated.

How to reproduce

We simplified the project as much as possible.
Therefore we created this snack: https://snack.expo.io/@baumstumpf/drawer-to-stacknavigator-duplicated-mounting-issue
Open it on any device/simulator/emulator.

1. Click the login button to get to the "app" screen.
2. Open the (emtpy) drawer menu by swiping.
3. Close the drawer menu by clicking in the darkened background (It seems like it is necessary that the menu was completely opened)
4. Click the "logout" button.
5. You see the "Login" screen flash and have it been replaced immediately by another version of the Login

What you can see is that there are two logs of "Mounted" and one log of "Unmounted".
Also the navigation state changes two times. Both times it has the same state (it looks like).

Additional infos

We discovered that it is necessary to replace the drawer with another navigator.
It is not enough to go to a plain component.

The problem appeared after updating from:

"@react-navigation/bottom-tabs": "5.1.1",
"@react-navigation/drawer": "5.1.1",
"@react-navigation/native": "5.0.9",
"@react-navigation/stack": "5.1.1",

to

"@react-navigation/stack": "5.2.6",
"@react-navigation/drawer": "5.3.4",
"@react-navigation/native": "5.1.3",
"@react-navigation/bottom-tabs": "5.2.4",

We think it is related to the update of the native package from 5.0.9 to 5.0.10, but we are not 100% sure, yet.

The issue seems to be not only related to the drawer, but we haven't been able to create a reproducible version for the issue in different environments yet.

Your Environment

Same behavior for Android and iOS.
Tested on multiple different versions.
Also tested different react-native versions

"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/drawer": "5.6.4",
"@react-navigation/native": "5.2.4",
"@react-navigation/stack": "5.2.19",
"react": "16.11.0",
"react-native": "0.62.2",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.7.0"

[github-actions]

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

• @react-navigation/bottom-tabs (found: 5.2.4, latest: 5.3.4)
• @react-navigation/drawer (found: 5.3.4, latest: 5.6.4)
• @react-navigation/native (found: 5.1.3, latest: 5.2.4)
• @react-navigation/stack (found: 5.2.6, latest: 5.2.19)
• @react-navigation/material-top-tabs (found: 5.1.6, latest: 5.1.15)
• @react-navigation/material-bottom-tabs (found: 5.1.6, latest: 5.1.15)

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

[okwast]

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

• @react-navigation/bottom-tabs (found: 5.2.4, latest: 5.3.4)
• @react-navigation/drawer (found: 5.3.4, latest: 5.6.4)
• @react-navigation/native (found: 5.1.3, latest: 5.2.4)
• @react-navigation/stack (found: 5.2.6, latest: 5.2.19)
• @react-navigation/material-top-tabs (found: 5.1.6, latest: 5.1.15)
• @react-navigation/material-bottom-tabs (found: 5.1.6, latest: 5.1.15)

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

Issue also exists with newest dependencies. I took them from the snack instead of the local project at first. Updated the original description now.

[raajnadar]

You should nest the navigation. Drawer into stack or stack into drawer whichever you prefer, usually people next stack inside the drawer.

https://reactnavigation.org/docs/nesting-navigators/

also read this

https://reactnavigation.org/docs/auth-flow/

[okwast]

I changed the structure now and everything is working fine so far.
It was not really clear to me that there needs to be a navigator to exchange things, but kind of makes sense.

Thank you for the hint 👍