title: Why are images in a Flatlist sometimes not rendering?
body: <p>I'm trying to fix my Flatlist of images, sometimes when I load the screen all the images load and sometimes a random number of images load, and I have no idea why. Any suggestions on how to get all the images to consistently render all of the time?</p>
  
  <p>The image source is from a external url.</p>
  
  <p>I've added a gif on the issue. It shows me switching screens, and the different results I get everytime I return to the Flatlist grid of images.</p>
  
  <p><a href="https://imgur.com/HmC3Dvr" rel="nofollow noreferrer">https://imgur.com/HmC3Dvr</a></p>
  
  <p>I've tried the flatlist prop removeClippedSubviews={true} and {false}. </p>
  
  <pre><code>renderItem = ({ item, index }) =&gt; {
    return(
      //console.log(item)
      &lt;TouchableHighlight onPress={this.props.toggleView.bind(this, index)} &gt; 
        &lt;View &gt;
        &lt;Image source={{uri: item.images.thumbnail.url, cache:'force-cache'}} style={styles.item} resizeMode={"resize"}/&gt;      
        &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
     ) 
   }
  
  
  render(){
  return(
          &lt;FlatList
          ref={(ref) =&gt; { this._flatList = ref; }}
          data={this.props.profileMedia}
          onScroll={this.handleScroll}
          renderItem={this.renderItem.bind(this)}
          numColumns={3}
          ListHeaderComponent={this.renderHeader}
          ListFooterComponent={this.renderFooter}
          columnWrapperStyle={{justifyContent: 'flex-start'}}
          contentOffset = {{x: 0, y:this.props.scrollPosition}}
          keyExtractor={item =&gt; item.id}
          initialNumToRender={12}
        /&gt;
    )
   }
  </code></pre>