How to use Stack and Tab navigation at same time

Question

Hello I am new to react native and particullary react navigation. I am stuck on one easy thing, use the tab navigator and the stack navigator at the same time. I am able to use one at a time but not both at the same time. I didn't fully understood the react navigation doc. Here is what I am doing :

My navigation file : at first my stack Navigator :

const Stack = createStackNavigator()
 export default function MyStack() {
    return (
        <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown: false}}>
                <Stack.Screen name="Profile" component={Profile}/>
                <Stack.Screen name="Home" component={Home}/>
                <Stack.Screen name="MachinesList" component={MachinesList}/>
                <Stack.Screen name="Size" component={Size}/>
                <Stack.Screen name="Weight" component={Weight}/>
            </Stack.Navigator>
        </NavigationContainer>
    )
}

and then my tab navigator :

const Tab = createBottomTabNavigator()

export function TabNavigator(){
    return(
            <Tab.Navigator>
                <Tab.Screen name='Profile' component={Profile}/>
                <Tab.Screen name='Home' component={Home}/>
                <Tab.Screen name='MachinesList' component={MachinesList}/>
            </Tab.Navigator>
    )
}

And here is how I try to put my navigation in my App.js :

 return (
      <Provider store={store}>
          <MyStack />
      </Provider>

Answer 1

You need to add your TabNavigator as a Stack.Screen within Stack.Navigator.

const Stack = createStackNavigator()
 export default function MyStack() {
    return (
        <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown: false}}>
                <Stack.Screen name="Profile" component={TabNavigator}/>
                <Stack.Screen name="Home" component={Home}/>
                <Stack.Screen name="MachinesList" component={MachinesList}/>
                <Stack.Screen name="Size" component={Size}/>
                <Stack.Screen name="Weight" component={Weight}/>
            </Stack.Navigator>
        </NavigationContainer>
    )
}

You can see now that Profile Stack.Screen are using TabNavigator.

Answer 2

You need to define which screens are located in which tabs. Currently, you have three tabs that hold screens that are all located on the same stack.

Usually, this works as follows.

• Define a tab navigator with n tabs
• Define n stacks
• Assign each stack to the corresponding tab
• Assign the screens to their stacks

In your case, this looks as follows.

const Tab = createBottomTabNavigator()

export function TabNavigator() {
  return (
        <Tab.Navigator>
           <Tab.Screen name='Profile' component={ProfileStack}/>
           <Tab.Screen name='Home' component={HomeStack}/>
           <Tab.Screen name='MachinesList' component={MachineListStack}/>
        </Tab.Navigator>
   )
}

The HomeStack then looks as follows.

const Stack = createStackNavigator()
const HomeStack = () => {
   
    return (
      <Stack.Navigator initialRoutName="HomeScreen">
         <Stack.Screen name="HomeScreen" component={HomeScreen} />
         // all other screens located inside the stack of the tab Home
      </Stack.Navigator>
    )
}

Do the same for all other stacks. Now, you have three tabs with three stacks. You can nest as many screens inside each stack as you like.

In your main application, you then initialize the TabNavigator.

export default function App() {

return (
    <NavigationContainer>
       <TabNavigator />
     </NavigationContainer>
  );
}