React Native Infinite List (Paginated List)

ReactNativeInfiniteList.tsx

import React, { useState, useRef, useCallback, useMemo } from 'react';
import { FlatList, ActivityIndicator } from 'react-native';

export default () => {
  const pageCount = useRef(1);
  const [list, setList] = useState([]);
  const isLoadMore = useRef(true);
  const [loadMore, setLoadMore] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const getList = useCallback(
    async (isPagination = false) => {
      const isConnected = await getNetworkStatus();
      if (!isConnected) {
        // Show toast for internet not connected
        return;
      }

      let currentPage = 1;

      if (loadMore || !isLoadMore.current) {
        return;
      }

      if (isPagination) {
        currentPage = pageCount.current + 1;
      }

      setIsLoading(!isPagination);

      const payload = {
        page: currentPage,
        pageSize: 20,
      };

      APICall('post', payload, 'getList')
        .then((resp) => {
          if (resp?.statusCode === 200 && resp?.data?.list) {
            const { list } = resp.data;

            if (list?.length > 0) {
              setList((state) => {
                return currentPage === 1 ? list : [...state, ...list];
              });
              setLoadMore(false);
              isLoadMore.current = true;
              pageCount.current = currentPage;
            } else {
              setList((state) => {
                return currentPage === 1 ? [] : state;
              });
              setLoadMore(false);
              isLoadMore.current = false;
              pageCount.current = currentPage;
            }
          }
          setIsLoading(false);
        })
        .catch(() => {
          setIsLoading(false);
        });
    },
    [loadMore]
  );

  const renderBottomView = useMemo(() => {
    if (!loadMore) return null;
    return <ActivityIndicator />;
  }, [loadMore]);

  return (
    <FlatList
      renderItem={({ item, index }) => (
        // Render your item here
        <></>
      )}
      showsVerticalScrollIndicator={false}
      data={list}
      ListFooterComponent={renderBottomView}
      onEndReachedThreshold={0.5}
      onEndReached={() => getList(true)}
    />
  );
};