How to refresh data when navigating to the previous page in React Native?

Question

What I'm Trying To Do

When navigating back from second page to first page, I want to refresh datas.

The problem is that when I navigate back from second page, onRefresh() in First doesn't work.

First Page

export default class First extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      items: [],
    };
  }

  fetchData = async () => {
    const querySnapshot = db.items();
    const items = [];
    querySnapshot.forEach((doc) => {
      items.push(doc.data());
    });
    this.setState({ items });
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    this.onRefresh;
  }

  onRefresh() {
    this.setState({ refreshing: true });
    this.fetchData().then(() => {
      this.setState({ refreshing: false });
    });
  }

  render() {
    return (
      <Container>
        <Content
          refreshControl={(
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.onRefresh.bind(this)}
            />
        )}
        >
        </Content>
      </Container>
    );
  }
}

Second Page

this.props.navigation.navigate('First', 'update');

I would appreciate it if you could give me any advices.

Answer 1

Suppose you have two pages PAGE-A & PAGE-B

• create a JS-File named ForegroundBackground.js

import React from "react";
import { View } from "react-native";

const ForegroundBackground = ({ navigation, bgCallback, fgCallback }) => {
    React.useEffect(() => navigation.addListener('focus', () => {
        fgCallback && fgCallback()
    }), []);
    React.useEffect(() => navigation.addListener('blur', () => {
        bgCallback && bgCallback()
    }), []);
    return (<View/>);
};

export default ForegroundBackground;

• you can use it in render function of PAGE-A by providing navigation object to it from screen props.

<ForegroundBackground navigation = {this.props.navigation}
                      fgCallback = {()=>{alert("resume")}}/>

Answer 2

There are two solutions for the purpose.

1. To use store.Define a state in store and use that state in pageA and pageB.So if you change store state from pageB.It will auto reflect in entire app.

2. you can pass a function from pageA to pageB while navigation.The purpose of the function is to refresh state of PageA while moving back. For example:

this.props.navigation.navigate("pageB", {
  resetData: () => {
    this.setState({
      mydata: ""
    })
  }
})

And while navigating from pageB you can do something like this:

this.props.navigation.state.params.resetData();
this.props.navigation.goBack();

I hope it helps. Leave a comment if you want to have more help/code/discussion etc