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
SOCIAL SHARE CARD GENERATOR