Build a TabNavigator combined with Stack and Drawer

Question

I currently have these navigators built:

const MainStackNavigator = () => {
return (
  <Stack.Navigator
  screenOptions={{
    cardStyle: {backgroundColor: theme['primaryColor']},
    header: () => <MenuComponent />,
  }}>
  <Stack.Screen name="Logins" component={LoginScreen} />
  <Stack.Screen name="Swipe" component={SwipeScreen} />
  <Stack.Screen name="List" component={ListScreen} />
  <Stack.Screen name="Detail" component={DetailScreen} />
</Stack.Navigator>
);
};

return (
  <Root>
    <NavigationContainer>
      <Drawer.Navigator
        screenOptions={{swipeEnabled: false}}
        drawerContent={(props) => <SidebarComponent {...props} />}
        initialRouteName="Login">
        <Drawer.Screen name="List" component={MainStackNavigator} />
      </Drawer.Navigator>
    </NavigationContainer>
  </Root>
);

I need to additionally add a TabNavigator to the "Swipe" screen so that i can build 3 more screens and swipe over them

Answer 1

You can create a TabNavigator with the screens you want. Then include it in your MainStackNavigator instead of the Swipe screen component.

First, you can create your TabNavigator like this.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Screen1" component={Screen1} />
      <Tab.Screen name="Screen2" component={Screen2} />
      <Tab.Screen name="Screen3" component={Screen3} />
    </Tab.Navigator>
  );
};

Then, include it in your MainStackNavigator instead of the Swipe screen component like this.

const MainStackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        cardStyle: { backgroundColor: theme['primaryColor'] },
        header: () => <MenuComponent />,
      }}>
      <Stack.Screen name="Logins" component={LoginScreen} />
      <Stack.Screen name="Tabs" component={TabNavigator} />
      <Stack.Screen name="List" component={ListScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
};

Please comment here if you have any problems regarding this.