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.

Are you using redux? what do you mean by database? Local state or redux or API called data? — Revansiddh, Apr 20 '18 at 13:22

Jitender Badoni · Answer 1 · 2019-08-12T07:19:52.427

6

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();
}

edited Aug 12 '19 at 07:19

answered Apr 20 '18 at 18:13

Jitender Badoni

218
1
9

Related solutions in issue: https://github.com/react-navigation/react-navigation/issues/922 – steviesh Sep 12 '18 at 06:34
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. – Jitender Badoni Sep 12 '18 at 08:17

score 2 · Answer 2 · edited Aug 09 '19 at 14:14

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()
}

edited Aug 09 '19 at 14:14

David Schumann

13,380
9
75
96

answered Oct 04 '18 at 07:45

Bataleon

3,194
3
21
26

And with Navigation version 5 I used 'focus' instead of 'willFocus'. This worked. – BertC Nov 08 '20 at 10:52

score 1 · Answer 3 · edited Aug 09 '19 at 14:14

1

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

edited Aug 09 '19 at 14:14

David Schumann

13,380
9
75
96

answered Jun 02 '19 at 05:24

Duverney

11
3

score 0 · Answer 4 · edited Aug 06 '19 at 07:53

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();
  }

score 0 · Answer 5 · answered Feb 20 '21 at 20:01

As per navigation docs for navigation events

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

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

score -3 · Answer 6 · answered Apr 21 '18 at 20:17

-3

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.

answered Apr 21 '18 at 20:17

RANVIR GORAI

1,226
11
10

1

Using redux is not a solution to the problem asked. – steviesh Sep 12 '18 at 06:33

React Native - React Navigation rerender panel on goBack()

6 Answers6