React Native: Tab and Stack Navigation Integrited

Question

I have an issue with Tab Navigation and Stack.

The following is Stack and Tab Navigation:

export function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor={COLORS.white}
      barStyle={{ backgroundColor: COLORS.mediumgrey }}
      inactiveColor={COLORS.grey}>
...
  <Tab.Screen
        name="More"
        component={MoreStack}
        options={{
          tabBarLabel: <Text style={styles.bottomNavBarTextSize}>More</Text>,
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="settings" color={color} size={26} />
          )
        }
        } />

The component "MoreStack" is a stack Navigation which is the following:

function MoreStack() {
 return (
   <Stack.Navigator
     initialRouteName="More"
     screenOptions={{
       headerStyle: { backgroundColor: COLORS.mediumgrey },
       headerTintColor: COLORS.white,
       headerTitleStyle: styles.navBarTitleFont
     }}>
     <Stack.Screen name="More" component={MoreScreen} options={{ headerShown: false }} />
      ...
     <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
   </Stack.Navigator>
 );
}

In MoreScreen Page, I have the following logout code:

  logOut = () => {
    firebase.auth().signOut().then(() => {
      this.props.navigation.replace('Login')
    });
  }

The issue I have is that it does go to the login page but the bottom navigation bar does NOT go away. And if I want to go back, then it goes back to the MoreScreen which it shouldn't. Logically, once you logout, you should not be able to go back.

The following picture shows the issue Notice how the bottom navigation bar is still there and if the back button is clicked, it goes back to the previous screen

****UPDATE FIXED: I fixed it by combining all the stacks into 1. It would not work if you want to do STACK1>MyTabs>STACK2. Fixed it by doing STACK1>MyTabs>Stack1.

Answer 1

Think about it this way, you have a Tab Navigation, Stack navigation and a Login Screen. Your parental status of your navigations is Tab Nav > Stack Nav > Login Screen. So when you are in any screen in your Stack Nav, you are going to be seeing the Tabs. What you need to do is the opposite.

Put your Tab Nav into a Stack navigator and name it App Navigator. And create another Stack Nav and name it CredentialNavigator, and put your Login/Signup screen into it. And in your Main/Root navigation file, you can dynamically render either your CredentialNavigator or AppNavigator based on your Login State.

isLogged ? false return <CredentialNavigator/> : return <AppNavigator>

This is very simple of course, but you can definitely expand this tree. I suggest you to go through almost all React Navigation 5 docs, it is very easy to follow and very informative.