'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