How to create a Drawer Navigator in React Native using React Navigation 5

Alex

Feb 8, 2020·5 min read

It has been a while since I have done an article, in addition, it has been a few weeks since I have programmed in React-Native and things have changed! In terms of some of the packages I use. One of those being React-Navigation, React Navigation 5 seems to be in full swing so I thought it would be cool if I wrote a tutorial to showcase how you can create a Drawer Navigator (that is the side menu) using React Navigation and how much easier it is!

Firstly, if you haven’t already you will need to create a react native project using the command.

react-native init MyRNNavigationProject

Once this has completed you will need to open the folder this command generates using your favourite code editor. I use VS Code A LOT.

Once you have done this you will need to install the main react navigation npm package using the below command

npm install @react-navigation/native

We will also need to install some dependencies that are used in conjunction with react-navigation. The command to do this is below.

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

react-native-gesture-handler — Helps manage gestures within the mobile app

react-native-reanimated — Allows for greater flexiblity and usage with the Animated API

react-native-screens — exposes native navigation components

react-native-safe-area-context — Method to handle safe areas

The next step is to ensure the components are properly linked to iOS and the info.plist file by entering each command into the terminal of your code editor

cd ios 
pod install 
cd ..

Furthermore, to finish the initialization of the package ‘react-native-screens’ you need to add the below lines to the build.gradle file found in the “android/app” folder of your project.

implementation 'androidx.appcompat:appcompat:1.1.0-rc01' implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

To finish the initialization of ‘react-native-gesture-handler’ you need to add the below 3 lines to the top of the file ‘MainActivity.Java’

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

In addition, you need to add the below method underneath the method “getMainComponentName”

@Override 
protected ReactActivityDelegate createReactActivityDelegate() {    return new ReactActivityDelegate(this, getMainComponentName()) {      @Override      
protected ReactRootView createRootView() { 
return new RNGestureHandlerEnabledRootView(MainActivity.this);            }
    
};
}

After this has been completed you will need to install another npm package which will install the necessary drawer components

npm install @react-navigation/drawer

You will now need to import the navigation container component from react navigation

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

Navigation container is responsible for managing the app state and interlinking the top level navigator with the rest of the app code.

After importing the navigation container you will need to import the “createDrawerNavigator” component from react navigation drawer.

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

“createDrawerNavigator” is a component that renders a drawer navigator that can be opened and closed by gestures.

You will then need to create a variable that contains an instance of this component just below the import statements.

const MyDrawer = createDrawerNavigator();

The next step is to remove all of the original gobbildy goop within the “App” variable and replace it with something much simpler. Like the below

function App(){return(<NavigationContainer>
</NavigationContainer>)}

Navigation container will be at the top level and the drawer navigator will be placed within this.

Next create two separate functions that will act as screens that we can navigate 2. If you are feeling lazy you can copy and paste mine below haha

function ContactUs() {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Contact Us</Text></View>);}function Settings() {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Settings screen</Text></View>);}

The last thing to do is to create a function that will return a drawer navigator component and its screens

So first off write the below code

function DrawerContainer() {return ();}

Next you will need to use the variable you created earlier which is the instance of the drawer navigator that was imported i.e. since i named the variable “MyDrawer” I will be referencing the the drawer navigator using this like below. In addition, we can set an initial route name in the “navigator” so when the drawer loads it will always default to a specific route.

<MyDrawer.Navigator initialRouteName="ContactUs"></MyDrawer.Navigator>

So now your function will look like the below.

function DrawerContainer() {return (<MyDrawer.Navigator></MyDrawer.Navigator>);}

You will now need to use the “screen” component of the variable you made, the screen component will be used to a new item to the drawer component.

The “screen” component has a few props, but for this tutorial we will only 2, those are “name” and component. The name property is the text the drawer item will display when in the drawer, and the component property is the component the drawer item will navigate to when it is clicked.

You will need to reference the 2 functions you created here inside the component prop. Since I have functions called “ContactUs” and “Settings” that return a component I will reference them. So now my drawer navigator function looks like the below.

function DrawerContainer() {return (<Drawer.Navigator><Drawer.Screen name="Contact Us" component={ContactUs} /><Drawer.Screen name="Settings" component={Settings} /></Drawer.Navigator>);}

However, our job is not done, we need to insert the drawer container into our absolute top level component the “App” function. This is easily done with the below code.

function App() {return (<NavigationContainer><DrawerContainer /></NavigationContainer>);}

As you can see we have a navigation container and inside of that is the function that contains our drawer navigator that will navigate to different screens depending on what drawer item is clicked.

You then export the App component using the below code

export default App;

Now you can run the command

react-native run-ios

To open a simulator

Thank you for reading this article and I hope it sheds some light on how to use the new react navigation code to build a drawer navigator!

I’m open to suggestions on how to improve my articles in terms of content, grammar even images! So hit me up if you have some suggestions :)