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

React Native

Nicesnippets

02-07-2022


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