TypeError: route is undefined and undefined is not an object (evaluating ‘route.params’)

I’m getting TypeError: undefined is not an object (evaluating ‘route.params’) when passing props from my login component to notify component

Here’s Login.js

export const Login = ({navigation}) => {
  const [username, onChangeUsername] = React.useState("");
  const [password, onChangePassword] = React.useState("");

  return (
    <View style={styles.container}>
      <View style={styles.card}>
      <Text style={{marginBottom:20}}>Login using your credentials</Text>
        <TextInput
          style={[styles.input,styles.shadowProp]}
          onChangeText={onChangeUsername}
          placeholder='Email'
        />
        <TextInput
          style={[styles.input,styles.shadowProp]}
          onChangeText={onChangePassword}
          placeholder='Password'
        />
        <Button
        title="Log In"
        style={styles.button}
        color= '#5e72e4'
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Notify', {
            itemId: 85,
            otherParam: 'anything you want here',
          }); }}
      />
      </View>
    </View>
  );
}

This is Notify.js

export const Notify = ({ route, navigation }) => {
    const { itemId } = route.params;
    const { otherParam } = route.params;
    console.log(route); // Gives me undefined
    console.log(route.params) // gives me undefined is not an object

Can anyone help?

This is the attached snack.io link for the same.

Answer

app.js should be

const NotifyScreen = ({navigation, route}) => {
  //console.log(decoded);
  return (
    <Notify navigation={navigation} route={route} />
  )
}

because navigation and route are passed into it, and then you can pass both into the notify component. how you had it currently, route was lost because it was not on the navigation property.

and Notify looks like this

export const Notify = ({ navigation, route }) => {

Test what properties are coming into your components before destructuring the properties out just to make sure you are receiving what you think you are. For this i would recommend console.logging the props coming from the router itself, or of course looking at documentation.