How to Create Drawer Navigation in React Native?

Hi Guys,

Here, I will show you how to works react native drawer navigation example. if you have question about how to implement drawer navigation in react native then I will give simple example with solution. This article goes in detailed on how to use drawer navigation in react native. I explained simply step by step drawer navigation example in react native. Let's get started with how to create drawer navigation in react native.

In this example, there are 3 screens (Home, Cart, and Images) defined using the Drawer.Screen component. Similarly, you can define as many screens as you like.

Step 1: Download Project

In the first step run the following command to create a project.

expo init DrawerNavigation

Step 2: Installation and Setup

First, you need to install them in your project:

npm install @react-navigation/native     

after all you need to install drawer navigation:

npm install @react-navigation/drawer

You also need to install react-native-gesture-handler and react-native-reanimated.

If you have a Expo managed project, in your project directory, run:

expo install react-native-gesture-handler react-native-reanimated    

If you have a bare React Native project, in your project directory, run:

npm install react-native-gesture-handler react-native-reanimated

you can set drawer icon to install vector icons:

npm i react-native-vector-icons

you have use any bundled Icon:

import this:

import Icon from 'react-native-vector-icons/FontAwesome5';

Step 3: App.js

Now, you need to wrap the whole app in NavigationContainer. Usually, you'd do this in your entry file, such as App.js:

In this step, You will open the App.js file and put the code.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { StyleSheet, Text, View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';

const HomeScreen = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>HomeScreen</Text>
        </View>
    );
}

const CartScreen = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>CartScreen</Text>
        </View>
    );
}

const ImageScreen = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>ImageScreen</Text>
        </View>
    );
}

const Drawer = createDrawerNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Drawer.Navigator>
                <Drawer.Screen
                    name='Home'
                    component={HomeScreen}
                    options={{
                        drawerIcon: ({ focused, size }) => (
                            <Icon
                                name="home"
                                size={size}
                                color={focused ? 'red' : 'black'}
                            />
                        ),
                    }}
                />
                <Drawer.Screen
                    name='Cart'
                    component={CartScreen}
                    options={{
                        drawerIcon: ({ focused, size }) => (
                            <Icon
                                name="shopping-cart"
                                size={size}
                                color={focused ? 'red' : 'black'}
                            />
                        ),
                    }}
                />
                <Drawer.Screen
                    name='Image'
                    component={ImageScreen}
                    options={{
                        drawerIcon: ({ focused, size }) => (
                            <Icon
                                name="images"
                                size={size}
                                color={focused ? 'red' : 'black'}
                            />
                        ),
                    }}
                />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 20,
    }
});

export default App;

Run Project

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

Output :

It will help you...