title: How to actively refresh a FlatList whenever it shows on the current screen in React Native?
body: <p>I'm creating a live chat app using React Native.
  I'm using <code>&lt;FlatList&gt;</code> for the chat channel list on the main screen, and I'm using <strong>StackNavigator</strong> for the navigation between screens.
  Now I am trying to let the <code>&lt;FlatList&gt;</code> refetch data from the back-end and rerender itself whenever user navigate back to the main screen.</p>
  
  <p>An example will be a user enters a chat channel, the app navigates to the chat detail screen, the user sends some messages there, when the user press the back button and navigates back to the main chat channel list screen, the <code>&lt;FlatList&gt;</code> should refectch from the back-end and rerender itself to show the latest data. (reorder the most recent channel to the top etc.)</p>
  
  <p>Right now pull to refresh is implemented but the problem is how do I know that the user has navigated back to the main screen and how to actively call refresh on <code>&lt;FlatList&gt;</code> when that happens.</p>
  
  <p>Here is some of my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  onRefresh = async () =&gt; {
      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,
  }) =&gt; {
    let inner
    if (loading &amp;&amp; !refreshing &amp;&amp; !fetchingMore) {
      inner = (
        &lt;View style={styles.center}&gt;
          &lt;ActivityIndicator animating /&gt;
        &lt;/View&gt;
      )
    } else {
      inner = (
        &lt;FlatList
          onRefresh={onRefresh}
          refreshing={refreshing || false}
          scrollEventThrottle={400}
          data={nudges}
          renderItem={({ item }) =&gt; (
            &lt;NudgeCard nudge={item} {...{ onOpenNudge }} /&gt;
          )}
        /&gt;
      )
    }
  
    return (
      &lt;View style={styles.container}&gt;
        {inner}
      &lt;/View&gt;
    )
  }</code></pre>
  </div>
  </div>
  </p>