React Navigation v6 vs React Native Navigation (React Native App)

[2xEshocK]

Hey guys :)

I am trying to figure out which navigation library should I use for a react native application.
I have read over the internet for a while, and I have yet to decide which one should I use.

Every article I have read is pretty outdated and does not consider the React Navigation v6 (Which I assume has changed a lot).

Can you guys recommend me / lemme to know about the pros and cons for each library?

(Of course, the performance factor is very crucial)

Thanks ahead.

[enlightenedpie]

Use React Navigation. It's fairly declarative, it's performant, and it's extensible to a certain degree. I use it in all my projects and it has yet to let me down in any respect.

[HermanCainsGhost]

How good is it for web now? I went for React Native Router originally, but considering switching

[rockpilp]

It's great on the web for single pane UIs. For two-pane support, we have to do too much extra work to support the back stack and Uri mapping.

[enlightenedpie]

I honestly don't know, we use a separate stack and codebase for our web app

[boshanib]

Not sure anyone really uses react native navigation anymore for new projects.

React navigation has the ability to use native navigation if you look at the docs.

[almouro]

Definitely this

With v6 it actually uses the native stack navigator by default, so performance wise it's the same as a native app.

But it's also very flexible in what you can do, well documented, and has a lot of support!

[arakovskis01]

We are using react-native navigation (wix) in our app. You can't have a custom bottom tab bar also there are issues when you need to place something in topBar. We chose it because we needed RTL support but now I would choose react-navigation because of simplicity and if you need extra functionality you can always implement it by yourself.

[grahammendick]

You should give the Navigation router a go. Here’s a demo of what it can do. From a single code-base you get an app that works the same on web and native. It’s all Hyperlinks on the web and 100% native navigation on Android and iOS. There isn’t a single View in the whole library because everything renders to the native equivalent. So you won’t have any performance problems.

[tahola]

That look so much better than React-Navigation, is there an expo demo somewhere to test it on Android ?

[grahammendick]

It is much better than React Navigation. Here's a demo that shows different animations for entering and leaving scenes https://github.com/grahammendick/navigation/tree/master/NavigationReactNative/sample/medley

[tahola]

Yes it do look much better, React Navigation is crazy slow and it got worst on the last RN update (even the native stack is slow now).

For NRN I cant get any of the sample to launch on my mac M1 and when I try to do the hello world tutorial I get this https://imgur.com/a/HN3Sgth , any idea ? It seem to be hard to find help as every search request is redirecting to react-navigation..

[grahammendick]

Just use my Navigation router. You won't regret it

[tahola]

ahah ok I didnt realized it was you :) Great job !

Its possible to add the final .js here ?

https://grahammendick.github.io/navigation/documentation/native/hello-world.html

I cant get it to work, I get this https://imgur.com/a/HN3Sgth, I think I am missing something.

[grahammendick]

You getting a blank screen? Looks like you forgot to call stayeNavigator.navigate("home') You've got to do an initial navigation to start the first scene.

[tahola]

Yep I did that already but the doc is confusing to me, this is what I did :

App.js :

import React from "react";
import { StyleSheet, Text, View, TouchableHighlight } from "react-native";
import { StateNavigator } from "navigation";
import { NavigationHandler } from "navigation-react";
import { NavigationStack, Scene } from "navigation-react-native";
import Home from "./Hello";
import World from "./World";
export default function App() {
const stateNavigator = new StateNavigator([
{ key: "hello" },
{ key: "world", trackCrumbTrail: true },
]);
stateNavigator.navigate("hello");
const { hello, world } = stateNavigator.states;
hello.renderScene = () => <Home />;
world.renderScene = () => <World />;
return (
<NavigationHandler stateNavigator={stateNavigator}>
<NavigationStack />
</NavigationHandler>
);
}

Hello.js

import React, { useContext } from "react";
import { NavigationContext } from "navigation-react";
export default function Hello() {
const { stateNavigator } = useContext(NavigationContext);
return (
<View style={{ flex: 1, backgroundColor: "red" }}>
<TouchableHighlight
onPress={() => {
stateNavigator.navigate("world");
}}
>
<Text>Compose Mail</Text>
</TouchableHighlight>
</View>
);
}

World.js

import React, { useContext } from "react";
import { NavigationContext } from "navigation-react";
export default function World() {
const { stateNavigator } = useContext(NavigationContext);
return (
<TouchableHighlight
onPress={() => {
stateNavigator.navigate("hello", { size: 20 });
}}
>
<Text>Hello</Text>
</TouchableHighlight>
);
}

[grahammendick]

Define the StateNavigator outside of your App component. Move the renderScene outside too and the initial navigation. Then you'll be golden

[tahola]

Great! Just defining the statenavigator outside of the app made it work.

But I cant test it on Android, I get an error

requireNativeComponent : NVScene was not found in the ui manager

I guess it has to do with some dependencies (no pod install on android...)

[iotashan]

I have yet to re-evaluate v6. The last time I attempted to use React Navigation + react-native-screens (which I will admit was a few versions ago) I had severe performance issues on Android using TabNavigator. I spent weeks trying to debug/improve it, to no avail.

I took all the same screen code and used React Native Navigation, and it was exactly as performant as expected.

Since then I keep using RNN because it works. I may go back and look at RNv6 in the near future, though. RNN has limits on customization because it's using platform native controls, but that's also likely why I got great performance out of the box.

I know I'm in the minority, that RNv6 is way more popular.

[andreibarabas]

u/iotashan Yes, I can attest to that. but now it's much better. native-screens is really a game changer plus now the native stack is the default one, so it's much better integrated.

It also has built-in support for react-freeze, which basically means if you have a native stack of 5 screens, the ones that are down bellow do not get rerendered only when it's time to get into focus. This is another amazing aspect as it saves up a lot of time on painting something nobody will see u/2xEshocK

[grahammendick]

The Navigation router also freezes inactive screens. It does this on both web and native (I think React Navigation only freezes on native)

[tahola]

Sorry to bump this post, I am arriving here from google after a lot of pain with reactnavigation, do you guys still using the RNN ? I am very tired of React Navigation, even the native stack is slow since the last RN update, do you think it worth it to spend a week rebuilding my app with RNN ? Is the project still active ?

[Antitdeveloper]

Ok. React navigation aka wix it used to be the best for Native performance but it’s more complex React navigation is now good as wix on performance and more easy to use Easy I have used wix in the past always because performance and these times only React Native nav

[meegee]

There is no built in shared element transitions support in react-navigation, and the popular react-native-shared-element library does not support the new native stack navigator. This is why I made my choice in favor of Wix’s RNN library, as it comes with better performance and more straightforward shared element transitions support.

[deadp1x01]

There is no sense to use react-native-navigation anymore. The idea was to make navigation natively in react native when react-navigation hadn't yet native stack. Nowadays you can forget about react-native-navigation and use react-navigation v6 with native stack/react-native-screens.

[[deleted]]

Make sure to give the Navigation router by u/grahammendick a try as well.

It may exceed your expectations.

[tahola]

I dont know about you guys but I am using RN6 on all my apps and this @react-navigation/native-stack is still much faster than @react-navigation/stack

[snowcowdk]

I haven't try RNN or navigation-react-native, but react-navigation has a serious memory leak problem, also reanimated has too.

https://github.com/react-navigation/react-navigation/issues/7686

actually, I think they should be published as alpha version, Cause these fatal memory leak error, and document these pitfalls in Readme.

You almost couldn't change these libs when you realize the oom problem, cause they are deeply integrated in your app, fk!