React Native Drawer Navigation Component

14 Jun, 2021
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 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 2: Now create a project by the following command.
expo init myapp
Step 3: Now go into your project folder i.e. myappcd 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 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 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
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
Picked
React-Native
React-Native Component
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?