How to call a parent function from a child – react-native

I’m struggling to find a solution to my problem , but i cannot find it anywhere . So my question is how to call a parent function from a child . The function has to be passed in a onPress={()} inside the child

Parent.js

   constructor(props) {
    super(props);
    this.state = { loading: true };
    this.state = { active: 'active' };
    this.openDrawer = this.openDrawerButtonFunction.bind(this);
    this.callParent = this.callParent.bind(this)

       }

     callParent = () => {
     console.log('I am your father')   }

Child.js

     <Avatar
      avatarStyle={{ height: 50 }}
      onPress={() => { this.onPressAvatar() }}
      source={require('../../assets/images/dav-r.jpeg')} />

      onPressAvatar = () => {
      console.log('press on avatar');
        this.props.callParent.bind(this)

}

Answer

This is a common mis-understanding, so you’re in good hands.

You’re going to utilize Props to accomplish calling a parent function to a child.

Naturally, the child knows not of the parent’s functions. When you need to do something in the child Component, and bubble it up to the parent function, you just need to pass the function as a prop.

Example

ParentComponent.js

...

doSomething(x){
   console.log(x);
}

render(){
   return(
      <ChildComponent functionPropNameHere={this.doSomething}/>
   )
}

ChildComponent.js

someFunctionInChildComponent(){
   this.props.functionPropNameHere('placeholder for x');
}

When you run the function someFunctionInChildComponent(), it will call the Prop called functionPropNameHere which then moves to the parent component to call the function there. The input x will be placeholder for x in this example.