title: React Native Flatlist Example
body: <p>HOW CAN I HANDLE MUCH DATA IN REACT NATIVE FLATLIST?</p>
  
  <p>Is there anyone who can offer an example using React Native Flatlist's ScrollToIndex?</p>
  
  <p>I am working with ScrollToIndex and getItemLayout but it's not working.</p>
  
  <p>There are 185 items on my flatlist and when I have called ScrollToIndex(150), there's no result.</p>
  
  <p>I have worked with Google for getting ScrollToIndex Example but there's nothing.</p>
  
  <p>Thanks for your help.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>    &lt;FlatList
        ref={ref =&gt; setFlatListRef(ref)}
        // getItemLayout={getItemLayout}
        data={markers}
        keyExtractor={(item, index) =&gt; index}
        ItemSeparatorComponent={() =&gt; &lt;Separator color={colors.separator} /&gt;}
        renderItem={renderItem}
        style={{ flex: 1 }}
        getItemLayout={getItemLayout}
  </code></pre>
  
  <h2>        /></h2>
  
  <hr>
  
  <pre><code>const getItemLayout = (data, index) =&gt; {
    return {
      length: 120,
      offset: 120 * index,
      index
    }
  </code></pre>
  
  <h2>    }</h2>
  
  <hr>
  
  <pre><code>const renderItem = ({ item }) =&gt; &lt;MyListItem {...props} item={item} /&gt;
  </code></pre>
  
  <p>class MyListItem extends React.PureComponent {
    render () {
      console.log('purecom')
      let cost = null
      if (this.props.item.minCost != -1 &amp;&amp; this.props.item.maxCost != -1) {
        const entities = new Entities()</p>
  
  <pre><code>  if (this.props.item.minCost == 0 &amp;&amp; this.props.item.maxCost == 0) {
      cost = 'Guide price: Free'
    } else if (
      this.props.item.minCost == this.props.item.maxCost &amp;&amp;
      this.props.countries[this.props.item.countryID] &amp;&amp;
      this.props.countries[this.props.item.countryID].currencySymbol
    ) {
      cost =
        `Guide price: ` +
        entities.decode(
          this.props.countries[this.props.item.countryID].currencySymbol
        ) +
        `${this.props.item.minCost.toFixed(2)}`
    } else {
      if (
        this.props.countries[this.props.item.countryID] &amp;&amp;
        this.props.countries[this.props.item.countryID].currencySymbol
      ) {
        cost =
          `Guide price from` +
          entities.decode(
            this.props.countries[this.props.item.countryID].currencySymbol
          ) +
          `${this.props.item.minCost.toFixed(2)} to` +
          entities.decode(
            this.props.countries[this.props.item.countryID].currencySymbol
          ) +
          `${this.props.item.maxCost.toFixed(2)}`
      }
    }
  }
  return (
    &lt;TouchableOpacity
      style={{
        padding: 5,
        height: 120,
        backgroundColor:
          this.props.selectedMarkerID !== this.props.item.ID.toString()
            ? '#fff'
            : colors.separator
      }}
      activeOpacity={1}
      onPress={() =&gt; this.props.selectItem(this.props.item)}
    &gt;
      &lt;Text style={{ fontWeight: 'bold', fontSize: 13 }}&gt;
        {this.props.item.Name}
      &lt;/Text&gt;
      &lt;Text style={{ marginTop: 1, fontSize: 12 }}&gt;
        {this.props.item.desc}
      &lt;/Text&gt;
      &lt;Text style={{ marginTop: 1, fontSize: 12 }}&gt;
        {this.props.markerTypes ? (
          this.props.markerTypes[this.props.item.Type].ShortDescription
        ) : (
          ''
        )}
      &lt;/Text&gt;
  
      &lt;View style={{ flexDirection: 'row', marginTop: 5 }}&gt;
        &lt;View style={{ marginRight: 2 }}&gt;
          &lt;MyCustomMarker
            source={{ url: markerTypesImages[this.props.item.Type] }}
            style={{ width: 25, height: 30 }}
            userFavourites={this.props.userFavourites}
            Type={this.props.item.Type}
            markerID={this.props.item.ID}
          /&gt;
          &lt;Image
            source={{ url: images.compass }}
            style={{
              marginTop: 2,
              width: 20,
              height: 20,
              marginLeft: 5,
              transform: [
                { rotate: `${this.props.item.rotate.toString()}deg` }
              ]
            }}
          /&gt;
          &lt;Text style={{ fontSize: 9 }}&gt;{this.props.item.distance}km&lt;/Text&gt;
        &lt;/View&gt;
        {this.props.item.thumb === '' ? (
          &lt;Image
            source={{ url: images.noThumb }}
            style={{ flex: 0.2, width: 84, height: 65 }}
          /&gt;
        ) : (
          &lt;Image
            source={{
              url: `${this.props.url}${this.props.item.thumb}`
            }}
            style={{ flex: 0.2, width: 80, height: 60 }}
          /&gt;
        )}
        &lt;View style={{ flex: 0.5 }}&gt;
          &lt;View style={{ flexDirection: 'row', flexWrap: 'wrap' }}&gt;
            {Object.keys(facilities).map((key, i) =&gt; {
              if (this.props.item[key] === 1) {
                return (
                  &lt;View
                    style={{
                      width: 26,
                      height: 26,
                      padding: 2,
                      margin: 2,
                      alignItems: 'center',
                      borderRadius: 3,
                      borderWidth: 1,
                      borderColor: colors.dark,
                      backgroundColor: 'white'
                    }}
                    key={key}
                  &gt;
                    &lt;Image
                      source={{ url: facilities[key] }}
                      style={{ width: 20, height: 20 }}
                    /&gt;
                  &lt;/View&gt;
                )
              }
              return null
            })}
          &lt;/View&gt;
          &lt;StarRatingBar
            continuous={true}
            score={this.props.item.score / 2}
            allowsHalfStars={true}
            accurateHalfStars={true}
            dontShowScore={true}
          /&gt;
          &lt;View&gt;
            {cost ? &lt;Text style={{ fontSize: 12 }}&gt;{cost}&lt;/Text&gt; : null}
            {this.props.item.open ? (
              &lt;Text style={{ color: this.props.item.style, fontSize: 12 }}&gt;
                {this.props.item.open}
              &lt;/Text&gt;
            ) : null}
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    &lt;/TouchableOpacity&gt;
  )
  </code></pre>
  
  <p>}
  }</p>
  
  <hr>
  
  <p>setFlatListRef(flatListRef) {
      this.setState({ flatListRef })
    }</p>
  
  <hr>
  
  <pre><code>if (index &gt;= 0) {
    this.setState({ selectedIndex: index })
    setTimeout(() =&gt; {
      this.state.flatListRef.scrollToIndex({
        index,
        viewPosition: 0.5
      })
    }, 100)
  }
  </code></pre>