Pass a variable between the screens React-Native when using RadioButton - parameter-passing

Question

I have created a sort of form and I want to pass a variable to the next screen when press submit.
var states = [
{label: "happy", value: 1},
{label: "sad", value: 2},
{label: "angry", value: 3},
{label: "relaxed", value: 4}
];
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Paragraph style={styles.textStyle}>How are you feeling today ?</Paragraph>
<RadioForm
radio_props={states}
initial={2}
onPress={(value) => {ToastAndroid.show(value.toString(), ToastAndroid.SHORT)}}
buttonSize={30}
buttonOuterSize={40}
selectedButtonColor={'blue'}
selectedLabelColor={'blue'}
labelStyle={{ fontSize: 15, }}
disabled={false}
formHorizontal={false}
/>
<Button title="Submit" onPress={() => this.props.navigation.navigate('ButtonsScreen')}/>
</View>
);
}
}
So, I want to pass variable "value" ( which the user selects ) to the 'ButtonsScreen'.
Anyone has any idea ?

Answer 1

Try this way
export default class App extends Component<Props> {
state = { val: "" }; // set state here
render() {
return (
<View style={styles.container}>
....
<RadioForm
....
onPress={(value) => {
this.setState({ val: value });
}}
....
/>
<Button
title="Submit"
onPress={() =>
this.props.navigation.navigate("ButtonsScreen", {
value: this.state.val,
})
}
/>
</View>
);
}
}