TypeError: undefined is not an object (evaluating 'navigation.navigate'), cannot navigate from component placed on screen to another screen

Question

im trying to navigate to another screen from component placed on HomePage, but the code below doesnt work. I think i tried all of the solutions that i found in the internet, but none of them seems to be working. (The button on HomePage is working)

HomePage:

import * as React from 'react';
import { StyleSheet,View ,Button} from 'react-native';
import RecipeButton from '../components/recipeButton';
import recipes from '../../assets/data/recipes';
import { StatusBar } from 'expo-status-bar';

export default function HomePage({navigation}: {navigation: any}) {
  return(
    <View style={styles.container}>
    <StatusBar style="light" backgroundColor="black" translucent={false} />
    <FlatList 
      style={{width:'100%'}}
      data={recipes}
      renderItem={({ item }) => <RecipeButton item={item} />}
    />
    <Button title='navigate to recipe' onPress={() => {
      navigation.navigate("Recipe")
    }} />
  </View>
  )
}

component script:

import React from 'react';
import { Image, View, Text, Pressable} from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import styles from './styles';

interface recipeButtonProps {
    item: {
        image: string,
    }
}


const RecipeButton = ({ item }: recipeButtonProps, {navigation}: {navigation: any}) => {

    const onPress = () => {
        navigation.navigate("Recipe")
    }

    return (
        <View style={styles.root}>
            <Image style={styles.image} source={{ uri: item.image }} />

            <Pressable
             style={({pressed}) => [
                {backgroundColor: pressed ? '#D3D3D3' : 'white'},
                styles.nonImageContainer
            ]} 
            onPress={() => {
                onPress();
            }}>
            </Pressable>
        </View>
    );
};

export default RecipeButton;

Try passing down the navigation property like <FlatList style={{width:'100%'}} data={recipes} renderItem={({ item }) => <RecipeButton item={item} navigation={navigation} />} /> — Sanish Joseph
– Sanish Joseph, Commented Sep 14, 2021 at 20:33
it doesnt work Type '{ item: { id: string; user: { id: string; name: string; image: string; }; name: string; image: string; recipe: string; required: string; rating: number; ratingsCount: number; neededTime: string; difficulty: string; }; navigation: any; }' is not assignable to type 'IntrinsicAttributes & recipeButtonProps'. Property 'navigation' does not exist on type 'IntrinsicAttributes & recipeButtonProps'. — mlodykk
– mlodykk, Commented Sep 15, 2021 at 12:23

dtamaas · Accepted Answer · 2021-09-16 07:32:55Z

1

I think RecipeButton is not in the context of the navigator, so it doesn't get the navigation prop.

Try to use the useNavigation() hook like this:

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


const RecipeButton = ({ item }: recipeButtonProps) => {
    const navigation = useNavigation();
    
    const onPress = () => {
        navigation.navigate("Recipe")
    }

    ...
};

export default RecipeButton;

answered Sep 16, 2021 at 7:32

dtamaas

463 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: undefined is not an object (evaluating 'navigation.navigate'), cannot navigate from component placed on screen to another screen

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related