react native-tutorial

React Native Drawer

We’ll demonstrate how to use React Native’s Drawer Navigation. We’ll utilise the createDrawerNavigator component for this. The navigation menu is essentially displayed via the UI panel. By default, it is concealed, but if the user swipes a finger from the screen’s edge, it will become visible. Today’s mobile apps consist of just one screen, therefore use React Native to build different navigational elements. React Navigation is what we’re after.

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.

Implementation

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

Code

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

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *