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

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.

In the parent render function

parentfunction(info){
   alert(info)
}


render(){
      return(
       //bla bla bla
       <Child functionToPass={this.parentfunction}/>
       //bla bla bla
      )
    }

In the child

callparentfunction(){
this.props.functiontoPass('Hello from the child')
}