React Native page navigation

 Fist, You need to install them in your project

npm install @react-navigation/native @react-navigation/native-stack

npm install react-native-screens react-native-safe-area-context

Now, you need to wrap the whole app in NavigationContainer, Usually you'd do this in your entry file, such as index.js or App.js: 

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StyleSheet, Text, View, Button } from 'react-native';

const Stack = createNativeStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <Button 
      title="Go to Jane's profile"
      onPress={() => navigation.navigate('Profile', { name: 'Jane'})} />
  )
}

const ProfileScreen = ( {navigation, route}) => {
  return <Text>This is {route.params.name}'s profile </Text>;
}

const MyStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Welcome' }} />
        <Stack.Screen name="Profile" component={ ProfileScreen } />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default MyStack;