title: Slow image load/Pull images from storage - firebase - react native
body: <p>I am pulling data from my firestore DB, one of the fields on each DB item is <code>image</code>, the value of each being a URL to an image with my firebase storage.</p>
  
  <p>What I'd like to do is pull the image directly from storage as part of the loop that pulls from firestore.</p>
  
  <p>I am trying to do this as when this loop renders the items, the images are taking a few seconds to appear on the screen. </p>
  
  <p>Please advise if there is an alternative to solve this issue?</p>
  
  <p><strong>FirebaseData.js</strong></p>
  
  <pre><code>onCollectionUpdate = (querySnapshot) =&gt; {
  const data = [];
  querySnapshot.forEach((doc) =&gt; {
    const { title, image, url, description } = doc.data();
      data.push({
        key: doc.id,
        doc, // DocumentSnapshot
        title,
        image,
        description,
        url
      });
  });
  this.setState({
    data,
    loading: false
  });
  }
  
  render() {
      if (this.state.loading) {
        return &lt;Spinner /&gt;; //RETURN A LOADING ICON
      }
  return (
    &lt;List containerStyle={styles.listStyle}&gt;
      &lt;FlatList
        data={this.state.data}
        renderItem={({ item }) =&gt; &lt;ChildList {...item} /&gt;}
      /&gt;
    &lt;/List&gt;
        );
      }
    }
  </code></pre>
  
  <p><strong>ChildList.js</strong></p>
  
  <pre><code>export default class ChildListRow2 extends React.PureComponent {
  
  render() {
    return (
        &lt;ListItem
          title={
            &lt;View&gt;
            &lt;Image source={{ uri: this.props.image }} style={styles.imageStyle} /&gt;
            &lt;Text style={styles.titleTextStyle}&gt;{this.props.title}&lt;/Text&gt;
            &lt;/View&gt;
          }
          subtitle={
            &lt;View&gt;
            &lt;Text style={styles.subTitleTextStyle}&gt;{this.props.description}&lt;/Text&gt;
            &lt;/View&gt;
          }
          hideChevron
          onPress={() =&gt; Linking.openURL(this.props.url)}
          containerStyle={styles.listItemStyle}
        /&gt;
      );
     }
  }
  </code></pre>