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.
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.