Navigation Issue in React Native: "NAVIGATE action not handled by any navigator

Question

I'm experiencing an issue with navigation in my React Native app using React Navigation. When trying to navigate to a screen within a nested navigator, I'm getting the following error:

ERROR The action 'NAVIGATE' with payload {"name":"ExploreStack","params":{"screen":"Roaster"}} was not handled by any navigator. Do you have a screen named 'ExploreStack'?

I'm using the following libraries:

• @react-navigation/native: "^6.0.0"

• @react-navigation/bottom-tabs: "^6.0.0"

• @react-navigation/stack: "^6.0.0"

• react-native-vector-icons: "^8.0.0"

Here is my current setup:

ExploreScreen.js:

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

const ExploreScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('ScreenTimeTracking')}>
        <Ionicons name="time" size={24} color="#000" />
        <Text style={styles.text}>Screen Time Tracking</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('ApplicationProcess')}>
        <Ionicons name="apps" size={24} color="#000" />
        <Text style={styles.text}>Application Process</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('Bookings')}>
        <Ionicons name="book" size={24} color="#000" />
        <Text style={styles.text}>Bookings</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('Roaster')}>
        <Ionicons name="calendar" size={24} color="#000" />
        <Text style={styles.text}>Roaster</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('DigitalPersonalFileLite')}>
        <Ionicons name="folder-open" size={24} color="#000" />
        <Text style={styles.text}>Digital Personal File Lite</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('ELearning')}>
        <Ionicons name="school" size={24} color="#000" />
        <Text style={styles.text}>E-learning</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.item} onPress={() => navigation.navigate('Imprint')}>
        <Ionicons name="information-circle-outline" size={24} color="#000" />
        <Text style={styles.text}>Imprint</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  item: {
    width: '90%',
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    marginVertical: 8,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
  },
  text: {
    marginLeft: 16,
    fontSize: 16,
    flex: 1,
  },
});

export default ExploreScreen;

AppNavigator.js:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import Ionicons from 'react-native-vector-icons/Ionicons';

// Import screens
import DashboardScreen from '../screens/DashboardScreen';
import ExploreScreen from '../screens/ExploreScreen';
import ScreenTimeTrackingScreen from '../screens/ScreenTimeTrackingScreen';
import ApplicationProcessScreen from '../screens/ApplicationProcessScreen';
import BookingsScreen from '../screens/BookingsScreen';
import RoasterScreen from '../screens/RoasterScreen';
import DigitalPersonalFileLiteScreen from '../screens/DigitalPersonalFileLiteScreen';
import ELearningScreen from '../screens/ELearningScreen';
import ImprintScreen from '../screens/ImprintScreen';
import SettingsScreen from '../screens/SettingsScreen';

const Tab = createBottomTabNavigator();
const ExploreStack = createStackNavigator();

const ExploreStackScreen = () => (
  <ExploreStack.Navigator>
    <ExploreStack.Screen name="Explore" component={ExploreScreen} />
    <ExploreStack.Screen name="ScreenTimeTracking" component={ScreenTimeTrackingScreen} />
    <ExploreStack.Screen name="ApplicationProcess" component={ApplicationProcessScreen} />
    <ExploreStack.Screen name="Bookings" component={BookingsScreen} />
    <ExploreStack.Screen name="Roaster" component={RoasterScreen} />
    <ExploreStack.Screen name="DigitalPersonalFileLite" component={DigitalPersonalFileLiteScreen} />
    <ExploreStack.Screen name="ELearning" component={ELearningScreen} />
    <ExploreStack.Screen name="Imprint" component={ImprintScreen} />
  </ExploreStack.Navigator>
);

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ color, size }) => {
            let iconName;

            if (route.name === 'Dashboard') {
              iconName = 'ios-home';
            } else if (route.name === 'Explore') {
              iconName = 'ios-search';
            } else if (route.name === 'Settings') {
              iconName = 'ios-settings';
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
      >
        <Tab.Screen name="Dashboard" component={DashboardScreen} />
        <Tab.Screen name="Explore" component={ExploreStackScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;

When I press any button in ExploreScreen, I expect to navigate to the corresponding screen (e.g., ScreenTimeTracking, ApplicationProcess, etc.). However in get

ERROR The action 'NAVIGATE' with payload {"name":"ExploreStack","params":{"screen":"Roaster"}} was not handled by any navigator. Do you have a screen named 'ExploreStack'?

But the screen does not change. I believe the navigation is not correctly handled by the navigator. Any help to resolve this issue would be greatly appreciated.

Answer 1

I was able to resolve the error. Instead of nesting in my DashboardScreen.js which contains the EXploreScreen.js, i was rather doing that in AppNavigator.js.

Answer 2

When you are in one the tab navigator screen, navigation prop will only have access to the screens that are in tab navigator which are "Dashboard", "Explore" and "Settings". When i used drawer navigation in one of my projects, I faced the same issue and then i found the actions in react navigation. In your case you can use something like this

import { StackActions } from '@react-navigation/native';

navigation.dispatch(StackActions.replace('ScreenTimeTracking'));

For reference you can look in https://reactnavigation.org/docs/stack-actions

2. Second option: I have looked more into it You should use Stack navigator as your main navigator and nest tab navigator onto it as in their official documentation.

function Home() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

In the above example, the Home component contains a tab navigator. The Home component is also used for the Home screen in your stack navigator inside the App component. So here, a tab navigator is nested inside a stack navigator Then if you want to manually change tab you can use

import { TabActions } from '@react-navigation/native';

const jumpToAction = TabActions.jumpTo('Profile', { user: 'Satya' });

navigation.dispatch(jumpToAction);

You just have to make sure that if you are navigating to a screen the current screen is of the same navigator otherwise it will give error. for reference https://reactnavigation.org/docs/nesting-navigators