Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native - React Navigation rerender panel on goBack()

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.

like image 260
GIV Avatar asked Mar 23 '18 20:03

GIV


1 Answers

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();
}
like image 78
Jitender Badoni Avatar answered Nov 10 '22 23:11

Jitender Badoni