React-Navigation in React-Native Apps

Mobile application which consists of a single screen is a rarity. So when you add a second screen to your application, you must consider how the user will navigate from one screen to another. For transitions between different screens you can use the navigation.

So, if you want to develop React Native app it will be better to start with react-navigation. In this article we will create about an app with some common routing needs using react-navigation. We’ll consider stacks, tabs, drawer and modal. Here’s what we will get at the end:

Let’s start with a simple app that has native-base and a few screens made.

Navigation Tabs

At first we need to add two tabs: list of all notifications and bookmarked only. In this case TabNavigator from React Navigation will help us.

We’ll be working in the router.js file. The first thing we need to do is create screens — NotificationsAll.js and NotificationsBookmarked.js. Then we will need to import TabNavigator from react-navigation.

Use the Tabs navigator in our app entry point is the last thing we need to do. The result of TabNavigator is simply a component, so it can be rendered like other components.

Tabs are simple to set up using TabNavigator. The TabNavigator takes the object and each key is going to represent a tab, the component name need to add in “screen” key

For customize tabs let’s add NavigationOptions for NotificationsBookmarked:

For NotificationsAll is similar but with label “All”.

Navigation Stack

Now we want go to a new screen, for this we will use the StackNavigator where we add a new screen onto the stack

In the beginning, make sure you import StackNavigator from react-navigation. We define the StackNavigation, just like we did for the TabNavigator. We will create first screen home with ability to go to NotificationsStack

In React Navigation, in addition to accepting components for the screen, it accepts other navigation stacks to display for a screen. That means that NotificationsStack will be nested within our AppStack

Then you define a screen that component will have access to navigation on this.props which you can use for navigating to screens. We will use navigate function from props and in the Home.js we’ll add the function that will be navigate use to NotificationsStack.

In “navigate” function we’re telling navigate which screen we want to go to (which aligns with the key in our StackNavigator). Additionally we can to pass some data to the next screen.

Modal

The one of thing we need to do is to create a modal with React Navigation.

To realize a modal we will create another StackNavigator. TabNavigator will be inside of our StackNavigator. We’ll also tell this StackNavigator to bring screens from bottom to top. We need to pass “mode” with value “modal” to StackNavigator to get our goal.

You can see that this StackNavigator is exactly the same as the one we created before but we’re customize it to describe direction of appearing screens and set “headerMode” to “none” for hiding navigation bar (we have one).

So, in the end we get the next result:

DrawerNavigator

So let’s add last one to our application. We need to add DrawerNavigator to root component and pass our StackNavigator like this:

NavigationOptions for home and notifications page are looks like this:

Conclusion

I am really excited to using new navigation in React Native. One of pros is that react-navigation work for React too, so navigation logic can be shared between Mobile and Web app.
Final code: