react-native: [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.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15 (3 by maintainers)

Most upvoted comments

@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;

DevSzurmanski on Jul 12, 2017

@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.

chinalwb on Jul 19, 2018

I had same issue. Here’s my working workaround: contentOffset = {{x: ITEM_WIDTH * this.props.startAtIndex, y: 0}}

RonenR on Jan 1, 2018

@DevSzurmanski - I am also encountering the same issue. What was the problem with your getItemLayout function?

This is my current code:

      <ScreenWrapper>
          <FlatList
            style={{
              width: WIDTH,
              marginLeft: -20,
            }}
            data={messages}
            initialScrollIndex={messages.length - 1}
            renderItem={this.renderItem}
            keyExtractor={item => item.id}
            getItemLayout={(data, index) => (
              { length: HEIGHT, offset: HEIGHT * index, index }
            )}
          />
      </ScreenWrapper>

Ahad-Wasim on Nov 20, 2017

Can you reproduce this using Snack?

hramos on Jul 11, 2017