Drawer Navigation in React Native Expo(with source code)

How to add Drawer Navigation using React Native Expo

Hello, React Native Developers..!!

Navigation is an important part of Mobile App Development. In the last segment, we knew how to implement Bottom Tab Navigation in React Native. In this segment, we will see about Drawer Navigation. Like how the Drawer Navigation Works in React Native Expo. It is Well both on Android as well as IOS devices.

Let’s the hack Begin..!!

Photo by AltumCode on Unsplash

Set up and Installation of React Native Expo

1. Make a directory of your choice. Say, “test”.
2. Open a terminal or command prompt in the “test” directory and write the command: expo init DrawerNavigation
3. Choose the blank template and hit enter. Wait till all the javascript dependencies being downloaded.
4. After the completion of Download, navigate to the folder “DrawerNavigation”.

5. Install the following dependencies in the “DrawerNavigation” folder.

npm install @react-navigation/native

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install @react-navigation/drawer

6.After installation of all the dependencies you will see something like this.

Code of Drawer Navigation

Open App.js. Import the following packages:

import { createDrawerNavigator } from '@react-navigation/drawer';import { NavigationContainer } from '@react-navigation/native';

Now for the testing purpose, we want to navigate to two screens using drawer navigation. So, make a directory in the “DrawerNavigation” Folder called “Screens”. In the “Screen” Folder, make two files, Home.js and Settings.js.
Paste the following code in Home.js

import React from 'react'import { StyleSheet, Text, View } from 'react-native';export default function Home() {return (<View  style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Home Screen</Text></View>)}

paste the following code in Settings.js

import React from 'react'import { Text, View } from 'react-native';function Settings() {return (<View  style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>Setting Screen</Text></View>)}export default Settings

We want some basic views on both the screen. We are done with this part. Now go back to App.js and import both the screens.

import HomeScreen from './Screens/Home'import SettingsScreen from './Screens/Settings'

Well, our main App doesn’t know about both the screens yet. So, write some about it.

const Drawer = createDrawerNavigator();export default function App() {return (<NavigationContainer><Drawer.Navigator initialRouteName="Home"><Drawer.Screen name="Home" component={HomeScreen} /><Drawer.Screen name="Settings" component={SettingsScreen} /></Drawer.Navigator></NavigationContainer>);}

We set the initial route as the Home route. In the end, run the app using “npm start” in the terminal or command prompt. We will see something like this after the build.

It’s a simple javascript code. Check out the Github code in case of any confusion or you can comment down below.

Thank You.

Hello, My Name is Rohit Kumar Thakur. I am open to freelancing. I build react native projects and currently working on Python Django. Feel free to contact me (freelance.rohit7@gmail.com)