'React Navigation Tab Screens don't show up as separate screens in history
I have a Tab Navigator with 3 screens: Home, Camera, and Profile. I then have a stack navigator which references the tab navigator, and have a screen in this stack navigator called Camera2.
const Navigation = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={TabNavigator} />
<Stack.Screen name="Camera2" component={Camera2Screen} />
</Stack.Navigator>
</NavigationContainer>
);
};
const TabNavigator = () => {
return (
<Tab.Navigator backBehavior="history" initialRouteName="Home">
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="ToCamera" component={ToCameraScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
};
Suppose I start at the Home screen, then navigate to the Camera screen by selecting the camera tab. Then in the Camera screen I use navigation.replace("Camera2"). At this point, in the Camera2 screen I would want the navigation history to look like [Home, Camera2] since the Camera screen had been removed from history. However, what I end up seeing is [Camera2].
After doing some research I realized this was happening since the tab navigator acts as a single screen in the stack navigator, so seperate tabs show up as a single screen in navigation history. So if I remove the Camera screen from history it essentially removes all Tab Navigator screens (including the Home screen).
I realize this is the expected behaviour but I was wondering how I can get the desired behaviour.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
