I’m very new to react native and am trying to pass two inputs between two pages by pressing a button but i’m not sure where i’m going wrong. My intention is to have one variable be "Book name" and the second be "number of pages". Any help would be very appreciated.
Page 1
const FirstPage = ({navigation}) => {
const [userName, setUserName] = useState('');
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.container}>
<Text style={styles.heading}>
React Native Pass Value From One Screen to Another
Using React Navigation
</Text>
<Text style={styles.textStyle}>
Please insert your name to pass it to second screen
</Text>
{/*Input to get the value from the user*/}
<TextInput
value={String}
onChangeText={(bookname) => setUserName(bookname)}
placeholder={'Enter Any value'}
style={styles.inputStyle}
/>
<TextInput
value={String}
onChangeText={(pagenum) => setUserName(pagenum)}
placeholder={'Enter Any value'}
style={styles.inputStyle}
/>
<Button
title="Go Next"
//Button Title
onPress={() =>
navigation.navigate('SecondPage', {
paramKey: pageNum,
paramKey: bookName,
})
}
/>
Page 2
const SecondPage = ({route}) => {
return (
<SafeAreaView style={{flex: 1}}>
<View style={styles.container}>
<Text style={styles.heading}>
React Native Pass Value From One Screen to Another
Using React Navigation
</Text>
<Text style={styles.textStyle}>
Values passed from First page: {route.params.paramKey}
</Text>
</View>
</SafeAreaView>
);
};
2
Answers
You could use a shorthand:
Access params:
Here you can find a full example