I am fairy new to react native. I am using react-navigation/native": "^7.0.15" and react-navigation/drawer": "^7.1.2" to navigate from one screen on a drawer to another screen on the same drawer. However, i am getting the error "The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator. Do you have a route named 'Home'?" Please have a look at my entire code below and tell me what i may be getting wrong.

import React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import AntDesign from '@expo/vector-icons/AntDesign';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.openDrawer()}
        title="Open drawer"
      />
      <Button
        onPress={() => navigation.closeDrawer()}
        title="Close drawer"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  const navigation = useNavigation();
  return (
    //<NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" backBehavior="history">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen}


        options={{
        title: "Settings",
        headerLeft: () => <AntDesign name="arrowleft" size={30} color="black"              onPress={() => {   navigation.navigate('Home')    ;}}          />,  
        }}
        />

      </Drawer.Navigator>
    //</NavigationContainer>
  );
}

I am fairy new to react native. I am using react-navigation/native": "^7.0.15" and react-navigation/drawer": "^7.1.2" to navigate from one screen on a drawer to another screen on the same drawer. However, i am getting the error "The action 'NAVIGATE' with payload {"name":"Home"} was not handled by any navigator. Do you have a route named 'Home'?" Please have a look at my entire code below and tell me what i may be getting wrong.

import React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import AntDesign from '@expo/vector-icons/AntDesign';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.openDrawer()}
        title="Open drawer"
      />
      <Button
        onPress={() => navigation.closeDrawer()}
        title="Close drawer"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  const navigation = useNavigation();
  return (
    //<NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" backBehavior="history">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen}


        options={{
        title: "Settings",
        headerLeft: () => <AntDesign name="arrowleft" size={30} color="black"              onPress={() => {   navigation.navigate('Home')    ;}}          />,  
        }}
        />

      </Drawer.Navigator>
    //</NavigationContainer>
  );
}

• reactjs
• navigation
• native
• drawer

• We'd need the code that cause this issue, but no navigation.navigate() appears on the code you provided – Eternal Dreamer Commented Mar 10 at 8:06
• Please provide enough code so others can better understand or reproduce the problem. – Eternal Dreamer Commented Mar 10 at 8:06

1 Answer 1

**Can you try this**

    import React from 'react';
    import { Button, View } from 'react-native';
    import { createDrawerNavigator } from '@react-navigation/drawer';
    import { NavigationContainer } from '@react-navigation/native';
    import AntDesign from '@expo/vector-icons/AntDesign';
    
    function HomeScreen({ navigation }) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Button
            onPress={() => navigation.openDrawer()}
            title="Open drawer"
          />
          <Button
            onPress={() => navigation.closeDrawer()}
            title="Close drawer"
          />
        </View>
      );
    }
    
    function NotificationsScreen({ navigation }) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Button onPress={() => navigation.goBack()} title="Go back home" />
        </View>
      );
    }
    
    const Drawer = createDrawerNavigator();
    
    export default function App() {
      return (
        <NavigationContainer>
          <Drawer.Navigator initialRouteName="Home" backBehavior="history">
            <Drawer.Screen name="Home" component={HomeScreen} />
            <Drawer.Screen
              name="Notifications"
              component={NotificationsScreen}
              options={({ navigation }) => ({ 
                title: "Settings",
                headerLeft: () => (
                  <AntDesign
                    name="arrowleft"
                    size={30}
                    color="black"
                    onPress={() => navigation.navigate('Home')}
                  />
                ),
              })}
            />
          </Drawer.Navigator>
        </NavigationContainer>
      );
    }