How to pass data from one screen to other screen in React Native - react-native

Question

1. index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TextInput,
View
} from 'react-native';
import Button from 'react-native-button';
class AwesomeProject extends Component {
constructor(props){
super(props)
this.state = {
username: '',
email: '',
address: '',
mobileNumber: ''
}
render() {
return (
<View style={styles.container}>
<TextInput
ref={component => this.txt_input_name = component}
style={styles.textInputStyle}
placeholder="Enter Name"
returnKeyLabel = {"next"}
onChangeText={(text) => this.setState({username:text})}
/>
<Button style={styles.buttonStyle}>
Submit
</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
buttonStyle: {
alignSelf: 'center',
textAlign: 'center',
color: '#FFFFFF',
fontSize:18,
marginTop:20,
marginBottom:20,
padding:5,
borderRadius:5,
borderWidth:2,
width:100,
alignItems: 'center',
backgroundColor:'#4285F4',
borderColor:'#000000'
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Answer 1

You need to pass the props to another page using navigator
this.props.navigator.push({
name: 'Home',
passProps: {
name: property
}
})
i took this from this link https://medium.com/#dabit3/react-native-navigator-navigating-like-a-pro-in-react-native-3cb1b6dc1e30#.6yrqn523n

Answer 2

Initially
import {Navigator}
Define Navigator inside the
render
function of
index.android.js
like this
render() {
return (
<Navigator
initialRoute={{id: 'HomePage', name: 'Index'}}
renderScene={this.renderScene.bind(this)}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromRight;
}} />
);
}
Then define the
renderscene function
like this
renderScene(route, navigator) {
var routeId = route.id;
if (routeId === 'HomePage') {
return (
<HomePage
navigator={navigator} />
);
}
if (routeId === 'DetailPage') {
return (
<DetailPage
navigator={navigator}
{...route.passProps}
/>
);
}
}
Specify the property
{...route.passProps}
for passing values to a screen. Here I have given it inside the DetailPage
Then you can use
passProps
for calling the next page. In my case
DetailPage
this.props.navigator.push({
id: 'DetailPage',
name: 'DetailPage',
passProps: {
name:value
}
});