Aquileo | React Native Drawer Navigation Component

The Drawer Navigation component provides a side-menu based navigation system that allows users to access different screens by swiping from the edge or tapping a menu icon. It is commonly used to organize app sections in a clean and space-efficient layout.

Displays a slide-out drawer from the left or right side of the screen.
Allows navigation between multiple screens using menu items.
Can be opened by swipe gesture or by pressing a menu button.
Helps keep the main screen uncluttered while providing easy access to options.

JavaScript

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

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

createDrawerNavigator() creates a side drawer menu for navigating between screens.
Each Drawer.Screen defines a screen that can be opened from the drawer.

Syntax:

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

Props for Drawer Navigation Component

These props are used to control the appearance, behavior, and navigation flow of the Drawer Navigation component.

initialRouteName: Sets the first screen shown when the drawer loads.
drawerPosition: Specifies whether the drawer opens from the left or right.
drawerType: Controls how the drawer appears (front, back, slide).
edgeWidth: Defines the swipe area to open the drawer.
overlayColor: Sets the background overlay when the drawer is open.
swipeEnabled: Enables or disables swipe gestures.
backBehavior: Controls back button behavior.
drawerStyle: Applies styles to the drawer panel.
sceneContainerStyle: Styles the main screen area.
keyboardDismissMode: Controls keyboard behavior when drawer opens.

These methods are used to programmatically control the opening and closing of the Drawer Navigation.

openDrawer(): Opens the drawer menu.
closeDrawer(): Closes the drawer menu.
toggleDrawer(): Toggles the drawer between open and closed.

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.

Implementing Drawer Navigation Component

It involves setting up a drawer navigator to enable side-menu based navigation between different screens in a React Native app.

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

This will launch the Expo DevTools and display a QR code in the terminal and browser.

How to run the app:

Android Emulator: Press a in the terminal to open the app in the Android emulator.
Android Physical Device: Install Expo Go from the Play Store, open it, tap Scan QR Code, and scan the QR code to run the app.
iOS Device: Open the Camera app and scan the QR code to launch the app.
Web Browser: Click the localhost link shown in the terminal or browser to run the app in the web.

Step 3: Working with App.js

Now let's implement Drawer Navigation in App.js file.

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:

React Native Drawer Navigation Component