Accessing navigation parameters Expo-Go - reactjs

Question

I have got "Screen1" where I create a string "blabla". According to the documentation, I can set it as a navigation parameter:
export default function Screen1() {
const navigation = useNavigation();
navigation.navigate("Screen2", { item: "blalbla" });
return (
<View>
<Text>Render some stuff</Text>
</View>
);
}
On Screen2 I should be able to access it with:
export default function Screen2({ route, navigation }) {
const { item } = route.params;
console.log(item);
return (
<View>
<Text>Render some stuff</Text>
</View>
);
}
Now, this returns:
TypeError: undefined is not an object (evaluating 'route.params.item')]
I also tried some other examples without success.
Referring to React-Native documentation: https://reactnavigation.org/docs/params/

Answer 1

I've created a Snack. Check this out.
Follow below steps to solve your problem
Create a Folder called navigation where your App.js is located.
Then inside this folder create a file called AppNavigator.js
Inside AppNavigator.js paste this
import React from 'react';
import { View } from 'react-native';
import { createStackNavigator } from '#react-navigation/stack';
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';
const Stack = createStackNavigator();
function AppNavigator() {
return (
<Stack.Navigator>
<Stack.Screen name="Screen1" component={Screen1} />
<Stack.Screen name="Screen2" component={Screen2} />
</Stack.Navigator>
);
}
export default AppNavigator;
Now create another folder called screens where your App.js is located
Inside this folder create your two files Screen1.js and Screen2.js
They should look like this
Screen1.js -
import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
function Screen1({ navigation }) {
return (
<View style={styles.container}>
<Text>Screen 1</Text>
<Text onPress={() => navigation.navigate('Screen2', { item: 'blalbla' })}>
Press ME
</Text>
</View>
);
}
export default Screen1;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Screen2.js -
import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
function Screen2({ route, navigation }) {
const { item } = route.params;
return (
<View style={styles.container}>
<Text>Screen 2</Text>
<Text onPress={() => navigation.navigate('Screen1')}>{item}</Text>
<Text onPress={() => navigation.navigate('Screen1')}>Press ME</Text>
</View>
);
}
export default Screen2;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Now you should see route parameters inside Screen2

Answer 2

navigation object is probably not present in the screen
change Screen1({ navigation }) to Screen1(props) and do console.log(props) to check if you see a navigation object there