React Native - React Navigation rerender panel on goBack()

Question

I am using React Navigation in my app. How can I refresh the data on my previous panel when going back to it?

A practical example would be: I am currently in Panel A, I navigate to Panel B where I update data in my database which is displayed in Panel A. After I goBack() to Panel A after changing the data in the database I wish Panel A has now rerendered and holds the new data from the database.

I have read that I can pass a custom refresh function as params to the child class and call it before navigating back, however I think this is not a neat way to achieve what I want since I update a component which is not yet mounted and I can just throw an error.

Acetylcholine

Are you using redux? what do you mean by database? Local state or redux or API called data? – Trocki

Answer 1

This is how i achieved!

In Panel A

refreshFunction()
{
    //your refresh code should be here
}

 <TouchableOpacity onPress={()=>{
   this.props.navigation.navigate('PanelB', {refreshFunction: this.refreshFunction});
 }}>
    Redirect to Panel B
 </TouchableOpacity>

In Panel B

const refreshFunction = this.props.navigation.state.params.refreshFunction;
if(typeof refreshFunction === 'function')
{
  refreshFunction();                
  //your back function
  this.goBack();
}

Namecalling

Related solutions in issue: github.com/react-navigation/react-navigation/issues/922 – Diabolize

React navigation added one more approach (i guess createStackNavigator) which unmount the compoenent in redirect action. So each time render component will trigger componentDidMount method. – Namecalling

Answer 2

React Navigation provides listeners which can be used for this exact scenario.

For example, attach a listener to Panel A, which will re-fetch the updated data when focused (i.e. when Panel A is "popped back" to):

componentDidMount() {
  const { fetchDatabaseData, navigation } = this.props
  fetchDatabaseData()
  this.willFocusListener = navigation.addListener(
    'willFocus',
    () => {
      fetchDatabaseData()
    }
  )
}

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

Dick

And with Navigation version 5 I used 'focus' instead of 'willFocus'. This worked. – Kristenkristi

Answer 3

After so much searching, conclusion: yes you can:

render(){
...
   <NavigationEvents
      onWillFocus={() => {
      //Call whatever logic or dispatch redux actions and update the screen!
      }}
   />
...
}

Source: https://github.com/react-navigation/react-navigation/issues/1171

Glockenspiel

Answer 4

Using redux + firebase I had the problem where the observable data from firebase.on('value', snapshot => { dispatch(data) } that was mappedToProps would update the redux store on save, before the component that listed that data returned to view onBack(), so no re-render would trigger in the list. I solved it by comparing past to current props and re-triggering the firebase.on fn only when the props did not match. This is better than always firing when the list component is navigated to, but I'd prefer a solution that forcefully triggers a re-render without calling the firebase fn at all.

  componentDidUpdate(prevProps) {
    if (prevProps.data !== this.props.data) this.props.fetchdata();
  }

Cuffs

Answer 5

As per navigation docs for navigation events

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // do something
    });

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

Accessory

Answer 6

If you have may scenarios, like this, you can use redux, which help you to manage data across tabs/screen and in the component because reduces is connected to store, in the redux store entire application state is managed.

Sensationalism

Using redux is not a solution to the problem asked. – Diabolize