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.
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.
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.