Passing props between views in React Native - react-native

Question

I am trying to simply pass props between views in my React-Native app. Namely, I am trying to collect data from a text input, and pass it to the next view in a string. This is what I have:
first view:
constructor(props) {
super(props);
this.state = {name: "", email: "" };
}
_pressRow(){
let name=this.state.name;
let email=this.state.email;
this.props.navigator.push({
ident: "ImportContactScreen",
sceneConfig: Navigator.SceneConfigs.FloatFromRight,
passProps: { name: name}
});
}
<TextInput
style={styles.input}
ref= "name"
onChangeText={(name) => this.setState({name})}
value={this.state.name}
/>
<F8Button
style={styles.button}
onPress={() => this._pressRow()}
caption="Continue"
/>
second view:
props = {name}
<Text style={styles.h1}>Hi, {this.props.name}. Let`'`s import your contacts:</Text>
The navigator I'm using looks like:
class MyAppNavigator extends React.Component{
constructor(props) {
super(props);
}
render() {
return (
<Navigator
ref="appNavigator"
initialRoute={this.props.initialRoute}
renderScene={this._renderScene}
configureScene={(route) => ({
...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight
})}
/>
);
}
_renderScene(route, navigator) {
var globalNavigatorProps = { navigator }
switch (route.ident) {
case "LoginScreen":
return <LoginScreen {...globalNavigatorProps} />
case "UserFlowScreen":
return <UserFlowScreen {...globalNavigatorProps} />
case "ImportContactScreen":
return <ImportContactScreen {...globalNavigatorProps} />
default:
return <LoginScreen {...globalNavigatorProps} />
}
}
};
module.exports = MyAppNavigator;
When I run this, this.props.name comes up blank

Answer 1

passProps is a property of route. Try adding {...route.passProps} to each return in your switch statement:
return <LoginScreen {...globalNavigatorProps} {...route.passProps} />