Error:route.params is undefined Trying to pass paramater from a FlatList

user_10533650 0
Viewed 103

I'm kinda new to React Native Navigation and I'm trying to pass parameters from my array to another screen but I'm getting an error 'route.params is undefined'.

Class where I pass paramaters :

<View style={styles.container}>
          <FlatList
          data={FoodObj}
          keyExtractor={(FoodObj)=>{FoodObj.key}}
          renderItem={({item})=>(
              <TouchableOpacity onPress={()=>{ navigation.navigate( 'Root' ,{screens:'Food', params:{name:item.name}} ) }}>
          <FoodList item={item} />
          </TouchableOpacity>
          )}/>
       </View>

Class where I receive parameters:

const FoodDetails = ({route, navigation})=>{
    
      const { name } = route.params;

return (
    <View>
        <Text > Hey{name}</Text>
    </View>
);
}

Here is the values of array I'm trying to pass

 const [FoodObj, setFood] = useState([
        { name:'Zeppelins' , image_url:'https://xxxl.lt/wp-content/uploads/2018/06/cepelinai-600x450.jpg',time:'3 hours', key: '1' },
       {name:'Kibins', image_url:'https://kibinaivilniuje.lt/wp-content/uploads/2015/05/kibinai.trakuose.skaniausi.jpg', time:'2 hours', key:'2'},
       {name:'Potato Pancakes', image_url:'https://assets.epicurious.com/photos/5761d0d88accf290434553ab/2:1/w_1260%2Ch_630/classic-potato-pancakes.jpg', time: '30 min',key:'3'},
      ]);
react-native javascript
1 Answers

From the code you are navigating to a screen with nested navigation, you have use 'screens' instead of 'screen' so this would be considered as a normal navigation change the code like the below code,

 navigation.navigate( 'Root' ,{screen:'Food', params:{name:item.name}} )
user_14357220
Related