Invariant Violation: scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed, otherwise there is no way to know the location of offscreen indices or handle failures.

FlatList를 활용하여 Carousel을 구현하였는데 이때 initial Index를 값을 주게 되니 다음과 같은 에러가 발생하였다. 검색 결과 쉽게 임시 해결법을 구해냈다.

(시작이기는 하지만 때론 처음 index로 시작해서 스르르르륵 이동해서 initial Index에 도착한다.)

 

에러 : Invariant Violation: scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed, otherwise there is no way to know the location of offscreen indices or handle failures.

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 });
    });
  }}
/>

출처: https://stackoverflow.com/questions/53059609/flat-list-scrolltoindex-should-be-used-in-conjunction-with-getitemlayout-or-on

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