How to Integrate Stack, Bottom Tab, and Drawer Navigator in React Native

In the previous article, I explained how to integrate Stack Navigator and Bottom Tab Navigator in a React Native application. Now, continuing from where we left off, I will demonstrate how to add a Drawer Navigator to the setup.

By combining all three navigation types – Stack, Bottom Tab, and Drawer – we can create a more versatile and user-friendly navigation system for complex apps.

Step 1: Dependencies installed:

- yarn add @react-navigation/drawer
- yarn add react-native-gesture-handler react-native-reanimated
- cd ios pod install

For a detailed installation guide, refer to the official documentation.

---

Step 2: Update the rootNavigator.js file

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';
import BottomNavigator from './bottomNavigator';
import SplashScreen from '../screens/SplashScreen';
import StackFullScreen from '../screens/StackFullScreen';
import DrawerNavigator from './drawerNavigator';

const Stack = createStackNavigator();

const LoginStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen name="Splash" component={SplashScreen} />
      <Stack.Screen name="FullScreen" component={StackFullScreen} />
      <Stack.Screen name="HomeScreen" component={DrawerNavigator} />
    </Stack.Navigator>
  );
};

const MainNavigator = () => {
  return (
    <NavigationContainer
      options={{
        gestureEnabled: false,
      }}>
      <LoginStack />
    </NavigationContainer>
  );
};

export default MainNavigator;

---

Step 3: Setting Up Drawer Navigator

Inside the navigation folder create a file name drawerNavigator.js

drawerNavigator.js:

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import BottomNavigator from './bottomNavigator';
import ProfileScreen from '../screens/ProfileScreen';

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: true,
        drawerStyle: {
          backgroundColor: '#f4f4f4',
          width: 240,
        },
        drawerLabelStyle: {
          fontSize: 16,
          fontFamily: 'Arial',
        },
      }}>
      <Drawer.Screen name="Home" component={BottomNavigator} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
};

export default DrawerNavigator;

---

Step 4: Folder Structure

Organize your project for clarity and scalability. Here's a suggested structure:

project-root/
├── screens/
│   ├── SplashScreen.js
│   ├── HomeScreen.js
│   ├── ProfileScreen.js
│   └── SubPageScreen.js
├── navigation/
│   ├── RootNavigator.js
│   ├── MainTabNavigator.js
│   └── HomeDrawerNavigator.js

---

Conclusion

By nesting the Drawer Navigator inside the Home Tab of the Bottom Tab Navigator and managing the root flow with a Stack Navigator, we achieve a seamless navigation system. This setup is flexible and scalable for most app requirements.

After reading the post consider the following:

• Subscribe to receive newsletters with the latest blog posts
• Download the source code for this post from my github