How to add BottomTabNavigator inside the StackNavigation

Question

this is function for tabNavigation

function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={Home}/>
      <Tab.Screen
        name="ScanQR"
        component={CameraScreen}/>
      <Tab.Screen
        name="Settings"
        component={UpdateAccount}/>
    </Tab.Navigator>
  );
}

i have 3 stack which is for register, login to home, and home to other functionality

this is stack to home

function StackNavigatorHome() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="TabNavigator"
        component={TabNavigator}/>
      <Stack.Screen
        name="Select Location"
        component={SelectLocation} />
      <Stack.Screen
        name="Home"
        component={Home}/>
      <Stack.Screen
        name="HomeToCheckOut"
        component={HomeToCheckOut}/>
      <Stack.Group>
        <Stack.Screen
          name="Other Location"
          component={Others1}
        />
      </Stack.Group>
    </Stack.Navigator>
  );
}

this is stack for register

function StackNavigatorRegister() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen
          name="LogIn"
          component={Login}/>
        <Stack.Screen
          name="CreateNewSecurity"
          component={CreateNewSecurity} />
        <Stack.Screen
          name="Personal New Security"
          component={PersonalNewSecurity}/>
      </Stack.Group>
    </Stack.Navigator>
  );
}

this is login to home

function StackNavigatorLogin() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen
          name="LogIn"
          component={Login}/>
        <Stack.Screen
          name="StackNavigatorHome"
          component={StackNavigatorHome}/>
      </Stack.Group>
    </Stack.Navigator>
  );
}

this is my main function of app

export default function RootStack() {
  let auth = useAppSelector(state => state.auth);
  console.log(auth);
  return (
    <NavigationContainer>
      {auth.isLoggedIn ? (
        <>
          <StackNavigatorLogin />
        </>
      ) : (
        <>
          <StackNavigatorRegister />
        </>
      )}
    </NavigationContainer>
  );
}

Right now, i'm having trouble to deal with stack. For early stack, it show the bottomTabNavigation at Home, ScanQR, SettingProfile. Once i click another page which is HomeToCheckOut then, it not show the bottomTabNavigation.

Im expecting that, how to properly manage stack and for other page also can be see the BottomTabNavigation. I tried many codes already, but it doesnt not helping me. Thank you for helping me.

Answer 1

The BottomTabNavigator must be the top-level navigator for otherwise the bottom tabs will disappear if you navigate to another screen which is not a screen defined in the BottomTabNavigator. In your current code, the top-level navigator is StackNavigatorLogin (or StackNavigatorRegister, depending on the authentication state). The StackNavigatorLogin stack contains StackNavigatorHome which contains TabNavigator. However, the HomeToCheckOut screen is not defined as a screen inside TabNavigator (or any nested navigator defined in TabNavigator).

I would suggest the following solution for your current setup:

• Replace StackNavigatorHome with TabNavigator in StackNavigatorLogin
• Add StackNavigatorHome as the first screen in TabNavigator
• Add Home as the first screen in StackNavigatorHome

The above suggestions yield the following code:

function StackNavigatorLogin() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen
          name="LogIn"
          component={Login}/>
        <Stack.Screen
          name="TabNavigator"
          component={TabNavigator}/>
      </Stack.Group>
    </Stack.Navigator>
  );
}

function TabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="StackNavigatorHome"
        component={StackNavigatorHome}/>
      <Tab.Screen
        name="ScanQR"
        component={CameraScreen}/>
      <Tab.Screen
        name="Settings"
        component={UpdateAccount}/>
    </Tab.Navigator>
  );
}

function StackNavigatorHome() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={Home}/>
      <Stack.Screen
        name="Select Location"
        component={SelectLocation} />
      <Stack.Screen
        name="HomeToCheckOut"
        component={HomeToCheckOut}/>
      <Stack.Group>
        <Stack.Screen
          name="Other Location"
          component={Others1}
        />
      </Stack.Group>
    </Stack.Navigator>
  );
}