title: Efficient way to scroll to certain index in FlatList with variable item size
body: <p>I'm having a trouble adding scroll/jump to certain index functionality on FlatList in react-native. My FlatList items are vary in size (height) which makes me unable to implement <code>getItemLayout</code> since this requires me to have prior knowledge about the FlatList item size, therefore I cannot use <code>scrollToIndex</code> (which requires <code>getItemLayout</code> to be implemented).</p>
  
  <p>My solution was to get each item's size when rendered by using <code>onLayout</code> and map them with their index. I can then use each item size to get their offset and use <code>scrollToOffset</code> to jump to the given item (by using <code>scrollToItem</code> function in the code below). The issue here is that I am not able to jump to certain item until that item has been rendered.
  My temporary solution for that is by tweaking <code>initialNumberToRender</code> close to the number of data and set the <code>windowSize</code> props as high as possible so that all of the items will be rendered (even though the user doesn't scroll down).</p>
  
  <pre><code>getOffsetByIndex = (index) =&gt; {
      let offset = 0;
      for (let i = 0; i &lt; index; i++) {
        const elementLayout = this.layoutMap[index];
        if (elementLayout &amp;&amp; elementLayout.height) {
          offset += this.layoutMap[i].height;
        }
      }
      return offset;
  };
  
  scrollToItem = (index) =&gt; {
    const offset = this.getOffsetByIndex(index);
    this.flatListRef.scrollToOffset(offset);
  };
  
  addToLayoutMap = (layout, index) =&gt; {
    this.layoutMap[index] = layout;
  };
  
  render(){
    return(
      &lt;FlatList
        ref={this.flatListRef}
        data={this.state.data}
        renderItem={() =&gt; &lt;View onLayout={this.addToLayoutMap}&gt; &lt;SomeComponent/&gt; &lt;/View&gt;}
        initialNumToRender={this.state.data.length / 5}
        windowSize={this.state.data.length}
      /&gt;
    );
  }
  </code></pre>
  
  <p>This solution works with small number of data, but when the data is large (containing ~300 of rows), it will take long time to be rendered get all the item size, preventing the user to jump to the last item directly for example.</p>
  
  <p>Is there any efficient way to do it?
  Also, rendering all the rows is so memory consumptive and negates the benefit of using FlatList.</p>