Para crear nuestro Routers de navegacion tenemos que crear unas carpetas llamadas

• Screens
• Navigation

Lo que haremos es que en Screens con el comando rfne vamos a crear un componente que nos va a retornar solo un texto, y haremos los mismo para HomeScreen.jsx y SettingScreen.jsx

import React from "react";
import { View, Text } from "react-native";

const HomeScreen = () => {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  );
};

export default HomeScreen

import { View, Text } from 'react-native'
import React from 'react'

const SettingsScreen = () => {
  return (
    <View>
      <Text>SettingsScreen</Text>
    </View>
  )
}

export default SettingsScreen

Y en la carpeta navigation vamos a crear nuestro NavigationStack.jsx y este sera nuestro enrutador aquí vamos a importar nuestros componentes para asignarles rutas (Esto renderiza de arriba hacia abajo)

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

// Screens
import HomeScreen from "../screens/HomeScreen";
import SettingsScreen from "../screens/SettingsScreen";

const Stack = createNativeStackNavigator();

const NavigationStack = () => {
  return (
    <Stack.Navigator>
      {/* Esto carga de arriba hacia abajo */}
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
};

export default NavigationStack;

Con el parámetro initialRouteName podemos indicar que ruta quiero que se inicie

<Stack.Navigator initialRouteName="Home">

La rutas de manera implicita heredan props, por ejemplo si hacemos un console .log de los props de HomeScreen vamos a encontrar ciertos atributos entre esos navigate

const HomeScreen = (props) => {

  console.log(props)

  return (
   //....
  );
};

{"navigation": {"addListener": [Function addListener], "canGoBack": [Function canGoBack], "dispatch": [Function dispatch], "getId": [Function getId], "getParent": [Function getParent], "getState": [Function anonymous], "goBack": [Function anonymous], "isFocused": [Function isFocused], "navigate": [Function anonymous], "pop": [Function anonymous], "popToTop": [Function anonymous], "push": [Function anonymous], "removeListener": [Function removeListener], "replace": [Function anonymous], "reset": [Function anonymous], "setOptions": [Function setOptions], "setParams": [Function anonymous]}, "route": {"key": "Home-ep535XQ4hAjJCR65j55EE", "name": "Home", "params": undefined}}

Si desestructuramos los props y traemos navigation por medio de una función llamando el método navigate y pasando como prop el nombre de la ruta a la que queremos ir podemos movernos entre pantallas

import React from "react";
import { View, Text, Button } from "react-native";

const HomeScreen = ({ navigation }) => {
  const goToPage = () => {
    navigation.navigate("Settings");
  };

  return (
    <View>
      <Text>HomeScreen</Text>
      <Button title="Ajustes" onPress={goToPage} />
    </View>
  );
};

export default HomeScreen;