React Native: Which navigator should I use? [closed]

Question

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 1

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 (12/2021) I suggest using React Navigation v6. 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, V6 builds on top of it. 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

Answer 2

You can use Ex-Navigation which is built on top of NavigationExperimental and supports both iOS and Android. Plus, it has a route navigation system and correctly supports the Android back button.

If you want to keep using the Navigator JavaScript component, I've built react-native-navigator-wrapper which is a simple wrapper around the Navigator API that supports the most common navigation patterns like push, pop and modals.

Answer 3

I have been using react-native-router-flux and it is very flexible. You can check it out.

Answer 4

React Navigation, a new project in this territory. Personally I find it better than React Native Router Flux which is not being maintained anymore.

React Navigation has lot of good features with proper documentation. It's popularity is growing rapidly. AFAIK, React core developer community guys are behind this project. Check this out, you probably gonna like it.

EDIT: React Navigation is now official navigation library.

Answer 5

RN libraries are coming out each day. In a similar situation like you these days, my choice is sticking with router-flux for simplicity until native wix library starts supporting newer RN Versions. (As I remember, there are lost of issues mentioning involvment of various people, so it is pretty active).RN is components based, it is quiet easy to implement changes along the way. So dont fixate like you have make a definite choice now :)