initialScrollIndex not working for FlatList react native

Question

I am experiencing an issue with the initialScrollIndex of FlatList - the argument of initialScrollIndex is simply ignored and the first item is shown.

https://snack.expo.io/Bk1mkK0zZ

Answer 1

I had the exact same problem, which is why I found your question. After a lot of testing, I found a workaround, which seems to work. Instead of using initialScrollIndex I used the function scrollToIndex once the list is rendered. Applying it to your code, it will look like

import React, { Component } from 'react';
import { FlatList, Dimensions, View, Text } from 'react-native';

const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;

export default class App extends Component {

  render() {
    const data = [{id: 0},{id: 1},{id: 2},{id: 3},{id: 4}];

     return (
      <View onLayout={() => this.onLayout()}>
        <FlatList
          ref={el => this.list = el}
          data={data}
          renderItem={this.renderItem}
          keyExtractor={item => item.id}

          pagingEnabled={true}
          horizontal={true}
          showsHorizontalScrollIndicator={false}

          getItemLayout={this.getItemLayout}

          debug={true}
        />
      </View>
    )
  }

  onLayout() {
    this.list.scrollToIndex({index: 2})
  }

  renderItem = ({ item }) => {
    return (
      <View style={{flex: 1, backgroundColor: 'lightblue', width: WIDTH, height: HEIGHT, justifyContent: 'center', alignItems: 'center'}}>
        <Text style={{color: 'white', fontSize: 300, fontWeight: 'bold'}}>{item.id}</Text>
      </View>
    );
  };

  getItemLayout = (data, index) => (
    {length: WIDTH, offset: WIDTH * index, index}
  );
}

Hope it works for you.

By the way, putting this.list.scrollToIndex({index: 2}) in componentDidMount, does for some reason not work for me, which is why I used onLayout instead

Answer 2

Using RN 0.61.5

I've solved this with setting:

• onContentSizeChange which will handle scroll to index whenever flatlist data is changed and all items rendered ( you can handle how many items will be rendered on initial render with setting initialNumToRender if needed)

• onScrollToIndexFailed which is necessary to use when using scrollToIndex function:

<FlatList
    ref={ref => (this.flatList = ref)}
    data={dataArray}
    style={style}
    eyExtractor={(item, index) => String(index)}
    onContentSizeChange={() => {
        if (this.flatList && this.flatList.scrollToIndex && dataArray && dataArray.length) {
            this.flatList.scrollToIndex({  index: dataArray.length - 1 });
        }
    }}
    onScrollToIndexFailed={() => {}}
    renderItem={({ item, index }) => {
        return (
            <Text>Stackoverflow Answer</Text>
        );
    }}
/>