Passing user input from second screen to first screen with StackNavigator. - react-native

Question

Attached is what I'm trying to accomplish.
On the first screen I need to display the text input value entered by the user on the second screen.
Passing data to a third screen works perfect, however I need the value from the second screen in the first screen.
Below is some example code: Snack link
The problem is that I need some way to hide {this.props.navigation.state.params.UserWeight} until the value is set on the second screen and sent back to the first screen, so perhaps I need an if/else statement? I've tried some things but nothing seems to work.
App.js
import React, { Component } from 'react';
import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import AddWeightScreen from './AddWeight';
class TodayScreen extends Component {
static navigationOptions =
{
title: 'Today'
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Weight')}>
// if no weight entered (default) display this text
<Text style={styles.textStyle}>
Go to Add Weight screen
</Text>
// else when user weight has been entered on the next screen display the result on this screen
// i'm commenting out the object below because it isn't defined here by default and it throws an error, it gets defined in the next screen but i need to display it here
<Text style={styles.textStyle2}>
Weight =
{this.props.navigation.state.params.UserWeight}
</Text>
</TouchableOpacity>
</View>
);
}
}
export const Project = createStackNavigator(
{
Today: TodayScreen,
Weight: AddWeightScreen,
});
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flex: 1,
backgroundColor: 'white'
},
textStyle: {
color: '#0066cc',
textAlign: 'center',
fontSize: 20,
marginTop: 40,
},
textStyle2: {
color: 'black',
textAlign: 'center',
fontSize: 20,
marginTop: 40,
},
});
export default Project;
AddWeight.js
import React, { Component } from 'react';
import { StyleSheet, TextInput, View, TouchableOpacity, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';
class AddWeightScreen extends Component {
static navigationOptions =
{
title: 'Add your Weight'
};
Send_Data_Function = () => {
this.props.navigation.navigate('Today', {
UserWeight: this.state.TextInput_Weight,
});
}
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.textInputStyle}
placeholder="Enter your Weight"
onChangeText={data => this.setState({ TextInput_Weight: data })}
autoFocus = {true}
keyboardType={'numeric'}
/>
<TouchableOpacity onPress={this.Send_Data_Function} style={styles.button} >
<Text style={styles.buttonText}> Save </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
alignItems: 'center',
flex: 1,
backgroundColor: 'white'
},
textInputStyle: {
height: 30,
width: '90%',
borderWidth: 1,
borderColor: 'gray',
margin: 15,
padding: 2
},
button: {
width: '90%',
height: 40,
padding: 10,
backgroundColor: '#0066cc',
},
buttonText: {
color: '#fff',
textAlign: 'center',
fontWeight: '600'
},
});
export default AddWeightScreen;

Answer 1

You can just conditionally show the text by doing something like below. Probably best to check if params exists first otherwise it will be undefined
{this.props.navigation.state.params && this.props.navigation.state.params.UserWeight && (<Text style={styles.textStyle2}>
Weight = {this.props.navigation.state.params.UserWeight}
</Text>)}