Understand Nesting React Native Navigators

In the last post we understood how to use react navigation module in a simple way. But, in real world project, we will need to nest one navigator in another.

There are three types of built-in navigators.

  1. StackNavigator
  2. TabNavigator
  3. DrawerNavigator

Basically we need to understand how to nest StackNavigator and TabNavigator in one another. And also how to pass parameters (i.e. props) when we do nesting.

Lets first code the index file. The code for index file will be like this :

Here we have used simple StackNavigator with two screens Login and Home. Since, we don’t want header for this particular navigator so we have set headerMode to ‘none’ in StackNavigatorConfig.

Now lets check code for login.js :

And here is code for home.js :

Lets understand the above code. In login.js we have Login component with a Button which has been binded to navigate prop, so that, when user clicks the button he is routed to Home screen.

In home.js we have a TabNavigator with two screens, Main screen and Chats screen, following which we have Home component .  We are using Home component to render TabNavigator and also to pass props using special ‘screenProps’ property to  Main screen and Chats screen. So, ‘screenProps’ allows us to pass data we want to pass to TabNavigator screens.

Now, lets check the code of main.js

here’s the code for chats.js

In the above main.js code we have again used a StackNavigator. This StackNavigator has been nested in the TabNavigator used in home.js. It has tree screens i.e. Profile, Age and Height screen. Again, we have passed the props we received from TabNavigator used in home.js to the screens of main.js. So, we are receiving the prop and passing it to Profile, Age and Height screen using screenProps property.

Now, lets check code of profile.js below :

Code of age.js is like this :

And, code of height.js is like this :

Lets understand the above code. In profile.js  we have rendered the data that we have been passing using screenProps property. Below that we have two buttons which are bind to navigation props. The first one allows us to navigate to Age screen and second one allows us to navigate to Height screen. Also, you can notice that when navigating to age screen we are passing parameter age which is set to 25. In age.js we have a simple Age component which renders the age parameter passed and height.js is also a very simple  React native component.

Here is how nested react native navigation works :