I am experiencing this issue right here: I want to create a simple navigation tool to move from a login (Home page) to a sign up page. This is the typescript code (.tsx):

import React, { useState } from "react";
import { View, Text, TextInput, StyleSheet, Alert, Pressable, Image, Keyboard, TouchableWithoutFeedback } from "react-native";
import CheckBox from "expo-checkbox";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";

const LoginForm = () => {
  const navigation = useNavigation<NativeStackNavigationProp<any>>();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [isChecked, setChecked] = useState(false);

  const handleLogin = () => {
    if (username === "user" && password === "password") {
      Alert.alert("Login Successful");
      // navigation.navigate('Home');
    } else {
      Alert.alert("Login Failed", "Invalid username or password");
    }
  };

  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container}>
        <Text style={styles.pageHeader}>EcoRoute</Text>
        <Text style={styles.labelLogin}>Accedi con il tuo account EcoRoute: </Text>
        <View style={styles.buttonRow}>
          <Pressable onPress={handleLogin} style={styles.socialButton}>
            <View style={styles.content}>
              <Image
                source={require("../img/Google logo.webp")}
                style={styles.logo}
              />
              <Text style={styles.normalText}>Google</Text>
            </View>
          </Pressable>
          <Pressable onPress={handleLogin} style={styles.socialButton}>
            <View style={styles.content}>
              <Image
                source={require("../img/facebook logo.png")}
                style={styles.logoFacebook}
              />
              <Text style={styles.normalText}>Facebook</Text>
            </View>
          </Pressable>
        </View>
        <View style={styles.separatorContainer}>
          <View style={styles.separator} />
          <Text style={styles.separatorText}>oppure</Text>
          <View style={styles.separator} />
        </View>
        <Text style={styles.label}>Email</Text>
        <TextInput style={styles.input} value={username} onChangeText={setUsername} placeholder="Inserisci la tua email" autoCapitalize="none" />
        <Text style={styles.label}>Password</Text>
        <TextInput style={styles.input} value={password} onChangeText={setPassword} placeholder="Inserisci la tua password" secureTextEntry />
        <View style={styles.rememberContainer}>
          <CheckBox style={styles.checkbox} value={isChecked} onValueChange={setChecked} disabled={false} />
          <Text style={styles.remember}>Ricordami</Text>
          <Text style={styles.forgot}>Dimenticato la password?</Text>
        </View>

        <View style={styles.signup}>
          <Text style={styles.register}>Non sei ancora registrato? </Text>
          <Text style={{ color: "#325094" }} onPress={() => navigation.navigate("Registrati")}>
            Registrati qui.
          </Text>
        </View>
        <Text style={styles.registerLower}>Registrandoti ad EcoRoute accetti i relativi</Text>
        <Text style={{ color: "#325094", alignSelf: "center" }}>Termini e Condizioni</Text>
      </View>
    </TouchableWithoutFeedback>
  );
};

When I try to use this part of the code: <Text style={{ color: "#325094" }} onPress={() => navigation.navigate("Registrati")}> even if I declared a “Registrati” path in the App.js like so:

import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Signup from "./apps/(tabs)/signup";
import LoginForm from "./apps/(tabs)/index";

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={LoginForm} />
        <Stack.Screen name="Registrati" component={Signup} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

I get this error in the node console:

The action 'NAVIGATE' with payload {"name":"Registrati"} was not handled by any navigator.

Do you have a route named 'Registrati'?

This is a development-only warning and won't be shown in production.