Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
React Native Drawer Navigation
2.1.
Syntax
2.2.
Methods to open/close drawer
2.3.
Example
3.
Frequently Asked Questions
3.1.
What is an initial Route?
3.2.
What is the use of the alignItems attribute?
3.3.
How do the open and closing drawer functions work internally?
4.
Conclusion 
Last Updated: Mar 27, 2024
Medium

React Native Drawer Navigation

Author Pradeep Kumar
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Have you ever noticed a hamburger icon in the top left corner of applications, which upon clicking, shows redirecting links to different screens? Ever wondered what it is and how to create one for your mobile application?

It is called Drawer Navigation. In this article, we will learn how to create one in React Native. If you are new to React Native and are yet to set up your environment for the language, you can check out this React Native Development.

React Native Drawer Navigation

Drawer Navigation is essentially just a navigation menu displayed on the User Interface. It is hidden by default but will appear if the user swipes their finger from the screen's edge. Nowadays, mobile apps are made up of a single screen, so we design numerous navigation components using the react-navigation framework.

Syntax

// Creating a new drawer
const Drawer = createDrawerNavigator();

// Constructing the navigator for drawer
<Drawer.Navigator>

  // Adding screens to the navigator
   <Drawer.Screen />
   
  // Any numbers of screen can be added to a navigator
</Drawer.Navigator> 

Methods to open/close drawer

navigation.openDrawer(): This method is used to open a drawer.

navigation.closeDrawer(): To close a drawer, this method is invoked.

navigation.toggleDrawer(): Drawers can be toggled using this method.

Now we will look at an example explaining how to create drawer navigation in React Native. We will use the createDrawerNavigator component for this. Before writing the application, follow the below steps to create a new project and add the necessary libraries to your program.

Step 1: To run the program, you first need to install expo-cli.

npm install -g expo-cli

 

Step 2: Now create a new project using the following command:

expo init drawerNavigationApp

 

Step 3: Now go to the project directory.

cd drawerNavigationApp

 

Step 4: Add react-navigation to your project now. Use the following command to install it:

npm install @react-navigation/native

 

Step 5: Now install the following packages, using the command:

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context react-native-screens 

 

Step 6: Now install the drawer library using the following command:

npm install @react-navigation/drawer

Example

Now that we have learned what Drawer Navigation is, let's see the implementation of the same with the help of an example. In this example, we create drawer navigation where the user can choose a particular value from the navigation. Upon selecting any specific value, the app gets redirected to the page associated with the chosen value. The code for the App.js file is as follows:

App.js

import * as React from 'react';
import { Text, View } from 'react-native';
import { createDrawerNavigator }
    from '@react-navigation/drawer';
import { NavigationContainer }
    from '@react-navigation/native';

// Design and Content of the Home Screen Page
function HomeScreen() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style = {{fontSize: 40, color: 'orange'}}>Hello Ninjas!</Text>
    <Text style = {{fontSize: 25, color: 'black'}}>Welcome to Coding Ninjas</Text>
  </View>
);
}

// Design and Content of the Profile Screen Page
function ProfileScreen() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style = {{fontSize: 25, color: 'black'}}>Profile Page</Text>
  </View>
);
}

// Design and Content of the Settings Screen Page
function SettingsScreen() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style = {{fontSize: 25, color: 'black'}}>Settings Page</Text>
  </View>
);
}


// Creating a new Drawer
const Drawer = createDrawerNavigator();

// Adding different screens to the Drawer
export default function App() {
return (
  <NavigationContainer>
  <Drawer.Navigator initialRouteName="Home">
    <Drawer.Screen name="Home" component={HomeScreen} />
    <Drawer.Screen name="Profile" component={ProfileScreen} />
    <Drawer.Screen name="Settings" component={SettingsScreen} />
  </Drawer.Navigator>
  </NavigationContainer>
);
}   

 

Output:

The home page of the application looks like this:

Upon clicking on the drawer navigation icon given in the top left corner, the following drawer is prompted to the screen:

It contains links for three different screens: Home Screen, Profile Screen, and Settings Screen.

Also see,  React Native Reanimated

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Frequently Asked Questions

What is an initial Route?

An initial route is a page displayed upon clicking the navigation drawer. This is the default screen that is prompted to the user when they open the application.

What is the use of the alignItems attribute?

As the name suggests, this is used to align items. For example, if you want to align items centrally, you can set the value of this attribute to "center".

How do the open and closing drawer functions work internally?

Drawer.openDrawer(), Drawer.closeDrawer(), Drawer.toggleDrawer() functions internally just dispatch actions using the navigation.dispatch() method.

Conclusion 

In this article, we have extensively discussed React Native Drawer NavigationWe hope that this blog has helped you enhance your knowledge regarding React Native Drawer Navigation, and to learn more, check out our other article on React Native Switch.

If you want to learn more, check out the awesome content on the Coding Ninjas Website,
Android DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Studio Interview BundleCoding Ninjas Studio Interview ExperiencesCoding Ninjas CoursesCoding Ninjas Studio Contests, and Coding Ninjas Studio Test SeriesDo upvote our blog to help other ninjas grow. Happy Coding!

Previous article
React Native Create Material Top Tab Navigator
Next article
React Native AsyncStorage
Live masterclass