Open In App

React Native Drawer Navigation Component

Last Updated : 14 Jun, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to see how to implement Drawer Navigation in react-native. For this, we are going to use createDrawerNavigator component. It is basically the UI panel that displays the navigation menu. It is hidden by default but will appear when the user swipes a finger from the edge of the screen. These days mobile apps are made up of a single screen, so create various navigation components in React Native. We want to use React Navigation.

Syntax:

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

Methods to open and close drawer:

  • navigation.openDrawer(): It is used to open the drawer.
  • navigation.closeDrawer(): It is used to close the drawer.
  • navigation.toggleDrawer(): It is used to toggle the drawer.

 

Now let’s start with the implementation:

  • Step 1: Open your terminal and install expo-cli by the following command.

    npm install -g expo-cli
  • Step 2: Now create a project by the following command.

    expo init myapp
  • Step 3: Now go into your project folder i.e. myapp

    cd myapp
  • Step 4: Now install react-navigation into your project. React Navigation is used to navigate between one page to another. Install it by using the following command.

    npm install @react-navigation/native
  • Step 5: Now install dependencies into your react-native project by using the following command. 

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

  •  

  • Step 6: Now install drawer from react-navigation.

    npm install @react-navigation/drawer

For React Tab Navigation: This can be used in React Native as well

https://reactnavigation.org/docs/drawer-based-navigation/

Project Structure:

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';
  
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center'
                   justifyContent: 'center' }}>
        <Text>Home page</Text>
    </View>
  );
}
  
function NotificationsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center'
                   justifyContent: 'center' }}>
      <Text>Notifications Page</Text>
    </View>
  );
}
  
function AboutScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center'
                   justifyContent: 'center' }}>
      <Text>About Page</Text>
    </View>
  );
}
const Drawer = createDrawerNavigator();
  
export default 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>
  );
}


Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again. 

Reference: https://reactnative.dev/docs/navigation#react-navigation



Previous Article
Next Article

Similar Reads

React MUI Drawer Navigation
React MUI Drawer Navigation provide easy access to destinations and functionality such as switching accounts. React MUI Drawer NavigationReact MUI Drawer Navigation offer user-friendly access to various destinations within a site or app, provide access to functionalities like switching to different pages of website. It is also refered as sidebar na
6 min read
React Native Tab Navigation Component
In this article, we are going to see how to implement Tab Navigation in react-native. For this, we are going to use createBottomTabNavigator component. It is basically used for navigation from one page to another. These days mobile apps are made up of a single screen, so create various navigation components in React Native. We want to use React Nav
3 min read
How to Use Routing with React Navigation in React Native ?
Almost every mobile application requires navigating between different screens. React Native provides an elegant and easy-to-use library to add navigation to native applications: react-navigation. It is one of the most popular libraries used for routing and navigating in a React Native application. Transitioning between multiple screens is managed b
4 min read
React Suite Drawer Component
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Drawer component is a panel that slides in from the edge of the screen. We can use the following approach in ReactJS to use the React Suite Drawer Component. Drawer Props: autoFocus: The Drawer is opened and
3 min read
Create a Card View in React native using react-native-paper
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Approach: In this ar
2 min read
Create an Activity Indicator in react-native using react-native-paper library
React Native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Prerequisites: Basic
2 min read
How to add a Progress Bar in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Approach: In this a
3 min read
How to add a divider in react-native using react-native-paper library ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read
How to create a button in react-native using react-native-paper library ?
React-native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read
How to create Chip in react-native using react-native-paper ?
React native is a framework developed by Facebook for creating native-style apps for iOS &amp; Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms. Prerequisites: Basi
2 min read