FlatList scrollToIndex method does not scroll to correct index

Question

Actual Behaviour :

I'm working on a podcasts playing application in react-native and implementing track player in it. When i play a podcast in the player screen, tap on next icon twice and then navigate to the topic screen of the podcast being played in the player screen currently, then i'm required to scroll to the podcast item being played from the FlatList in the topic screen and show it as highlighted.

For this i have used scrollToIndex method of FlatList in conjunction with getItemLayout prop of FlatList and passed the index of the current podcast item being played to the method. But the method is not working as expected and is scrolling to wrong position. I have also tried many workarounds with no use.

Expected Behaviour :

I'm supposed to scroll to the particular podcast item being played from the topic screen in the player screen and show it as highlighted. Can someone help me please. Thanks in advance.

What i have tried :

 <FlatList
    showsVerticalScrollIndicator={false}
    style={{ marginLeft: 20, marginRight: 20 }}
    ref={(ref) => {
      this.flatListRef = ref;
    }}
    initialScrollIndex={insights.length > 50 ? 50 : 40}
    initialNumToRender={2}
    getItemLayout={this.getItemLayout}
    data={insights}
    extraData={this.state}
    stickyHeaderIndices={[0]}
    keyExtractor={this._keyExtractor}
    renderItem={this._renderItem}
    ListHeaderComponent={playAll ? null : this._renderHeader}
    ItemSeparatorComponent={ListSeparator}
    contentContainerStyle={{...Styles.listBottomSpace}}
    legacyImplementation={false}
    windowSize={20}
    maxToRenderPerBatch = {1}
    removeClippedSubviews={false}
    onScrollToIndexFailed={(error) => {
             this.flatListRef.scrollToOffset({ offset: error.averageItemLength * 
             error.index, animated: false });
                  setTimeout(() => {
                    if (insights.length !== 0 && this.flatListRef !== null) {
                      this.flatListRef.scrollToIndex({ index: error.index, animated: false 
       });
                    }
                  }, 100);
                }}
      />

getItemHeight = (event) => {
    if (!this.itemHeight) {
      const { height } = event.nativeEvent.layout;
      this.itemHeight = height;
    }
  };
  getItemLayout = (data, index) => {
    let height = this.itemHeight ? this.itemHeight : 100;
    return { length: height, offset: height * index, index };
  };
  scrollToItem = (insights) => {
    const { currentTrack } = this.props;
    let activeInsight = currentTrack ? lodash.findIndex(insights, (insight) => {
      return (insight.insight_id === Number(currentTrack.id) && insight.insight_title === 
      currentTrack.title)
    }) : -1;
    this.flatListRef &&
      activeInsight > -1 && 
      this.flatListRef.scrollToIndex({
        animated: false,
        index: activeInsight,
        viewPosition: 0.5,
      })
  };

Environment :

"react": "16.8.3", "react-native": "0.59.9", "MacOS": "10.15.3"

You can try what's described in the answer here - https://stackoverflow.com/questions/43856264/flatlist-component-life-cycle-methods-scrolltoindex-scrolltoend-etc/44332899#44332899 — Jono, Jul 06 '20 at 14:59
@Jono I have tried all the workarounds mentioned in the link. But didn't help me. For me using windowSize prop is working. But the problem is that the prop is working for different values for different topic list. Is there a way by which we can set the value of windowSize prop dynamically? — Sahitya Dheram, Jul 07 '20 at 05:36

score 0 · Answer 1 · answered Jul 06 '20 at 14:59

0

Have a look at this usage of scrollToIndex: https://snack.expo.io/@s2gt05/flatlist-scrolltoindex-practical-example.-

answered Jul 06 '20 at 14:59

Adrian-Gabriel Peslar

1
1
4

i have already tried this way and it did not work for me as i'm having 100+ records and the size of the list keeps varying for each topic. – Sahitya Dheram Jul 07 '20 at 05:10

score 0 · Answer 2 · answered May 30 '21 at 21:05

I had the same issue only on iOS. Sometimes the scrollToIndex function wont scroll to the specific index. Somehow the solution for me was to send the index as string not as int. in Adrian-Gapriel Peslar solution you will see that he is using "" + index too.

FlatList scrollToIndex method does not scroll to correct index

2 Answers2