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 ( ); }; const MainNavigator = () => { return ( ); }; 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 ( ); }; 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

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

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 (
    
      
      
      
    
  );
};

const MainNavigator = () => {
  return (
    
      
    
  );
};

export default MainNavigator;

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 (
    
      
      
    
  );
};

export default DrawerNavigator;

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

Related Posts

Static sites FTW

Jan 12, 2025  0

Discover the Best of JavaScript with Best of JS

Jan 13, 2025  0

Docker for PHP begginers as simple as possible

Jan 9, 2025  0