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.