How to reload a page, when user navigates back to the page from another page in React Native?

Question

I have two pages, home page and search page . The scenario is I'm navigating from home page to search page, in the search page I'm getting some search results. I'm passing the search results back to the home page using navigation like this:

this.props.navigation.navigate('Home', {
      searchResponse: data,
});

This takes me to the home page, but it is not getting reloaded. How do I refresh the home page, so that I can make use of the data received from the search page?

Answer 1

Try using replace method

this.props.navigation.replace('Home', { searchResponse: data, }); 

This will replace the entire stack of url's with a new one

Answer 2

Just try with this once, since navigation.navigate doesnt reload the page and it fetches the page from the stack , so try with .push which explictly reloads the page:

this.props.navigation.push('Home', {
      searchResponse: data,
});

UPDATE:

if you dont want to use push, react navigation has this new feature :

import { StackActions } from '@react-navigation/native';

this.props.navigation.dispatch(
  StackActions.replace('Home', {
    searchResponse: data,
  })
);

For more details check this rn-docs

Hope it help.s

Answer 3

you can use add navigation.addListener inside componentDidMount in your screen its make every time you naviage to screen read ComponentDidMount method like

{ componentDidMount() {

    const { navigation } = this.props;
    navigation.addListener('willFocus', () => {

       console.log("ComponentDidMount function")

    })
}

} in this example every time you navigate to screen it console ComponentDidMount function