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

user_14070713 0
Viewed 1620

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.

react-native-navigation react-native reactjs javascript
2 Answers

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.

user_30727520

You have written extra unuseful code. You can directly pass Login and Notify screen on navigation screen component. You don't need to create extra function. So, first pass your screens in navigation component as below:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import { Login } from './screens/Login';
import { Notify } from './screens/Notify';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode="none">
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Notify" component={Notify} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

As you can see, you can directly pass the screen on the navigation screen's component, which allows you to access navigation and route properties in your screen.

Now, your code will run without passing extra navigation property.

user_81822480
Related