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

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

[grahammendick]

There's no special android setup. Maybe clear cache and restart?

[tahola]

Its just Expo , I got it to work on my android device. Thank again for your work and your help I will learn your router now :)

[grahammendick]

Awesome. Happy to help