React Navigation 3.X with example code — Part 2 — DrawerNavigator

Hope you guys were able to add the React Navigation 3.X version to your project by following the previous part of this series. If not please check this link. React Navigation 3.x with example code.

Also if you are checking for redux integration, please check the below link.

Integration React Navigation with Redux

This part let you create 2 screens basically. One a Login Screen and another a Home Screen with a side drawer. So straight to code.

STEPS:

Let’s create the layout of both the screens. First will create for Login Screen. I named it as AuthScreen.js. It contains a Title, TextInput for Email and Password, a Button and a Google Sign In button. I’m skipping the styles part as you can style it however you want.

On click of the Login button, it navigates to HomeScreen as we mentioned the Route name as ‘Home’.

Now we will create the HomeScreen.js and modify later. I am adding only a Text for now. You can modify according to your requirement.

2. Creating DrawerNavigator. Even though we are adding DrawerNavigator to our app, we need to use StackNavigator as well for the Navigation of Screens which are present in the Drawer. I will show you a flow diagram, how it is.

So if you have some items in the Drawer and the the first item takes you say to a ProductListScreen and from there to a ProductDetailScreen and so on, then all these screens goes under StackNavigator.

Also as our LoginScreen isn’t a part of the DrawerNavigator, it will also comes under Stack. Because we navigate from LoginScreen.js to HomeScreen.js. So here also one stack needed to create which contains Login and Home screens. ie we will be creating 2 screens in this app.

For better understanding let’s create the DrawerNavigator first and then the StackNavigator of this Drawer Item. Later will create the main StackNavigator.

Create a file called Drawer.js which contains all the types of Navigator the drawer is containing.

So right now my drawer contain only 1 item. Name it as ‘Home’. You can add multiple items just by adding below the Home. ‘initialRouteName’ defines the Main screen the drawer.

Then create the stacknavigator having ProductsScreen and ProductDetailsScreen. The navigationOptions() is for customizing the ActionBar. I have added a hambuger icon to it. So our DrawerStack is ready.

3. Create the AppNavigator

In this we will create the main stack navigator which contains the AuthScreen and the Drawer stack. Then give the initialRouteName as Auth as AuthScreen is our Launcher. I don’t need a header(ActionBar) in my Auth screen so I given headerMode as none. Finally added the AppNavigator to the createAppContainer which in turn imported in App.js.