Issue with Navigation in React Navigation (React Native)

Question

I'm encountering an issue with navigation in my React Native app using React Navigation. I have a RestaurantsScreen component where I'm attempting to navigate to the "RestaurantDetail" screen using navigation.navigate("RestaurantDetail"). However, I'm getting an error: "The action 'NAVIGATE' with payload {"name":"RestaurantDetail"} was not handled by any navigator."

Error Message: ERROR The action 'NAVIGATE' with payload {"name":"RestaurantDetail","params":{"screen":"ABC"}} was not handled by any navigator.

Do you have a screen named 'ABC'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

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

Screenshot of Error: enter image description here

Code:

AppNavigator:

// AppNavigator.js
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "@expo/vector-icons/Ionicons";
import { SafeArea } from "../../components/utility/safe-area.component";
import { Text } from "react-native";
import { RestaurantsNavigator } from "./restaurants.navigator";

// ... (other imports)

export const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        // ... (tabBar options)
      >
        <Tab.Screen
          name="Restaurants"
          component={RestaurantsNavigator}
          options={{ headerShown: false }}
        />
        {/* ... (other screens) */}
      </Tab.Navigator>
    </NavigationContainer>
  );
};

RestaurantsNavigator:

// restaurants.navigator.js
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { TransitionPresets } from "@react-navigation/stack";
import { RestaurantsScreen } from "../../features/restaurants/screens/restaurant.screen";
import { Text } from "react-native";

const RestaurantStack = createNativeStackNavigator();

export const RestaurantsNavigator = () => {
  return (
    <RestaurantStack.Navigator
      screenOptions={{ ...TransitionPresets.ModalPresentationIOS }}
    >
      <RestaurantStack.Screen
        name="Restaurants"
        component={RestaurantsScreen}
      />
      {/* Include the "RestaurantDetail" screen here */}
      <RestaurantStack.Screen
        name="RestaurantDetail"
        component={() => <Text>Restaurant Detail Screen</Text>}
      />
    </RestaurantStack.Navigator>
  );
};

RestaurantsNavigator:

// restaurants.navigator.js
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { TransitionPresets } from "@react-navigation/stack";
import { RestaurantsScreen } from "../../features/restaurants/screens/restaurant.screen";
import { Text } from "react-native";

const RestaurantStack = createNativeStackNavigator();

export const RestaurantsNavigator = () => {
  return (
    <RestaurantStack.Navigator
      screenOptions={{ ...TransitionPresets.ModalPresentationIOS }}
    >
      <RestaurantStack.Screen
        name="Restaurants"
        component={RestaurantsScreen}
      />
      {/* Include the "RestaurantDetail" screen here */}
      <RestaurantStack.Screen
        name="RestaurantDetail"
        component={() => <Text>Restaurant Detail Screen</Text>}
      />
    </RestaurantStack.Navigator>
  );
};

RestaurantsScreen:

// restaurant.screen.js
import React, { useContext } from "react";
import { FlatList, View, Pressable } from "react-native";
import { styled } from "styled-components/native";
import { RestaurantInfoCard } from "../components/restaurant-info-card.component";
import { Spacer } from "../../../components/spacer/spacer.component";
import { SafeArea } from "../../../components/utility/safe-area.component";
import { RestaurantsContext } from "../../../services/restaurants/restaurants.context";
import { ActivityIndicator, MD2Colors } from "react-native-paper";
import { SearchArea } from "../components/search.component";

const RestaurantList = styled(FlatList).attrs({
  contentContainerStyle: {
    padding: 16,
  },
})``;

const Loading = styled(ActivityIndicator)`
  margin-left: -25px;
`;

const LoadingContainer = styled(View)`
  position: absolute;
  top: 50%;
  left: 50%;
`;

export const RestaurantsScreen = ({ navigation }) => {
  const { isLoading, error, restaurants } = useContext(RestaurantsContext);

  return (
    <SafeArea>
      {isLoading && (
        <LoadingContainer>
          <Loading size={50} animating={true} color={MD2Colors.blue300} />
        </LoadingContainer>
      )}
      <SearchArea />
      <RestaurantList
        data={restaurants}
        renderItem={({ item }) => (
          <Pressable onPress={() => navigation.navigate("RestaurantDetail")}>
            <Spacer position="bottom" size="large">
              <RestaurantInfoCard restaurant={item} />
            </Spacer>
          </Pressable>
        )}
        keyExtractor={(item) => item.name}
        contentContainerStyle={{ padding: 16 }}
      />
    </SafeArea>
  );
};

I attempted to resolve the navigation issue by implementing the following steps:

Changing the Navigation Library:

Initially, I used createNativeStackNavigator from @react-navigation/native-stack. I experimented with using createStackNavigator from @react-navigation/stack as well. Modifying Stack Configuration:

Adjusted the stack configuration, including screen names and components. Ensured that screen names match between the navigator and the navigation.navigate calls. Reinstalling Dependencies:

Removed the entire node_modules directory and the yarn.lock file. Reinstalled dependencies using both yarn and npx expo install. Error Troubleshooting:

Checked for any console errors or warnings that might provide insights into the issue. Reviewed the official documentation and community forums for React Navigation to identify any potential solutions. What were you expecting?

I expected that by adjusting the navigation configuration and trying different approaches, the navigation issue would be resolved. Specifically, navigating from the "RestaurantsScreen" to the "RestaurantDetail" screen should work as intended without triggering the "The action 'NAVIGATE' with payload..." error.

Despite these efforts, the issue persists, and I'm seeking guidance or suggestions from the community to identify potential causes or solutions. Any feedback or assistance is greatly appreciated.