so here I have a home screen and trying to title, rating and body to the reviews screen

it used to work when I used const { item } = route.params; but now I get the TypeError: undefined is not an object (evaluating 'route.params.item') error and couldn't find any solution or understand why.

const HomeScreen = ({ navigation }) => {

  const [reviews, setReviews] = useState([
    { title: 'Zelda, Breath of Fresh Air', rating: 5, body: 'lorem ipsum', key: '1' },
    { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '2' },
    { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '3' },
  ]);

  return (
    <View style={styles.home}>
      <StatusBar style="auto" />
      <FlatList
        data={reviews}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => navigation.navigate('Reviews', { item })}>
            <Text style={styles.homeText}>{item.title}</Text>
          </TouchableOpacity> 
        )}
      />
    </View>
  )
};

const ReviewsScreen = ({ navigation, route}) => {

  const { item } = route.params;

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Text style={styles.homeText}>{item.title}</Text>
      <Text style={styles.homeText}>{item.body}</Text>
      <Text style={styles.homeText}>{item.rating}</Text>
      <View style={styles.button}>
        <Button title='home' color={'coral'} onPress={() => navigation.goBack()}/>
      </View>
    </View>
  );
};

< HomeScreen navigation={navigation} route={route}/> brings the home screen to reviews but I only want the title, body and rating. I don't think this is the correct way to handle this problem.

CodePudding user response：

The error speaks for it self.

In order to debug it, you first need to log route in ReviewsScreen. Try this:

console.log(route)

And see, if there is item available in its properties?

This is how you should be debugging your problems.

My best shot without seeing the logs at all is that you are incorrectly sending params to the child screen.

Maybe you should try this?

navigation.navigate('Reviews', item)

CodePudding user response：

Your are getting

TypeError: undefined is not an object (evaluating'route.params.item')

error because you are not assigning any value to item and the next screen is getting undefined value so you have to assign value just like this

navigation.navigate('Reviews',{item:item})

For more details you can check official React Navigation docs