javascriptreactjsreact-nativereact-redux

How to use Stack and Tab navigation at same time


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>

Solution

  • 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 is using TabNavigator.