How do I refresh React state after running navigator.pop()?

Question

While working with React Native, I have a few components that are pushed on top of each other, some of which change the state of the component below them, like so:

Social -> Groups -> Add Group

However, when I run navigator.pop() to get back to the previous component (for example, after adding a group to a user's account), the component underneath (in this case, 'Groups') won't refresh with the latest state.

What am I doing wrong here?

Answer 1

Turns out I was able to solve this by inserting a componentWillUpdate on the 'Groups' component, that is, whenever the Groups component updates, it triggers a loadGroupsData function:

componentWillUpdate() {
  this.loadGroupsData();
}

...to which the loadGroupsData function checks for any differences, and if any are present, it loads:

loadGroupsData() {
api.getUserGroups(this.state.userId, (data) => {
  data.forEach((group, index) => {
    group.groupname = group.groupname;
  });
  if (this.state.dataSource._cachedRowCount === undefined || this.state.dataSource._cachedRowCount !== data.length) {
    this.setState({
      usersGroups: data.map(data => data.groupname),
      dataSource: this.state.dataSource.cloneWithRows(data),
      loaded: true,
    });
  }
});}