How to Create Drawer Navigation with Custom Sidebar Menu in React Native?

Hi Guys,

This simple article demonstrates of how to create drawer navigation with custom sidebar menu in react native. I would like to show you react native drawer navigation with custom sidebar menu example. we will help you to give example of how to use drawer navigation with custom sidebar menu in react native. if you have question about how to implement drawer navigation with custom sidebar menu in react native then I will give simple example with solution.

Let's start following example:

Step 1: Download Project

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

expo init ExampleApp

Step 2: Install and Setup

First, you need to install them in your project:

npm install @react-navigation/native

You need to install drawer navigation:

npm install @react-navigation/drawer

You need other supporting libraries react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context and @react-native-community/masked-view:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Step 3: 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 HomeScreen from './Screens/HomeScreen';
import ImageScreen from './Screens/ImageScreen';
import StatutScreen from './Screens/StatutScreen';
import CustomSidebarMenu from './Screens/CustomSidebarMenu';

const Drawer = createDrawerNavigator();

const App = () => {
    
    return (
        <NavigationContainer>
            <Drawer.Navigator
                drawerContent={(props) => <CustomSidebarMenu {...props} />}
            >
                <Drawer.Screen name='Home' component={HomeScreen} />
                <Drawer.Screen name='Image' component={ImageScreen} />
                <Drawer.Screen name='Status' component={StatutScreen} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

export default App;

Step 4: CustomSidebarMenu.js

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

import React from 'react';
import {
    SafeAreaView,
    View,
    StyleSheet,
    Image,
    Text,
    Linking,
} from 'react-native';
import {
    DrawerContentScrollView,
    DrawerItemList,
    DrawerItem,
} from '@react-navigation/drawer';

const CustomSidebarMenu = (props) => {
    const BASE_PATH =
        'https://www.nicesnippets.com/image/nice-logo.png';

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View style={{ marginTop: 40, }}>
                <Image
                    source={{ uri: BASE_PATH }}
                    style={styles.sideMenuProfileIcon}
                />
            </View>
            <DrawerContentScrollView {...props}>
                <DrawerItemList {...props}  />
                <DrawerItem
                    label="Visit Us"
                    onPress={() => Linking.openURL('https://www.nicesnippets.com/')}
                />
                <View style={styles.customItem}>
                    <Text
                        onPress={() => {
                            Linking.openURL('https://www.nicesnippets.com/');
                        }}
                    >
                        Rate Us
                    </Text>
                </View>
            </DrawerContentScrollView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    sideMenuProfileIcon: {
        resizeMode: 'contain',
        width: '95%',
        height: 60,
    },
    customItem: {
        padding: 16,
        flexDirection: 'row',
        alignItems: 'center',
    },
});

export default CustomSidebarMenu;

Step 5: HomeScreen.js

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

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

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

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

export default HomeScreen;

Step 6: ImageScreen.js

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

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

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

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

export default ImageScreen;

Step 7: StatutScreen.js

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

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

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

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

export default StatutScreen;

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