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.

Have you read the React navigation documentation? You haven't implemented the authentication flow properly. And if the bottom tab bar issue is bothering you, here's how you can fix it. — Kapobajza
I did try restructuring it but had no luck. I used Stack as the default export that navigates to MyTabs() after login. It then goes to MoreScreen within the MyTabs. Once I click "logout" there, I navigate back to the Authentication Stack. So it's kind of like Stack->Tab->Stack. But the issue with mine is I can't get rid of the Tab if I want to go to the 1st Stack. — Danish Saeed
I am telling you that you haven't implemented the authentication flow correctly. You shouldn't use navigation.replace for it. Please refer to the React navigation authentication flow docs and you will solve your problem. — Kapobajza
navigation.replace did not work. But now I fixed it but combining all the Stacks into 1 stack and then referred to the Login page from Authentication Stack. The link you provided for restructuring really helped. Thank you so much — Danish Saeed

Bora Sumer Bora Sumer · Accepted Answer · 2021-01-10T15:36:42

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.

React Native: Tab and Stack Navigation Integrited

1 Answers