Как активно обновлять FlatList всякий раз, когда он отображается на текущем экране в React Native?

Я создаю приложение для чата с помощью React Native. Я использую <FlatList> для списка каналов чата на главном экране, и я использую StackNavigator для навигации между экранами. Теперь я пытаюсь позволить <FlatList> refetch данные из заднего конца и повторно вызывать себя всякий раз, когда пользователь вернуться обратно к главному экрану.

Например, пользователь вводит канал чата, приложение переходит на экран подробных сведений о чате, пользователь отправляет туда некоторые сообщения, когда пользователь нажимает кнопку "Назад" и переходит к экрану списка основного чата, <FlatList> должен refectch из back-end и rerender для отображения последних данных. (изменить порядок последнего канала на верх и т.д.)

Прямо сейчас реализовано приложение для обновления, но проблема заключается в том, как я узнаю, что пользователь перешел обратно на главный экран и как активно вызывать обновление в <FlatList> когда это происходит.

Вот некоторые из моих кодов:

  onRefresh = async () => {
    const { data } = this.props
    try {
      this.setState({ refreshing: true })
      await data.refetch({ page: 1 })
    } catch (e) {
      // todo
    } finally {
      this.setState({
        refreshing: false,
      })
    }
  }

const NudgeList = ({
  nudges,
  loading,
  refreshing,
  onRefresh,
}) => {
  let inner
  if (loading && !refreshing && !fetchingMore) {
    inner = (
      <View style={styles.center}>
        <ActivityIndicator animating />
      </View>
    )
  } else {
    inner = (
      <FlatList
        onRefresh={onRefresh}
        refreshing={refreshing || false}
        scrollEventThrottle={400}
        data={nudges}
        renderItem={({ item }) => (
          <NudgeCard nudge={item} {...{ onOpenNudge }} />
        )}
      />
    )
  }

  return (
    <View style={styles.container}>
      {inner}
    </View>
  )
}