Refresh previous screen on goBack()

Question

I am new to React Native. How can we refresh/reload previous screen when returning to it by calling goBack()?

Lets say we have 3 screens A, B, C:

<

Answer 1

Adding an Api Call in a focus callBack in the screen you're returning to solves the issue.

componentDidMount() {
    this.props.fetchData();
    this.willFocusSubscription = this.props.navigation.addListener(
      'willFocus',
      () => {
        this.props.fetchData();
      }
    );
  }

  componentWillUnmount() {
    this.willFocusSubscription.remove();
  }

Answer 2

Thanks to @Bat. I have spent a lot of hours on finding the answer and finally, I got a basic solution which is working according to my needs. I was quite worried though. Simply make a function like this in your previous activity make sure to bind it.

    changeData(){
    var mydata= salesmanActions.retrieveAllSalesman();
    this.setState({dataListFill: mydata});
    alert('' + mydata.length);
    }

Simple, then in constructor bind this,

    this.changeData= this.changeData.bind(this);

After that, as I am using react native navigation, so I will simply pass this function to the second screen just like the code below:

    onPress={() => this.props.navigation.navigate('Add Salesman', {doChange: 
    this.changeData} )}

So when the new screen registered as "Add Salesman" will be called, a parameter named "doChange" which is assigned a function will also be transfered to other screen. Now, in other screen call this method anywhere, by :

    this.props.route.params.doChange();

It works for me. I hope works for you too, THANKS for the idea @Bat.

Answer 3

On your screen B constructor will work like magic :)

    this.props.navigation.addListener(
          'didFocus',
          payload => {
            this.setState({is_updated:true});
          }
    );

Answer 4

Yes, constructor is called only for the first time and you can't call it twice.

First: But you can separate the data getter/setter from the constructor and put it in a function, this way you can pass the function down to the next Scene and whenever you're going back you may simply recall the function.

Better: You can make a go back function in your first scene which also updates the scene while going back and pass the go back function down. This way the second scene would not be aware of your update function which is reasonable.

Best: You can use redux and dispatch a go-back action in your second scene. Then in your reducer you take care of going back & refreshing your scene.

Answer 5

This answer assumes that the react-native-navigation library is being used, which is unlikely because it doesn't actually have a goBack() method...

The constructor doesn't call a second time because screen A and B are still rendered (but hidden behind screen C). If you need to know when screen B is going to be visible again you can listen to navigation events.

class ScreenB extends Component {
  constructor(props) {
    super(props);
    // Listen to all events for screen B
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent);
  }

  onNavigatorEvent = event => {
    switch (event.id) {
      case 'willAppear':
        // refresh your state...
        break;
  };
}

Other events: willDisappear, didAppear, didDisappear

An alternate solution to your problem is to use a state management solution like Redux to provide the state to all screens whenever it is updated (rather than just on screen transitions. See old react-native-nav/redux example.