[Flatlist] initialScrollIndex doesn't work at all

Is this a bug report?

Yes

Have you read the Bugs section of the Contributing to React Native Guide?

Yes

Environment

react-native: 0.45.1

Steps to Reproduce

(Write your steps here:)

Made a horizontal flatlist with initialScrollIndex. It should go to the index and stay there.

<FlatList
        data={list}
        disableVisualisation="false"
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItems}
        horizontal={true}
        scrollEventThrottle={2000}
        pagingEnabled={true}
        initialScrollIndex={8}
        showsHorizontalScrollIndicator={false}
        onScroll={this.scroll}
        getItemLayout={this.layout}
        initialNumToRender={3}
      />

Actual Behavior

It goes to the right index and after about a half second it goes back to the first item in the list.

No idea how to implement it, because method scrollToIndex didn’t work too.

[DevSzurmanski]

@hramos @jstheoriginal I resolved my problem - my getItemLayout was wrong, but now I have similar issue. It goes to the good index, then I’t blank for about 0.5s and then it’s rerendering the item on the good index. My component doesn’t rerender. OnScroll and scrollEventThrottle works and they have no affect on my issue. InitialNumToRender didn’t helped too even with higher number than initialScrollIndex.

const widthScreen = Dimensions.get("window").width;
class HorizontalArticlesListView extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
    };
  }
  componentWillMount() {
    let { data, id, hotspotTop, hotspotBottom } = this.props.navigation.state.params;
    this.setState({ list: [hotspotTop, hotspotBottom, ...data] });
  }
  renderItems = ({ item }) => {
    return (
      <ArticleTypeHOC id={item.type + item.id} article={item} navigation={this.props.navigation} />
    );
  };

  keyExtractor = (article, index) => article.url;

  layout = (data, index) => ({ length: widthScreen, offset: widthScreen * index, index });

  render(): JSX.JSXElement {
    return (
      <FlatList
        data={this.state.list}
        disableVisualisation={false}
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItems}
        horizontal={true}
        scrollEventThrottle={250}
        pagingEnabled={true}
        initialScrollIndex={9}
        showsHorizontalScrollIndicator={false}
        onScroll={this.scroll}
        getItemLayout={this.layout}
        initialNumToRender={1}
      />
    );
  }
}
export default HorizontalArticlesListView;

[chinalwb]

@pcguru Could you give me some pointer about how to ‘Precompute the offset’ if each item has a different height? (my app is similar to the IM app, the item’s height depends on the comment’s length)

Thanks.