hi i’m using react-native and react-navigation

when i try to navigation.navigate this error occure

Cannot read property ‘navigate’ of undefined

this is my code

when i try to navigation.navigate this error occure

Cannot read property ‘navigate’ of undefined

this is my code

card.js

const Card = ({
  navigation,
  item,
  ingredients1,
  ingredients2,
  ingredients3,
}) => {
  console.log("ingredients1:", ingredients1);
  console.log("ingredients2:", ingredients2);
  console.log("ingredients3:", ingredients3);

  const ingredients = ingredients1 + "," + ingredients2 + "," + ingredients3;
  const ingre1 = ingredients.split(",");
  const ingre = ingre1.filter(function (tem) {
    return tem !== null && tem !== undefined && tem !== "";
  });
  const continents = item.content1 + "," + item.content2 + "," + item.content3;
  let score = 0;
  for (let i = 0; i < ingre.length; i++) {
    if (continents.indexOf(ingre[i]) != -1) {
      score += 33;
    }
  }
  const _score = String(score);
  const score1 = _score.split(",");

  console.log("score1:", score1);

  const RecipeButton = useCallback(() => {
    navigation.navigate("Explain");
  }, []);

  return (
    <>
      <ImageStyle
        source={{ uri: `http://10.0.2.2:3065/${item.Images[0].src}` }}
      />
      <Explain>
        <Username>{item.User.nickname}</Username>
        <FoodName>{item.name}</FoodName>

        <Ingrepercent>재료 {score1}%일치</Ingrepercent>

        <Recipe onPress={RecipeButton}>
          <Label>Recipe</Label>
        </Recipe>
      </Explain>
    </>
  );
};

export default Card;

navigator.js

const MainNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Main"
        component={Main}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="Food"
        component={Food}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="Explain"
        component={Explain}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="Card"
        component={Card}
        options={{
          headerShown: false,
        }}
      />
    </Stack.Navigator>
  );
};

i don’t know how can i resolve….

please help me

this is error view

Answer

This Worked for me!

import { useNavigation } from '@react-navigation/native';
function funcName() {
  const navigation = useNavigation();

  return (
   {/* Your code /*}
  );
}