DEV Community

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

Posted on

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

#reactnative #android #ios #navigation

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
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

Top comments (0)