React Native Drawer Navigation

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