FlatList scrollToIndex to an item in large data

Viewed 332

I need to render +3000 large list data and I'm using FlatList.scrollToIndex() for that.

When they press an alphabet box, I want it to auto-scroll to index of an item that starts with the alphabet.

It scrolls to an item once it's rendered. but it fails when the index is far from the current window so it's not rendered yet.

so I'm wondering if there is any realistic way to do that I'd really appreciate if anybody tells me how to do it right. Thank you!

enter image description here

function scrollToAlphabet(index) {
  // this fails when the index is too far outside of window.
  listRef.current.scrollToIndex({ index });
}

<FlatList
  ...
  ref={listRef}
  data={largeList}
  onScrollToIndexFailed={(error) => {
    const { index, averageItemLength } = error;
    setTimeout(() => {
      listRef.current.scrollToIndex({ index });
      // should instead like scrollToOffset({ offset: currentScrollY + index * averageItemLength }) ?
    }, 100);
  }}
/>
0 Answers
Related