Back navigation is buggy with `createNativeStackNavigator` on Android
See original GitHub issueDescription
I have set up a createNativeStackNavigator
using the react-navigation
library. It is set up as follows
<Stack.Navigator>
<Stack.Screen
name="MainTabs"
component={MainTabs}
options={{headerShown: false}}
/>
<Stack.Screen name="ChatScreen" component={ChatScreen} />
</Stack.Navigator>
Note: MainTabs is a tab navigator created using the createMaterialBottomTabNavigator
api from @react-navigation/material-bottom-tabs
Whenever I push a screen and then press back either from the header or using the Android back gesture, the top screen is popped for once and then suddenly the popped screen again shows up in a weird way (check the video below to better understand whats happening)
The navigations work perfectly fine on iOS.
The navigations also work on Android when I use createStackNavigator
instead of createNativeStackNavigator
Video
Steps To Reproduce
- Make a Material bottom navigator (using the
createMaterialBottomTabNavigator
api from@react-navigation/material-bottom-tabs
) - Nest it inside
createNativeStackNavigator
- Start the app and try to push a screen and then go back
Expected behavior
After pressing back the popped screen should disappear and not shown again
Actual behavior
Shows the correct screen for a split second but then shows some parts of the popped screen (Check video from above)
Snack or minimal code example
Package versions
{
"react-native-paper": "^4.9.2",
"react": "17.0.2",
"react-native": "0.65.1",
}
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (2 by maintainers)
I tested a simple example with
react-native-reanimated
:2.3.0-beta.1
and I could spot an issue. After upgrading to2.3.0-beta.4
, I can no longer see the problem. I will close it then. Feel free to comment here if I am wrong and we can reopen it then.It seems that is similar issue to https://github.com/software-mansion/react-native-reanimated/issues/2460