React Native: Which navigator should I use?

Apswak picture Apswak · Oct 11, 2016 · Viewed 10.8k times · Source

I have to build a relatively big cross-platform (iOS & Android) application within 3 months.

So far when it comes to React Native I only have experience with NavigatorIOS. Now while I never really ran into any problems with it I never see people recommending its use.

The other options are Navigator, which seems simple enough but maybe doesn't allow much native UI support? and NavigatorExperimental which I know nothing of, and the name alone worries me. I don't want to be having any last minute nightmares.

I plan on spending a month learning React Native thoroughly and then 2 months building the application.

This leads me to my question: If you had to build a cross platform application in React Native, which navigation would you use for each platform, and why?

Any answers or tips greatly appreciated.

Answer

Apswak picture Apswak · Oct 14, 2016

Answering my own question as I've done quite a bit of research on the different options out there, and tried all the main ones out myself.

NEW EDIT: As of today (07/2020) I suggest using React Navigation v5. It's the community solution being most pushed by Facebook. The V5 rewrite was a complete game changer and is far superior to previous versions. Easy to get setup and implementing easy/complicated stacks is a breeze most of the time.

If that's not doing it for you another alternative is react-native-navigation by wix (not compatible with expo unfortunately).



Keep an eye on native-nagivation by airbnb. They've been in beta for a while and not much has been pushed to the project recently so I'd still suggest React Navigation for prod. (edit: avoid - this project has been dropped.)



original post below:

TLDR: As of today (13/01/2017) I would still highly suggest React Native Router Flux. With ex-navigation, by Exponent being a great alternative.

I have been using RNRF for my project and it's been perfect so far. Superb navbar & stack customization (which was a big thing for me) and easy to integrate with other packages.


Longer version: (edit: out of date now)

Navigator: To be avoided. Without going into details why, the fact that Facebook have dropped it and are no longer maintaining it is to me, a big enough reason to choose another navigation.

NavigatorIOS: As the name states, only available on IOS, which isn't great if you're going for a cross-platform application. There are a couple of difference when it comes to stacking which to me, beats the whole 'learn once, write anywhere' thing FB are going for. With that said, if your iOS app's navigation isn't too complicated, and you're not looking for too much navbar customisation this is a fairly good choice which leverages native UIKit navigation, so will automatically render a navigation bar with a back button and title.

NavigationExperimental: Don't be scared off by it's name like I was. NavigationExperimental has lots of control over the navigation stack, and allows for much easier state management. Excluding 3rd party libraries, this is to go to navigation option.

Ex-Navigation: I'll just quote Eric Vicenti of Facebook, who's on the React Native team:

If you are interested in a more imperative approach, where you can sort of make method calls to navigate throughout your application in a way similar to the previous Navigator, then I would definitely recommend ExNavigation. We’re working relatively closely with Exponent so these things are not going to sort of diverge in dangerous ways.

React Router Native: The docs say it all. All I can say is if you're used to React Router, this could be for you.


Keep an eye on: React Native Navigation by WIX. Looks very decent but I haven't given it a go given the fact it's a bit behind the latest version of react native (when writing this answer).


Interesting RN Nav reads:

React Native — Which Navigator should I use?

First look: React Native Navigator Experimental Part 1