Refresh previous screen on goBack()

Question

I am new to React Native. How can we refresh/reload previous screen when returning to it by calling goBack()?

Lets say we have 3 screens A, B, C:

A -> B -> C 

When we run goBack() from screen C it goes back to screen B but with old state/data. How can we refresh it? The constructor doesn't get called 2nd time.

Answer 1

Adding an Api Call in a focus callBack in the screen you're returning to solves the issue.

componentDidMount() {     this.props.fetchData();     this.willFocusSubscription = this.props.navigation.addListener(       'willFocus',       () => {         this.props.fetchData();       }     );   }    componentWillUnmount() {     this.willFocusSubscription.remove();   } 

UPDATE 2021:

  componentDidMount() {     this.props.fetchData();     this.willFocusSubscription = this.props.navigation.addListener(       'willFocus',       () => {         this.props.fetchData();       }     );   }    componentWillUnmount() {     this.willFocusSubscription();   } 

If you use React Hook:

  React.useEffect(() => {       fetchData();       const willFocusSubscription = props.navigation.addListener('focus', () => {         fetchData();     });      return willFocusSubscription; }, []); 

Answer 2

How about using useIsFocused hook?

https://reactnavigation.org/docs/function-after-focusing-screen/#re-rendering-screen-with-the-useisfocused-hook

const componentB = (props) => {    // check if screen is focused   const isFocused = useIsFocused();    // listen for isFocused, if useFocused changes    // call the function that you use to mount the component.    useEffect(() => {     updateSomeFunction()   },[isFocused]); }