Hi Guys,

In this quick example, let's see react native drawer navigation with custom sidebar menu example. you will learn how to use drawer navigation with custom sidebar menu in react native. I’m going to show you about how to implement drawer navigation with custom sidebar menu in react native. if you want to see example of how to create drawer navigation with custom sidebar menu in react native then you are a right place.

Let's start following example:

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

expo init ExampleApp

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

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;

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.mywebtuts.com/image/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.mywebtuts.com/')}
                />
                <View style={styles.customItem}>
                    <Text
                        onPress={() => {
                            Linking.openURL('https://www.mywebtuts.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;

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;

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;

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;

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

expo start

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

It will help you...