React Native Navigation Test sample - react-native

Question

So, I have been playing around with navigation in React Native and wanted to test something out with it. So I have generally been working with a stack navigation and have built it and works just fine. What I was testing around with was using navigate like I would in react.js and be able to just use that to move between components.
App.tsx
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Main from "./screens/main";
import { NavigationContainer } from "#react-navigation/native";
export default function App() {
return (
<View style={styles.container}>
{/*<NavigationContainer>*/}
<Main />
{/*</NavigationContainer>*/}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Main.tsx
import React, { FC } from "react";
import { Button, View, Text } from "react-native";
import Home from "./home";
import { useNavigation } from "#react-navigation/native";
const App : FC = () => {
const navigation = useNavigation();
return(
<View>
<Text>This is just a holding screen</Text>
<Button title="Home" onPress={()=> navigation.navigate(Home)}/>
</View>
)
}
export default App;
Home.tsx
import React from "react";
import { View, Text} from "react-native";
import Main from "./main"
export default function App(){
return(
<View>
<Text>
Test this
</Text>
</View>
)
}
Not sure if this is even possible or just best to use the stack navigation? To me this is more similar to native development where I am on one screen and just call the screen that I want to move to.
I also was looking at the docs for this here.
https://reactnavigation.org/docs/navigation-actions/#navigate

Answer 1

React Navigation requires defining and registering all your navigation routes before navigating to them.
A simple example of stack navigation with multiple screens:
import * as React from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Profile"
onPress={() => navigation.navigate('Profile')}
/>
</View>
);
}
function ProfileScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Notifications"
onPress={() => navigation.navigate('Notifications')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="Go to Settings"
onPress={() => navigation.navigate('Settings')}
/>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
function SettingsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button title="Go back" onPress={() => navigation.goBack()} />
</View>
);
}
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Notifications" component={NotificationsScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyStack />
</NavigationContainer>
);
}
In-depth docs - https://reactnavigation.org/docs/stack-navigator/#api-definition
Working Demo - https://snack.expo.dev/#emmbyiringiro/d7224b