How to re-render parent component React Native after update/edit in Child Component?

Question

I get a problem to get new data in parent component (Profile) after update data in child component (ProfileEdit), here I create a simple script in order easy to understand, default component is Profile, why cannot show alert in Profile after back from ProfileEdit, please give advices or correct my script how to show alert after back from ProfileEdit.

Profile.js

export default class Profile extends Component { 
    componentDidMount() {
        alert('Success');
    }

    toProfileEdit() {
        this.props.navigation.navigate('ProfileEdit');  
    }

    render() {
        return (
            <View>
                <Button
                    onPress={() => this.toProfileEdit()}
                    title="Learn More" />
            </View>
        )
    }
}

ProfileEdit.js

export default class ProfileEdit extends Component { 
    backTo() {
        this.props.navigation.navigate('Profile');
    }

    render() {
        return (
            <View>
                <Button
                    onPress={() => this.backTo()}
                    title="Learn More" />
            </View>
        )
    }
} 

Please anyone help me to solve this problem.

Thanks.

Answer 1

Profile already mount then componentWillMount will not call again on the back action. You can pass the function with prop action.

 export default class ProfileEdit extends Component { 
  backTo() {
    this.props.navigation.navigate('Profile');
  }
  render() {
    return (
      <View>
        <Button
          onPress={() => { this.props.something(); this.backTo()}}
          title="Learn More" />
      </View>
    )
  }
}

Pass function which name is something , call it after you can go back.