React Native 무한스크롤 구현하기

React Native에서 무한스크롤을 구현해보겠습니다.

 

const [isUpdateList, setIsUpdateList] = useState(true);

const onScrollList = async (e) => {
    if(!isUpdateList){return}
    // 현재 스크롤 값
    let updateScroll = e.nativeEvent.contentOffset.y;
    if(updateScroll == 0){return}
    
    // 현재 보여지는 화면 높이
    let screenHeight = e.nativeEvent.layoutMeasurement.height;
    // 전체 문서의 높이
    let documentHeight = e.nativeEvent.contentSize.height;

    // 원하는 로직을 시작하는 시점
    let endPoint = 100;

    if (screenHeight + updateScroll + endPoint >= documentHeight) {
        if(!isUpdateList){return};
        setIsUpdateList(false);
        // 로직처리
    }
};

return (
    <FlatList 
        onScroll={onScrollList}
        data={data}
        onContentSizeChange={() => setIsUpdateList(true)}
        renderItem={renderItem}
        keyExtractor={(i,index)=>index}
    />
)

 

1. FlatList 혹은 ScrollView로 화면을 스크롤 가능한 상태로  만들어줍니다.

 

2. onScroll로 스크롤을 감지해 줍니다.

 

3. 스크롤이 맨 끝 혹은 지정된 지점에 도착했을 때 원하는 로직을 작성합니다.

UX를 높이기 위하여 스크롤이 제일 끝에 도착했을 때가 아닌 100의 여유공간을 두었습니다.

여유 공간을 두면 해당 공간에서 스크롤을 했을때 로직이 계속해서 실행되는 것을 방지하기 위하여 isUpdateList라는 bool 변수를 선언하였습니다.

 

만약 로직이 실행된다면 isUpdateList를 false로 바꿔 onScrollList 함수가 실행되자마자 리턴되게 해줍니다.

모든 로직 처리가 끝났다면 다음 이벤트를 위해 다시 true 값으로 바꿔줍니다.

 

 

지금까지 React Native 무한스크롤을 구현해 보았습니다.

웹에서도 동일한 플로우로 구현 가능합니다.

 

이 기능은 자주 사용하기 때문에 저는 지금 컴포넌트 형태로 빼서 사용하고 있습니다.

추후 라이브러리로 만들 계획입니다.

 

* 2월 13일 기준 오픈소스 제작하였습니다.

https://www.npmjs.com/package/@hellojh/react-native-infinite-scroll

@hellojh/react-native-infinite-scroll