title: React Native: FlatList with require Images not performant
body: <p>I'm struggling to get a list view performant.</p>
  
  <p>Scenario: I'm loading around 100 list items on one screen. When transitioning to this screen, everything on view is rendered perfectly BUT the scroll is frozen for couple of seconds before view is alive and it becomes available.</p>
  
  <p>Changing the images to be singular causes the list view to be fully performant - which means the images required in are causing an issue.</p>
  
  <p>Each item only contains the following:</p>
  
  <ul>
  <li>thumbnail image (120px square, ~3kb each)</li>
  <li>title (32 chars)</li>
  <li>subtitle (120 chars)</li>
  </ul>
  
  <p>And there around 100 items in this list view (not a lot at all!)</p>
  
  <p>All the images are stored locally within the App and imported via <code>require</code>.</p>
  
  <p>Example code:</p>
  
  <pre><code>renderItem = (listItem) =&gt; {
      const { item, index } = listItem;
  
      return (
        &lt;Item
          id={index}
          item={item}
          onPress={this.props.onPress}
        /&gt;
      );
  }
  
  render() {
    return (
      &lt;FlatList
        data={this.props.data}
        renderItem={this.renderItem}
        keyExtractor={this.keyExtractor}
      /&gt;
    );
  }
  </code></pre>
  
  <p>And <code>Item</code> component:</p>
  
  <pre><code>render() {
      const { item, onPress } = this.props;
      const imgSrc = getAvatar(item.avatar);
  
      return (
        &lt;TouchableOpacity onPress={onPress.bind(this, id)} style={styles.section} activeOpacity={0.8}&gt;
          &lt;Image source={imgSrc ? imgSrc : defaultAvatar} style={styles.image} resizeMode={'contain'} /&gt;
          &lt;View style={styles.container}&gt;
            &lt;Text style={styles.heading}&gt;{item.name}&lt;/Text&gt;
            &lt;Text style={styles.body} numberOfLines={2}&gt;{item.blurb}&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/TouchableOpacity&gt;
      );
  }
  </code></pre>
  
  <p>With <code>getAvatar</code> being:</p>
  
  <pre><code>export const getAvatar = name =&gt; ({
      ["john"]: require('../assets/images/john.jpg'),
      ["jane"]: require('../assets/images/jane.jpg'),
      ["smith"]: require('../assets/images/smith.jpg'),
      ... plus a lot more...
    })
  </code></pre>
  
  <p>I've tried adding the following to the <code>FlatList</code> but the performance just either does nothing or gets delayed on initial load:</p>
  
  <ul>
  <li><code>removeClippedSubviews</code></li>
  <li><code>initialNumToRender</code> limited this to lower number</li>
  </ul>
  
  <p>The above is only an issue due to how Facebook/RN team have produced <code>FlatList</code>. Unlike <code>TableView</code> in iOS nothing is recycled. All items are rendered at once.</p>
  
  <p>I've also tried some other libraries like <a href="https://github.com/Flipkart/recyclerlistview" rel="nofollow noreferrer">https://github.com/Flipkart/recyclerlistview</a> - whilst this improved the initial scrolling availability, when scrolling fast the view drops a lot of frames and becomes extremely laggy. Once all images are viewed the scrolling is okay but this is still not good enough.</p>
  
  <p>Any solutions to optimise the UX of this at all? I'm tempted to scrap RN and go native - this is pretty basic feature... list views!</p>