React Navigation vs. React Native Navigation

performance react-native react-navigation react-native-navigation
Edwin Vargas picture Edwin Vargas · May 24, 2017 · Viewed 23.1k times · Source

I just want to know honest, experienced and objetive points of view about these two soutions to implement the navigation in React Native:

Which is better and why. Thanks

Answer

Wolverine picture Wolverine · May 24, 2017

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

Related questions

Removing console.log from React Native app

Should you remove the console.log() calls before deploying a React Native app to the stores? Are there some performance or other issues that exist if the console.log() calls are kept in the code? Is there a way to …

Read More
Flatlist getItemLayout usecase

Why we use getItemLayout in flatlist ,how it help to improve performance of a flatlist .check the react-native docs but didn't find a satisfying answer. getItemLayout={(data, index) => ( {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} )} what is offset …

Read More
RCT-Folly error when using hermes with iOS

When enabling hermes in the Podfile and rebuilding the build it fails due to RCT-Folly. No idea what it does. To re-initialise everything I use the following: rm -rf node_modules && rm package-lock.json && npm install &…

Read More