Refresh Component on navigator.pop()

Question

I'm using React Native's Navigator. Is there anyway to refresh the component so when I pop back to it, it'll make a new API call and grab the updated data to display in the component. I found a few similar questions, but no good answer...

Answer 1

I doubt you're still looking for an answer to this, but holy crap has this kept me up tonight. I'm very new to React Native, but I finally had some success.

The React Navigation API docs have a section for adding event listeners! Check it out! I shared some of my own code below too.

This is an example event handler in a Component that is the top screen of the StackNavigator stack. It grabs the current state and saves to the backend using an API call. After completion, StackNavigator's pop is called.

handleSubmit = () => {
  const { value, otherValue } = this.state
  addThingToDatabase({ value, otherValue })
    .then(() => this.props.navigation.pop())
}

Now over to the other Component which is the screen "underneath" in the StackNavigator stack. This is screen being shown after the "pop". Here's what I used to have in ComponentDidMount.

componentDidMount() {
  const { index } = this.props.navigation.state.params

  getAllThingsFromDatabase({ index })
    .then(({ arrayOfThings }) => this.setState({
      index,
      arrayOfThings
  }))
}

But the Component wouldn't update with the new thing, until addListener! Now I have pretty much the same code except it's in the constructor. I figured I only need to run it one time, and I need to store it too.

constructor(props, context) {
  super(props, context)

  this.state = {
    index: null,
    arrayOfThings: []
  }

  this.willFocusSubscription = this.props.navigation.addListener(
    'willFocus',
    (payload) => {
      const { index } = payload.state.params
      getAllThingsFromDatabase({ index })
        .then(({ arrayOfThings }) => this.setState({
          index,
          arrayOfThings
        }))
    }
  )
}

Note that the docs also mention unsubscribing the event listener using the .remove() function. I put that in ComponentWillUnmount().

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

There are four different events to subscribe to. I went with willFocus thinking it'll update before the screen is seen.

Answer 2

You can send a callback function to nextscene from previous one as a prop.

this.props.navigator.push({
          name: *nextscene*,
          passProps: {
            text: response,
            callBack: this.callback
        });

async callback(){
   await ....//make new api request grab the udpated data
}

Then in your nextscene you call callback method and then pop. You can also send parameters

 this.props.callBack()
 this.props.navigator.pop()