title: Fetch in React Native Expo app
body: <p>I'm using <code>fetch</code> in my <code>React Native</code> app using <code>Expo</code>. The problem I'm having is that there seems to be an execution of code which throws an error before the promise is resolved. Here's my code:</p>
  
  <pre><code>renderWithData() {
      return fetch('https://myapi.com')
      .then((response) =&gt; response.json())
      .then((myListData) =&gt; {
        return (
          &lt;FlatList data={myListData} renderItem={({item}) =&gt; &lt;Text&gt;{item.dataItem}&lt;/Text&gt;} /&gt;
        );
      })
      .catch((error) =&gt; {
        console.error(error);
      });
  }
  </code></pre>
  
  <p>The error I'm getting reads:</p>
  
  <blockquote>
    <p>Invariant Violation: Objects are not valid as a React child (found:
    object with keys {_40, _65, _55, _72}). If you meant to render a
    collection of children, use an array instead.</p>
  </blockquote>
  
  <p>That's because I seem to be getting some type of object that I think represents the promise. This throws the error. Only a split second later, I get the array from the API call.</p>
  
  <p>The code that invokes <code>renderWithData()</code> is as follows:</p>
  
  <pre><code>&lt;View style={styles.listContainer}&gt;
     {this.renderWithData()}
  &lt;/View&gt;
  </code></pre>
  
  <p>How do I get it to wait till the data are received. I thought using <code>then</code> would do it but clearly it's not working.</p>