reactjs - How to use props and navigation route in same const function (react native)?

Question

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 ) }

Answer 1

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>
) }