I encountered an issue with navigation in my React application. The error message "undefined is not an object (evaluating 'navigation.navigate')" appears when attempting to navigate to another screen using a button from a different route.
Here is the component code:
export default function Structures({ title, display, navigation }) {
const [structures, setStructures] = useState([]);
useEffect(() => {
async function loadStructures() {
const response = await api.get('/product/api/structures');
setStructures(response.data);
}
loadStructures();
}, []);
return (
...
<ProductList>
{structures.map(structure => (
<Item key={structure.id} onPress={()=> navigation.navigate('Orders')}>
...
And here is the routes code:
const Tab = createMaterialBottomTabNavigator();
function MyTabs(){
return(
<Tab.Navigator
barStyle={{ backgroundColor: '#694fad' }}
initialRouteName='Feed'
activeColor='black'
>
<Tab.Screen
name="Home"
component={Dashboard}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" size={26} />
),
}}
/>
<Tab.Screen
name="Orders"
component={Requests}
options={{
tabBarLabel: 'Orders',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="assignment" size={26} />
),
}}
/>
</Tab.Navigator>)}
export default function Routes() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
I attempted using Stack navigation as well, but the same error persisted.