Navigation Drawer In React Native

Neeraj Sharma

6 March 2021

React-Native Navigation-Drawer

We are going to create a navigation drawer in the react-native app which supports both iOS and Android apps.

Will cover this blog in simple terms with a minimal example. The navigation drawer is playing an important role when you have a menu list to show the app user.

Users can easily navigate menu items and take action on them.

If you have not created a project then please create a project by run this command –

react-native init "Project Name"

1	react-native init "Project Name"

if using existing then please make sure all updated javascript files downloaded in the node_module folder, If not then update by –

npm install

1	npm install

Before starting the Navigation drawer we have to install these dependencies.

//Mainly use this dep for nav drawer.
npm install @react-navigation/drawer

//These are the support dep which required in nav drawer other will throw errors
npm install @react-navigation/native
npm install react-native-reanimated
npm install react-native-screens
npm install react-native-safe-area-context
npm install react-native-gesture-handler

//Mainly use this dep for nav drawer.

npm install @react-navigation/drawer

//These are the support dep which required in nav drawer other will throw errors

npm install @react-navigation/native

npm install react-native-reanimated

npm install react-native-screens

npm install react-native-safe-area-context

npm install react-native-gesture-handler

After installing these dependencies run –

react-native link --all

1	react-native link --all

Check the below example code in App.js

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native'
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function WebkulECommerce({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{padding:12}}>{"Welcome to Webkul E-Commerce"}</Text>
      <Button
        onPress={() => navigation.navigate('MobikulMobile-Apps')}
        title="Go to Mobikul Mobile App"
      />
    </View>
  );
}

function MobikulMobileApps({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{padding:12}}>{"Welcome to Mobikul App Section"}</Text>
      <Button onPress={() => navigation.goBack()} title="Go back" />
    </View>
  );
}

export default class App extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="WebkulE-Commerce">
          <Drawer.Screen name="WebkulE-Commerce" component={WebkulECommerce} />
          <Drawer.Screen name="MobikulMobile-Apps" component={MobikulMobileApps} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  };
}

import * as React from 'react';

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

import { NavigationContainer } from '@react-navigation/native'

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function WebkulECommerce({ navigation }) {

return (

<Text style={{padding:12}}>{"Welcome to Webkul E-Commerce"}</Text>

<Button

onPress={() => navigation.navigate('MobikulMobile-Apps')}

title="Go to Mobikul Mobile App"

</View>

);

}

function MobikulMobileApps({ navigation }) {

return (

<Text style={{padding:12}}>{"Welcome to Mobikul App Section"}</Text>

<Button onPress={() => navigation.goBack()} title="Go back" />

</View>

);

}

export default class App extends React.Component {

render() {

return (

<Drawer.Navigator initialRouteName="WebkulE-Commerce">

<Drawer.Screen name="WebkulE-Commerce" component={WebkulECommerce} />

<Drawer.Screen name="MobikulMobile-Apps" component={MobikulMobileApps} />

</Drawer.Navigator>

</NavigationContainer>

);

};

}

Explanation -:

We have created two-screens function names WebkulE-Commerce and MobikulMobile-Apps and set them in the Drawer Navigator screen.
We have set the default first screen by setting initialRouteName to WebkulE-Commerce because our first screen should be shown WebkulE-Commerce.
You can set it by home page or dashboard page which you want.
React-native navigation is also syncing with the Drawer navigator, You can check by a click the button and navigate to another screen and check out in Nav-Drawer menu current screen is automatically in the selected state.

Run the app and check out the result.

For Android –

react-native run-android

//or, open the android folder in Android-studio and run by play button.

react-native run-android

//or, open the android folder in Android-studio and run by play button.

For iOS –

//Go to ios folder by terminal 
cd ios

//install pod files by the command

pod install

//Go to ios folder by terminal

cd ios

//install pod files by the command

pod install

After success pod installed open ios folder in File Explorer and start workspace file which will be open in X-Code studio.

Output screens –

Do you want to open a navigation drawer from the Right side?

Add this key – drawerPosition in Navigator.

<NavigationContainer>
 <Drawer.Navigator initialRouteName="WebkulE-Commerce" drawerPosition="right"> 
 <Drawer.Screen name="WebkulE-Commerce" component={WebkulECommerce} />
 <Drawer.Screen name="MobikulMobile-Apps" component={MobikulMobileApps} />
 </Drawer.Navigator> 
</NavigationContainer>

<Drawer.Navigator initialRouteName="WebkulE-Commerce" drawerPosition="right">

<Drawer.Screen name="WebkulE-Commerce" component={WebkulECommerce} />

<Drawer.Screen name="MobikulMobile-Apps" component={MobikulMobileApps} />

</Drawer.Navigator>

</NavigationContainer>

See more of our exciting blogs – https://mobikul.com/blog/
Reference – https://reactnavigation.org/docs/drawer-based-navigation/

Happy coding … </ :)>