DEV Community

Cover image for How to Integrate Stack, Bottom Tab, and Drawer Navigator in React Native
Amit Kumar
Amit Kumar

Posted on

2 1 1 1 1

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.

Image description

Step 1: Dependencies installed:

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

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more