31

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.

WillKre
  • 6,280
  • 6
  • 32
  • 62
  • 2
    I only have experience with `Navigator` which turned out to be simple and did what I needed so far. However, I only have a very simple navigation stack with simple back and forth. That's all I can share as I haven't tried other navigators. Have had a look at https://github.com/wix/react-native-navigation? – FMCorz Oct 11 '16 at 12:13
  • I took a look at that and it doesn't seem to support the latest version of RN as of now which is a shame. Still a possible contender though – WillKre Oct 11 '16 at 12:17
  • 1
    As of today, the [official docs suggest](http://facebook.github.io/react-native/docs/navigation.html) using [`react-navigation`](https://reactnavigation.org/), [`react-native-navigation`](https://github.com/wix/react-native-navigation) or [`native-navigation`](http://airbnb.io/native-navigation/). The latter two being native solutions and the first one being a JS based solution. – Raunaqss Jun 29 '17 at 11:32
  • Beware of https://github.com/react-community/react-navigation, on Android the performance is poor – cal Sep 06 '17 at 09:59

7 Answers7

34

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

WillKre
  • 6,280
  • 6
  • 32
  • 62
  • 2
    As of today [React Native Navigation](https://github.com/wix/react-native-navigation) supports projects using `react-native` 0.43 and above. – Raunaqss Jun 30 '17 at 12:38
  • 1
    "Once stable, NavigationExperimental will be deprecated in favor of React Navigation. React Navigation is a collaboration between people from Facebook, Exponent and the React community at large." react-navigation is now official Navigator library https://github.com/react-community/react-navigation – Hitesh Sahu Jul 17 '17 at 07:18
  • 1
    Do not use React Navigation, it's one of the worse libraries I've ever used period. Here's some issues: https://github.com/react-community/react-navigation/issues/2031 I suggest using React-native-navigation (wix) it uses native screens and transitions and it's a lot simpler/functional. – Oliver Dixon Dec 08 '17 at 13:18
3

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.

amb
  • 4,798
  • 6
  • 41
  • 68
2

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

Mnf Gl
  • 87
  • 3
2

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.

Vinay
  • 1,280
  • 2
  • 13
  • 18
  • 1
    React Navigation is terrible, DO NOT USE IT: https://github.com/react-community/react-navigation/issues/2031 For anyone reading this, my suggestion is to use Wix Navigation, it's much better, easy to use, has essencial features that are missing in React Navigation and has a native feel to it. – Oliver Dixon Sep 10 '17 at 12:19
  • Wix navigation is still under implementation of their 2.0 version & it is yet to come. React Navigation is now official navigation library. – Vinay Sep 12 '17 at 07:44
  • 1
    just because it's 'official' doesn't mean it's good. It's one of the worse libraries I've ever used. React-navigation is a cheap alternative that doesn't use native animations. Wix is much better that doesn't skip on nativness, also it doesn't suffer from performance problems and missing basic router functionality. – Oliver Dixon Sep 12 '17 at 10:03
  • 1
    Personally I found it lot better than other existing options including react native router flux. It solved my problem. Few things are a bit tricky to implement I agree. – Vinay Sep 12 '17 at 10:06
1

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 :)

Arda Ilgaz
  • 65
  • 1
  • 7
0

I've only ever used React Router Native and never had any problems.

maraujop
  • 4,472
  • 2
  • 36
  • 40
wulfhowel
  • 1
  • 2
0

There is a new project React Navigation for easy to use navigators. Facebook, Exponent and the React community are behind the project.

David
  • 311
  • 1
  • 4
  • 14