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.

• 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.

Methods for Drawer Navigation Component

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. 

Output: