Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Flat List - ScrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed

Ask Question

I tried to use getItemLayout but my flatlist items have different height, how can i fix this?

getItemLayout={(data, index) => (
                {length: 40, offset: 40 * index, index}
I had a similar error with a horizontal list showing images where the selected image should be shown in a carousel when pressed. 
I solved it by setting the selected index on the FlatList by using initialScrollIndex. I also used onScrollToIndexFailed to scroll to the correct image for the times when initialScrollIndex failed to show the correct image.
This is done by setting a timeout for 500ms and then scroll to the selected image.
Complete example (with only the props regarding this error):
const flatList = useRef<FlatList>(null);
<FlatList
  ref={flatList}
  initialScrollIndex={props.activeIndex}  
  onScrollToIndexFailed={info => {
    const wait = new Promise(resolve => setTimeout(resolve, 500));
    wait.then(() => {
      flatList.current?.scrollToIndex({ index: info.index, animated: true });
                This should be the accepted answer.Thanks. @Kasra if it fails it runs the function in onScrollToIndexFailed which wait for 500 milliseconds then it tries again to scroll to the index that's it.
– Steve Moretz
                Feb 26, 2021 at 20:46
I had a similar problem and solved it by changing initialNumToRender in FlatList.
This prop defines how many components to render. If you scroll to an index which has not been rendered, then the error will show.
React Native initialNumToRender default is 10, I changed for initialNumToRender={60}. You need to change this number if your list is bigger or smaller.
The proposed solution wasn't working in my case.
My understanding is that the FlatList lays out only a few next items in the list (initialNumToRender) and can scroll only to those items, but not beyond.
If the list items all have same height, I have another solution that works even on long lists. That is to scroll to a specific coordinates instead:
export default MyComponent = props => {
  const flatListRef = useRef()
  return (
    <FlatList
      ref={flatListRef}
      onScrollToIndexFailed={({
        index,
        averageItemLength,
      }) => {
        // Layout doesn't know the exact location of the requested element.
        // Falling back to calculating the destination manually
        flatListRef.current?.scrollToOffset({
          offset: index * averageItemLength,
          animated: true,
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.