Error: The action 'NAVIGATE' with payload was not handled by any navigator in react-native

Question

I have multiple navigation in my app.js file such as Drawer, Tab and stack navigation. I have also a button in my HomeScreen.js. Clicking on that button should redirect to FeedScreen but it's not working. It says

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

How can I resolve this? react-native navigation

APP.JS

import 'react-native-gesture-handler';
import Animated, {useSharedValue, withTiming, useAnimatedStyle, Easing,} from 'react-native-reanimated';
import * as React from 'react';
import { Button, Text, View, useColorScheme, Image  } from 'react-native';
import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem, } from '@react-navigation/drawer';

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './src/screens/HomeScreen';
import FeedScreen from './src/screens/FeedScreen';
import Cards from './src/screens/CardScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import Message from './src/screens/MessagesScreen';

function LogoTitle() {
return (
 <Image
  style={{ width: 50, height: 50 }}
  source={{
          uri:
            'https://awildgeographer.files.wordpress.com/2015/02/john_muir_glacier.jpg',
        }}
   />
    );
  }

 const Stack   = createNativeStackNavigator();
 const Tab     = createBottomTabNavigator();
 const Drawer  = createDrawerNavigator();


 function Tabs() {
   return (
   <Tab.Navigator>
    <Tab.Screen  name="Home" component={HomeScreen} options={{ headerShown: false }}  />
    <Tab.Screen  name="Profile"  component={ProfileScreen} options={{ headerShown: false }}   />
    <Tab.Screen  name="Message"  component={Message} options={{ headerShown: false }} />
  </Tab.Navigator>
  );
}

 function StackNavigator() {
  return (
   <Stack.Navigator>
    <Stack.Screen name="HomeScreen" component={HomeScreen} options={{ headerShown: false }} />
    <Stack.Screen name="Message" component={Message} />
   </Stack.Navigator>
   );
 }

 export default function App() {
  const scheme = useColorScheme();
  return (
   <NavigationContainer theme={scheme === 'dark' ? DarkTheme : DefaultTheme}>
   <Drawer.Navigator initialRouteName="Home" screenOptions={{
   drawerPosition: 'left',
  }}>
  <Drawer.Screen  name="Home" component={Tabs} options={{
      headerTitle: (props) => <LogoTitle {...props} />,
      headerRight: () => (
        <Button
          onPress={() => alert('This is a button!')}
          title="Info"
          color="red"
        />
      ),
    }}  /> 
   <Drawer.Screen name="Message" component={Message} />       
    </Drawer.Navigator>
   </NavigationContainer>
   );
  }

HomeScreen.JS

  import * as React from 'react';
  import { View, ScrollView, StyleSheet, Image } from 'react-native';
  import { Text, Card, Button, Icon } from '@rneui/themed';
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';


 function HomeScreen({ navigation }) {
 return (
  <View >
  <Card>
      <Card.Title>HELLO WORLD</Card.Title>
      <Card.Divider />
      <Card.Image
        style={{ padding: 0 }}
        source={{
          uri:
            'https://awildgeographer.files.wordpress.com/2015/02/john_muir_glacier.jpg',
        }}
      />
      <Text style={{ marginBottom: 10 }}>
        The idea with React Native Elements is more about component
        structure than actual design.
      </Text>
      <Button
        title="Go to Feed Screen"
        onPress={() => navigation.navigate('FeedScreen')}
      />
    </Card>
  
     </View>
    );
   }

  export default HomeScreen

Answer 1

FeedScreen doesn't seem to be used in App.js. Maybe you forgot to declare it as a Screen of a navigator. You need to define it like:

<Stack.Screen name="FeedScreen" component={FeedScreen} />