91

What are the technical differences between the main two React Native navigation solutions: React Native Navigation and React Native?

Are there specific technical limitations that would require the use of one over the other?

Is one more widely used than the other?

Patricia Green
  • 495
  • 5
  • 14
Edwin Vargas
  • 1,132
  • 1
  • 8
  • 14

3 Answers3

96

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

React Native Navigation as the name says uses the native modules with a JS bridge, so performance will/may be better. This requires native integration.

While React Navigation is a simple and powerful solution provided by react native itself. Its an all JS implementation unlike the other that uses native support which can be tricky. Just npm-install and you're good to go ...

Use react navigation if you prefer an all JS implementation and use native navigation if your highest priority lies in performance .

  • Both libs have undergone drastic changes and entered next stable versions. react-navigation is more stable and performant now. If you have to handle complex computations in js go for react-native-navigation. but in most cases react-navigation will work for you!
  • With the advent of react-native-screens, the native screen optimisation is brought possible to react-navigation by bringing the native navigation component (UIViewController for iOS, and FragmentActivity for Android) Refer here

For those who are looking from a user experience view, both provides almost identical animations and flow so that you wouldn't know what lib is used behind the scenes. The major difference is the native side that can make performance better(which is crucial for a better user experience)

Both libs are amongst the best navigation solutions for React Native. Use it according to your need/preference.

satya164
  • 9,464
  • 2
  • 31
  • 42
Victor
  • 4,171
  • 1
  • 29
  • 37
  • 16
    Considering `React Navigation` is **still today in `beta`** and **full of annoying bugs**, take into consideration stability too. For my concern I'm so disappointed of `React Navigation` that I will give a try to `React Native Navigation`. Yes a waste of time... If only Facebook gave us a bit time before leaving Navigator... – MacKentoch Sep 10 '17 at 08:28
  • 6
    react-native-navigation is awesome. react-navigation lacks very critical lifecycle methods such as isFocused or onLeave. – Jeungmin Oh Feb 09 '18 at 02:29
  • isFocused and other lifecycle methods/events are there on v2: https://reactnavigation.org/docs/en/with-navigation-focus.html#docsNav https://reactnavigation.org/docs/en/navigation-events.html#docsNav – Estevão Lucas Sep 18 '18 at 14:43
  • 1
    The answer gives no clue about if there is a relevant difference for the user experience. Better performance does not imply a perceivable difference for the user, so I'm still not sure if there is any real difference for users between these options and that's what I would like to know. – jacmkno Feb 20 '19 at 15:59
  • React navigation v3 is not compatible with Redux. – optim1st Feb 27 '19 at 19:14
  • 1
    @optim1st Wrong! you can use redux with latest versions. Make sure you follow instructions example repo : https://github.com/victorkvarghese/react-native-boilerplate – Victor Mar 09 '19 at 06:00
  • 2
    looking at the comments is like (o.O) and then looking at the date of comments is like (^.^) – Zeeshan Ahmad Khalil Mar 01 '22 at 16:27
3

React Native Navigation using native navigation by wrapping each screen with a native controller. So the performance is optimized by the native realm. The area you gonna implement is inside the header and tab bar.

React Navigation is pure js implementation. It uses React-native root view as the container view. Each screen is under the root view hierarchical tree.

So if you open the app from View Hierarchy console, you will see a big difference (React Navigation includes a bunch of weird components like multiple headers or tab bar, the tree is also difficult to understand).

Maolei Tang
  • 81
  • 6
2

You should give the Navigation router a try. It provides the best of both worlds: 100% native navigation on iOS and Android and a JavaScript array representation of the native stack of screens.

graham mendick
  • 1,839
  • 1
  • 17
  • 15