Question 278523 in React native Question posted in
The official React Native documentation can be found here.

Cannot read property 'navigation' of undefined even though it is – react native

for some reason I get this error ”Cannot read property ‘navigation’ of undefined”. I have no idea where the problem could be I double-checked everything. Here is my App.js file

import { StyleSheet, Text, View } from 'react-native';
import CategoriesScreen from './screens/CategoriesScreen';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MealsOverviewScreen from './screens/MealsOverviewScreen';
const Stack =  createNativeStackNavigator()

export default function App() {
  return (
    <>
    <StatusBar style='light'/>
    <NavigationContainer>
     <Stack.Navigator>
     
      <Stack.Screen  name="MealsCategories" component={CategoriesScreen}/>
      <Stack.Screen name="MealsOverview" component={MealsOverviewScreen}/>
     </Stack.Navigator>
    </NavigationContainer>
   <CategoriesScreen/>
    </>
  )}

And here is the file where the naviation should happen:

import { FlatList } from "react-native";
import { CATEGORIES } from "../data/dummy-data";
import GategoryGridTile from "../components/CategoryGridTale";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


function CategoriesScreen({ navigation }){

    function renderCategoryItem(itemData){
    function pressHandler() {
      navigation.navigate('MealsOverview')
    }
 return (
   <GategoryGridTile 
   title={itemData.item.title}
    color={itemData.item.color} 
    onPress={pressHandler}/>
 )
}
    return (
        <FlatList
        data={CATEGORIES}
        keyExtractor={(item) => item.id}
        renderItem={renderCategoryItem}
        numColumns={2}
        />
    )
}
export default CategoriesScreen
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i found the error. It was because of CategoriesScreen under the NavigationContainer


  2. 0

    What you are doing should work, but if all else fails, try using the useNavigation hook.

    import { useNavigation } from "@react-navigation/core";
import { FlatList } from "react-native";
import { CATEGORIES } from "../data/dummy-data";
import GategoryGridTile from "../components/CategoryGridTale";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

function CategoriesScreen() {
  const navigation = useNavigation();
  function renderCategoryItem(itemData) {
    function pressHandler() {
      navigation.navigate("MealsOverview");
    }
    return (
      <GategoryGridTile
        title={itemData.item.title}
        color={itemData.item.color}
        onPress={pressHandler}
      />
    );
  }
  return (
    <FlatList
      data={CATEGORIES}
      keyExtractor={(item) => item.id}
      renderItem={renderCategoryItem}
      numColumns={2}
    />
  );
}
export default CategoriesScreen;

    EDIT: ah, seems like you had a typo in the JSX code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search