I am new to react-native. I am trying to use props and navigation in a const function. I do not know how to do that.
render() {
return (
<View style={styles.container}>
{this.state.signedIn ? (
<LoggedInPage name={this.state.name} photoUrl={this.state.photoUrl} />
) : (
<LoginPage signIn={this.signIn} />
)}
<TouchableOpacity
onPress={() => {this.props.navigation.navigate('About You')}}
style={styles.submitButton4}>
<Text style={styles.buttonText2}> Next </Text>
</TouchableOpacity>
</View>
);
}
const LoggedInPage = props => {
return (
Welcome {props.name}
<Image style={styles.image} source={{ uri: props.photoUrl }} />
Change photo
<TouchableOpacity
onPress={() => {this.props.navigation.navigate(‘registration’)}}
style={styles.submitButton4}>
Next
)
}
if your LoggedInPage is one of the screens defined in the Navigator, then the navigation prop is automatically passed into your component. you can then use navigation like so props.navigation.navigate
all you need is pass in the navigation prop from your parent.
return (
<View style={styles.container}>
{this.state.signedIn ? (
<LoggedInPage name={this.state.name} photoUrl={this.state.photoUrl} navigation={this.props.navigation} />
) : (
<LoginPage signIn={this.signIn} navigation={this.props.navigation} />
)}
<TouchableOpacity
onPress={() => {this.props.navigation.navigate('About You')}}
style={styles.submitButton4}>
<Text style={styles.buttonText2}> Next </Text>
</TouchableOpacity>
</View>
);
then you can use it the name way:
const LoggedInPage = props => {
return (
<Text style={styles.text1}>Welcome {props.name}</Text>
<Image style={styles.image} source={{ uri: props.photoUrl }} />
<TouchableOpacity
style={styles.submitButton1}>
<Text style={styles.buttonText3}> Change photo </Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {props.navigation.navigate('registration')}}
style={styles.submitButton4}>
<Text style={styles.buttonText2}> Next </Text>
</TouchableOpacity>
</View>
) }