Moving values from one screen to another ERROR: undefined is not an object (evaluating 'route.params.message')
15,679
Solution 1
If you want to receive a param for one screen to another you need to use the getparam
function, for example: const message = navigation.getParam('message');
Solution 2
Finally found the way for moving values between Routes
navigation.navigate('RouteB', {
screen: 'ScreenC',
params: { param1: "foo", param2: "bar" }
})
Then you can take this values in ScreenC
with
const ScreenC = ({ navigation, route }) => {
const { param1, param2 } = route.params
....
}
Author by
Stu
Updated on June 04, 2022Comments
-
Stu almost 2 years
I am trying to navigate from one screen to another in react native by carrying a value from one screen to the other however, i am getting the above error. Ideally i would like send the value from within a flatlist, i am trying to achieve a clickable flatlist which carrys a parameter from the selected row to the other screen.
//index.js
import React from 'react'; import { StyleSheet, Button, Text, View, FlatList, TouchableHighlight } from 'react-native'; const ComponentsScreen = ({ navigation }) => { //example for detail scree return ( <View> <FlatList data={[ { key: 'Task 1' }, { key: 'Task 2' }, { key: 'Task 3' }, { key: 'Task 4' }, { key: 'Task 5' }, ]} renderItem={({ item }) => { return ( <TouchableHighlight onPress={() => navigation.navigate('Next', { message: 'hello from screen 1' })} > <Text >{item.key}</Text> </TouchableHighlight> ); } } /> <Button onPress={() => navigation.navigate('NextScreen')} title="Go to ImageScreen" /> </View> ); }; const styles = StyleSheet.create({ textStyle: { fontSize: 30 } }); export default ComponentsScreen;
//NextScreen.js
import React from 'react'; import { Text, View } from 'react-native'; //example for detail screen const NextScreen = (route) => { const { message } = route.params; return ( <View> <Text>message: {JSON.stringify(message)}</Text> </View> ); }; export default NextScreen;
app.js
import React, { Component } from 'react'; import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; import Index from './screens/Index'; import NextScreen from './screens/NextScreen'; const navigator = createStackNavigator({ Home: Index, Next: NextScreen }, { initialRouteName: 'Home', defaultNavigationOptions: { title: 'App' } } ); export default createAppContainer(navigator);
-
Stu about 4 yearsHi hlebon, thanks for the response, i have tried
const message = navigation.getParam('message', 'default');
andconst message = this.props.navigation.getParam('message', 'default');
and still getting no joy -
hlebon about 4 yearsHi, what version of react-navigation are you using? I see in your NextScreen you are using
const NextScreen = (route) => {... }
. Be sure to destructure the props parameterconst NextScreen = ({ navigation }) => {... }
-
Stu about 4 yearsHi hlebon, yes that was the issue, i changed that it is now working.
-
msalihbindak over 3 yearsstill getting error, navigation.getParam() is undefined. I am usign. RN 5
-
Ali Yar Khan over 2 yearsthis doesn't work now ...