React Native Drawer Navigation Component

In this article, we’re going to explore how to implement Drawer Navigation in a React Native application. We’ll be using the createDrawerNavigator component, which serves as a convenient UI panel for displaying your navigation menu. By default, this panel is hidden, but it gracefully slides into view when a user swipes from the edge of the screen.

As we know, modern mobile apps often feature a single main screen, making it essential to incorporate multiple navigation components for a smooth user experience. To achieve this, we’ll leverage the power of React Navigation, which is a popular library that simplifies the process of handling navigation in React Native apps. Let’s dive in and get started!

Syntax:

const Drawer = createDrawerNavigator();
<Drawer.Navigator>
   <Drawer.Screen />
   <Drawer.Screen />
</Drawer.Navigator> 

Methods:

Drawer navigation is a popular way to organize navigation in apps. It involves sliding in a drawer from the side to display a list of screens or options.

Now let’s start with the implementation.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: “Your Project is ready!” as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press “a” as mentioned in the image below.
  • For Physical Device, Download the “Expo Go” app from the Play Store. Open the app, and you will see a button labeled “Scan QR Code.” Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you’re using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Edit Code

Example: Now let’s implement Drawer Navigation. 

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

// home screen
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', 
                   justifyContent: 'center' }}>
        <Text>Home page</Text>
    </View>
  );
}

// notifications screen
function NotificationsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', 
                   justifyContent: 'center' }}>
      <Text>Notifications Page</Text>
    </View>
  );
}

// about screen
function AboutScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', 
                   justifyContent: 'center' }}>
      <Text>About Page</Text>
    </View>
  );
}

// create a drawer navigator
const Drawer = createDrawerNavigator();
 
// create the app
function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications"component={NotificationsScreen} />
        <Drawer.Screen name="About" component={AboutScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

// export the app
export default App;

Output:

• Image:

Before Opening Drawer

After Opening Drawer

• Video:

iamabhishekkalra

Follow

Improve

Article Tags :

• Android
• React-Native
• React-Native Component