Navigator with args - react-native

Question

I created an Android app with Navigator.
On my first page, I want to push differents informations to the next page if I push with a button or with an other.
I created gotoNext function as below. But, I don't understand how I can replace my typedmg: 'test' by an argument which represent the button Pole or Aerial.
Thanks for your help.
class LoginPage extends React.Component {
render() {
return (
<Navigator
renderScene={this.renderScene.bind(this)}
navigator={this.props.navigator}
navigationBar={
<Navigator.NavigationBar routeMapper= NavigationBarRouteMapper} />
} />
);
}
renderScene(route, navigator) {
return (
....
<View style={{flex: 4, flexDirection: 'column'}}>
<TouchableHighlight name='Pole' onPress={this.gotoNext}>
<Image source={require('./img/radio_damage_pole.png')} />
</TouchableHighlight>
<TouchableHighlight name='Aerial' onPress={this.gotoNext}>
<Image source={require('./img/radio_damage_aerial.png')} />
</TouchableHighlight>
</View>
...
);
}
gotoNext() {
this.props.navigator.push({
id: 'page_user_infos',
name: 'page_user_infos',
typedmg: 'test',
});
}
}

Answer 1

You need to set up your Navigator to pass properties by assigning the passProps spread operator to the Navigator. The best way to do that is to separate your navigator into it's own component, then assign properties to it.
I've taken your project and set up a similar functioning one here. There was another similar thread you may be able to reference here as well. Below is the code I used to get it working, I hope this helps!
https://rnplay.org/apps/UeyIBQ
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
Image,
TouchableHighlight, TouchableOpacity
} = React;
class Two extends React.Component {
render(){
return(
<View style={{marginTop:100}}>
<Text style={{fontSize:20}}>Hello From second component</Text>
<Text>id: {this.props.id}</Text>
<Text>name: {this.props.name}</Text>
<Text>name: {this.props.typedmg}</Text>
</View>
)
}
}
class Main extends React.Component {
gotoNext(myVar) {
this.props.navigator.push({
component: Two,
passProps: {
id: 'page_user_infos',
name: 'page_user_infos',
typedmg: myVar,
}
})
}
render() {
return(
<View style={{flex: 4, flexDirection: 'column', marginTop:40}}>
<TouchableHighlight style={{height:40, borderWidth:1, marginBottom:10}} name='Pole' onPress={ () => this.gotoNext('Pole') }>
<Text>Pole</Text>
</TouchableHighlight>
<TouchableHighlight style={{height:40, borderWidth:1, marginBottom:10}} name='Aerial' onPress={ () => this.gotoNext('Aerial') }>
<Text>Aerial</Text>
</TouchableHighlight>
</View>)
}
}
class App extends React.Component {
render() {
return (
<Navigator
initialRoute={{name: 'Main', component: Main, index: 0}}
renderScene={(route, navigator) => {
if (route.component) {
return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
}
}}
navigationBar={
<Navigator.NavigationBar routeMapper={NavigationBarRouteMapper} />
} />
);
}
}
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
if(index > 0) {
return (
<TouchableHighlight style={{marginTop: 10}} onPress={() => {
if (index > 0) {
navigator.pop();
}
}}>
<Text>Back</Text>
</TouchableHighlight>
)} else {
return null}
},
RightButton(route, navigator, index, navState) {
return null;
},
Title(route, navigator, index, navState) {
return (
<TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
<Text style={{color: 'white', margin: 10, fontSize: 16}}>
Data Entry
</Text>
</TouchableOpacity>
);
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 28,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
fontSize: 19,
marginBottom: 5,
},
});
AppRegistry.registerComponent('App', () => App);