How to use Stack and Tab navigation at same time

Issue

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 are using TabNavigator.

Answered By - electroid