[React Native] Flatlist에 onScrollToIndexFailed 설정하기

React Native에서 Flatlist를 사용하다 보면 scrollToIndex 함수를 설정할 일이 많다.

그러나 flatlist에 들어간 데이터를 로드하는 데 딜레이가 생길 경우,

scrollToIndex 함수가 제대로 작동하지 않아 자동 스크롤이 자연스럽지 못하거나 아예 중간에 끊기는 경우가 많다.

이때 사용할 수 있는 onScrollToIndexFailed 함수를 설명하고자 한다.

 

원리는 간단하다.

scrollToIndex 함수가 스크롤에 실패하는 경우 500ms (설정 가능) 정도의 짧은 시간 동안 기다렸다가 다시 스크롤하게 하는 것이다.

 

const flatlistRef = useRef<FlatList>(null);

...

<FlatList
  ref={flatlistRef}
  initialScrollIndex={props.index}
  onScrollToIndexFailed={
    info => {
      const wait = new Promise(resolve => setTimeout(resolve, 500));
      wait.then(() => {
      	flatlistRef.current?.scrollToIndex({
          index: info.index,
          animated:true
        });
      });
    }
  }
/>

 

info에는 기존 스크롤하려 했던 정보가 담겨 있어 잠깐 기다렸다 스크롤 명령을 내리는 것이 가능하다.

setTimeout의 500ms는 기다리는 시간을 조절 가능한 부분이니 잘 활용해보자.