0

How can I override react navigate.goBack(). My goal is to pass data from child to parent, which will used to update the parent.

There is a similar solution here react-navigation-goback-and-update-parent-state, however they still call this.props.navigation.goBack(), I want to be able to use the back button in the title bar.

BiggerD
  • 273
  • 3
  • 17

2 Answers2

1

You can achieve this by using call back function.

eg:

Parent class:

Add a call back function in parent class, and pass the function to child class using props.

...
...

//Navigating button 
 _didTapOnButton() {
    this.props.navigation.navigate("NextScreen", {
      callBackMethod: this._callBackMethod.bind(this)
    });
  }

//Call back method
_callBackMethod(dataFromChild) {
  //Your logic...
}

...
...

Child Class:

...
...

//Child class back button
 _didTapOnBackButton() {
   const { params } = this.props.navigation.state; // Take parameter from navigation
   params.callBackMethod('data 1'); // Call back function with data: 'data 1'
   this.props.navigation.pop();
 }
...
...
Jebin Benny
  • 933
  • 1
  • 5
  • 9
  • How does this ensure, that when a user clicks the back button (the back arrow in the header) that the call back method runs. I only see this working for my own custom back buttom – BiggerD Apr 06 '19 at 15:18
0

Using a callBack with componentWillUnmount solved my problem

BiggerD
  • 273
  • 3
  • 17