Exploring Navigators in React Native
One of the core components of any app, be it web or mobile, is navigation/routing. It’s the basis of how a user interacts with your app. It comes in many flavors but at it’s core a user is still navigating throughout the app.
So, when tasked with starting a new React Native app you’ll likely want to know what the right routing solution is for you… you might feel overwhelmed when trying to decide between the various options.
I recently started a new project and researched a few of the different navigation options currently on the field for React Native.
Goals
I had a few goals in mind when analyzing the routers/navigators…
- Each “route” should be easily deep linked to (if we wish to set that up). In essence that this means the route should be capable of rendering with as little data as possible.
- Integration with, or following a similar pattern, to Redux would be nice (we’re using Redux elsewhere in the app)
- Must work on both iOS and Android
- Should be relatively straight forward to understand. I don’t want to have to write anything too complex in my application code that deals with routing. It makes it harder to onboard other developers and creates cognitive load that isn’t necessarily related to my app
- It should be consistent and customizable with nice defaults. Initially I would like it to just work and beyond that I want to have the capability to extend the design how I need (such as modifying the navigation bar).
With the desires of our router outlined let’s jump into the four routers I identified as possible solutions.
Navigator
I’ve used this navigator in the past and am aware of it’s future (at least my interpretation of it) which basically ruled it out for me from the start (see cons). You can read the docs here.
Pros
- Customizable. I can do just about anything I want with this router
Cons
- Will be deprecated with the release of NavigationExperimental
- Not much out of the box without configuration. I would have to write a lot of routing related logic.
Example
You can find an example of how Navigator can be used in the UIExplorer here: https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/Navigator
ExNavigator
I’ve used this navigator prior and it was a good experience. I think the pain points I experienced where purely a result of how I set up my routes. You can view the docs here.
Pros
- Simple way to declare routes
- Easy to push a route from any other view
Cons
- Built on top of Navigator
- Hasn’t been updated since February 2016 (as of April 12, 2016)
Example
https://github.com/Thorbenandresen/ExNavigatorExample
NavigationExperimental
This is intended to be the replacement for Navigator and, based on my understanding/research, is what Facebook is transitioning to in their apps. I haven’t used this before (mostly because of how new it is). You can read the spec/outline/docs here. As of the time of this writing I can’t find any docs for it in the React Native Repo
Pros
- In React Native Core
- Seems to have a lot of out of the box power
- Facebook will/is using it in their apps
Cons
- No documentation (yet)
- You still have to write a bit of stuff yourself
Example
The UIExplorer in the React Native repo has an example setup. https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/NavigationExperimental
React Native Simple Router
This is another router that I personally haven’t used in an app. You can read the docs for it here. As a note, I did find this one later in my search and I was already pretty confident in my decision.
Pros
- Currently being maintained
- Simple to use and understand
- Quite customizable. I can get a lot out of the box but can modify just about everything
Cons
- It seems we have to do a little bit more boilerplate
- Built on top of Navigator, soon to be deprecated
Example
React Native Router Flux (My Choice)
I have to admit that I may be a bit bias here because I’ve followed this router for a little while and wanted to give it a shot. The docs exists here.
Pros
- Built on top of NavigationExperimental
- Many nice defaults (Modal, Tabbar, etc)
- Nice API to get to different views (such as Action.login())
- Ability to “refresh” a screen with new data (this is likely available in other solutions as well)
- Strong community interest
- Redux type patterns
Cons
- The way the example shows how to define your various routes/scenes could get cumbersome
Example
You can find an example app here: https://github.com/aksonov/react-native-router-flux/tree/master/Example
References
Here are a few resources I found helpful when doing my research and making my decision.
I hope you found this beneficial! Each router has its own strengths and weaknesses. I also wanted to take a moment to thank all of those who contribute to open source and put together these incredible packages!
I write about React Native Meteor — if you’re interested in learning more about what it’s like to build a React Native Meteor app sign up for my email list! I’ll send you these incredible posts (humble brag) as soon as they’re released.
