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

[MyrinNew]

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 (
screenOptions={{
headerShown: false,
}}>




);
};

const MainNavigator = () => {
return (
options={{
gestureEnabled: false,
}}>


);
};

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 (
screenOptions={{
headerShown: true,
drawerStyle: {
backgroundColor: '#f4f4f4',
width: 240,
},
drawerLabelStyle: {
fontSize: 16,
fontFamily: 'Arial',
},
}}>



);
};

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

More...