Navigation in React Native

Shivraj Kumar during his work with React Native has tried and implemented various types of navigators in his projects. Here he briefly shares his experience of implementing navigation in React Native apps and the complexities that come with it.

But before we get to navigation in React Native, let’s define navigation in the general sense.

What is Navigation?

Navigation is the process or activity of ascertaining the position of an object and planning a route to it. This definition applies to navigation in mobile apps as well.

Navigation in Mobile Apps

Navigation plays a crucial role in Mobile App Development.

• Navigation helps a user know where he is in an app and how did he get to that place. Navigation keeps track of all the pages available in the app.
• Through Navigation the user can go to other areas in the app. All places are accessible by the user through navigation.
• Navigation also plays an infrastructural role by helping consolidate ceremonies that need to be done before rendering a new screen.

Navigation is the root of our application. It knows the location of each and every component that is present in our app. So if our Navigation has bugs, the whole app can potentially break down.

Navigation in React Native

There are multiple navigators that a developer can choose from in order to achieve navigation in React Native. Below are some of the navigators that were officially included in React Native’s documentation.

NavigatorIOS

NavigatorIOS is a wrapper around UINavigationController, allowing you to implement a navigation stack. It works in the same way as it would on a native app using UINavigationController, providing the same animations and behaviour from the UIKit.

The obvious reason for calling it NavigatorIOS is that it is only available for iOS.

To set up the navigator, provide the initialRoute prop with a route object. A route object is used to describe each scene that your app navigates to. initialRoute represents the first route in your navigator.

Here is the use case for NavigatorIOS:

You can then access the props passed in via {this.props.myProp} .

push and pop are the only actions that can be performed here.

Navigator

Unlike NavigatorIOS, Navigator works for both iOS as well as Android. Navigator is just the JavaScript implementation of NavigatorIOS.

Navigator’s initialRoute is written like this:

Note: In both NavigatorIOS and Navigator, to setup the infrastructure of our app you need to use switch cases or if-else statements.

With the release of NavigationExperimental, Navigator was soon deprecated.

NavigationExperimental

NavigationExperimental was intended as the replacement for Navigator. But due to lack of documentation, it was soon abandoned as well. Another drawback here was that NavigationExperimental did not have any pre-defined actions. You had to write your own actions.

A lot of the boilerplate code had to be written to setup the navigation with this navigator.

Ex-Navigation

Ex-Navigation is another navigator that uses NavigatorExperimental’s API internally. Here, the use case was easier and pre-defined functions were also introduced.

Ex-Navigation was introduced by team Exponent(now Expo). Since NavigationExperimental is deprecated in React Native from 0.42.0. This is no longer maintained.

React Native Router Flux

This router is built on top of NavigationExperimental and used by many developers. It is also quite easy to understand. React Native Router Flux is the only library till date that uses JSX.

Another great thing about this router is that it has really nice defaults like Modal and TabBar.

Various actions were defined in this library that helps the user to navigate to different pages of the app. Some of them are:

Actions.ACTION_NAME(PARAMS)

Actions.pop()

Actions.refresh(PARAMS)

React Native Router Flux is backed by a strong community. The only drawback is defining various routes can get complex sometimes.

Here is the use case of React Native Router Flux:

React Native Router Flux can also be implemented with Redux:

React Native Router Flux with Redux is pretty simple. We just need to connect our router and use the wrapper component to connect to our screens.

To know more about React Native Router Flux, click here.

React Navigation

React Navigation was created because there was a need for an extensible but easy to use navigation method. It has proved to be an improvement compared to the various other pre-existing navigation libraries. Soon NavigationExperimental was deprecated and other similar libraries like Ex-Navigation and React Native Router Flux were abandoned as well.

React Navigation can be used in React as well as React Native projects, allowing for a higher degree of shared code.

React Navigation was created as a collaborated effort from people at Facebook, Exponent and React Community at large.

Use case for React Navigation:

React Navigation can also be Redux as shown below.

Here, we need to set an initial state of our navigator. This initial state then has to be passed to a reducer, which can be used one of the props for our navigator. Then the navigator can be used as a root navigator for the whole app.

The lack of proper documentation makes React Navigation with Redux quite complicated.

Scan the below QR code using Expo to see the React Navigation Demo App.

Other Popular Navigators

Making something open source usually leads to other people building up on what you have created. The same is true for React Native as well. Although React Navigation is currently the official navigator for React Native, there are many other navigators out there that are created by the React Native Community to suit their needs.

Native Navigation

This library was created by Airbnb. You can find its repository here.

React Native Navigation

This is one of the best navigation libraries available. It provides a completely native platform navigation on iOS and Android for React Native apps. The JavaScript API here is very simple and cross-platform.

React Native Navigation comes with optional redux support. Click here to check out React Native Navigation’s docs.

About the Author

Shivraj is a software engineer at GeekyAnts. He hails from the city of Mysore and has been working on React Native for over a year now.

Thanks for reading. Hit 💚 if you liked this article.