Stack nested inside bottom tab breaks after tab switch #6642
Description
Current Behavior
- What code are you running and what is happening?
I have a stack inside a bottom tab (not material), the stack is currently the initalRoute for the tab.
this is my stack:
<Stack.Navigator headerMode="none" initialRouteName="ListProperties">
<Stack.Screen name="ListProperties" component={PropertiesList} />
<Stack.Screen
name="EditProperty"
component={EditProperty}
// initialParams={{tabBarVisible: false}}
/>
</Stack.Navigator>which is inside this tab:
<Tab.Navigator
initialRouteName="LandlordProperties"
// unmountInactiveScreens
tabBar={props => <BottomTab {...props} />}>
<Tab.Screen
name="LandlordTasks"
component={HomeScreen}
options={{
tabBarLabel: 'Tasks',
tabBarIcon: Icon('checkmark-square-2'),
}}
/>
<Tab.Screen
name="LandlordProperties"
component={LandlordPropertiesStackNavigator}
options={({route}) => ({
tabBarLabel: 'Properties',
tabBarIcon: Icon('list'),
tabBarVisible:
route?.state?.routes?.[route.state.index]?.params
?.tabBarVisible ?? true,
})}
/>
....When I initially start the app the stack is the inital screen and everything works fine from there - I go to another screen inside this stack, go back, everything's great.
Then, I switch tab, and immediately switch back to the stack tab - I see the previous screen as expected. but then I try push another screen onto the stack (same as before) and it won't open.
if I set unmountInactiveScreens to true switch tabs has no effect and everything works fine. So I'm guessing something is messed up in the stack state that is resolved if the stack is remounted (instead of just refocused).
As you can see I have logic inside the tab that allows me to hide the tab bar if a certain screen on the stack is focused, but that has nothing to do with the bug, infact - going to that screen after tab change, causes the tab to hide but the screen still won't show.
https://media.giphy.com/media/MFs8KISgF7KubcNp6H/giphy.gif
Notice they grey bar below when I click the screen. (Not the white Android Q gesture bar).
Expected Behavior
Tab switches should not break nested stacks.
This is a GIF of how it should work: (with unmountInactiveScreen: true):
How to reproduce
Just create a bottom tab bar navigator (not material) which render a simple screen and a stack navigator with two screens.
navigation from a stack screen to another one after switching tab should break.
Your Environment
| software | version |
|---|---|
| iOS or Android | Android 10, Edit: reproducing on 8.1 too |
| @react-navigation/native | ^5.0.0-alpha.22 |
| @react-navigation/bottom-tabs | ^5.0.0-alpha.32 |
| @react-navigation/stack | ^5.0.0-alpha.54 |
| react-native-gesture-handler | ^1.5.3 |
| react-native-safe-area-context | ^0.6.2 |
| react-native-screens | ^2.0.0-alpha.22 |
| react-native | ^0.61.5 |
| expo | N/A |
| node | v10.13.0 |
| npm or yarn | npm 6.4.1 |