React Native Drawer Navigation Example

May 31, 2022 . Admin

Hi Guys,

In this example, I will show you how to create drawer navigation in react native. let’s discuss about how to implement drawer navigation in react native. if you have question about react native drawer navigation example then I will give simple example with solution. it's simple example of drawer navigation example in react native. you will do the following things for how to use 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.