React Native Flatlist hooks pagination example

flatlist-hooks-pagination.js

import ActivityIndicator from '@components/ActivityIndicator';
import Box from '@components/Box';
import { useNavigation } from '@react-navigation/native';
import React, { useEffect, useState } from 'react';
import { FlatList, RefreshControl } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import * as Ducks from '../../ducks';
import Item from '../components/Item';

const VIEWABILITY_CONFIG = {
  minimumViewTime: 3000,
  viewAreaCoveragePercentThreshold: 100,
  waitForInteraction: true,
};

const PAGINATION_LIMIT = 1;

const INITIAL_PARAMS = {
  data: {
    active: 1,
  },
  metadata: {
    pagination: {
      page: 1,
      limit: PAGINATION_LIMIT,
    },
  },
  restartPagination: true,
};

function Active() {
  const [isRefreshing, setIsRefreshing] = useState(false);
  const dispatch = useDispatch();
  const { activeAds, activeAdsPagination, activeAdsLoading } = useSelector((state) => state.ads);

  const navigation = useNavigation();

  const handlePress = () => {
    navigation.navigate('ads-detail');
  };

  const fetchActiveAds = (params) => {
    dispatch(Ducks.fetchActiveAds(params));
  };

  useEffect(() => {
    fetchActiveAds(INITIAL_PARAMS);
  }, []);

  useEffect(() => {
    if (!activeAdsLoading) {
      setIsRefreshing(false);
    }
  }, [activeAdsLoading]);

  const renderItem = ({ item }) => {
    return <Item onPress={handlePress} />;
  };

  const renderItemSeparator = () => <Box py={1} />;

  const renderFooter = () => {
    return activeAdsLoading ? (
      <Box py={1}>
        <ActivityIndicator />
      </Box>
    ) : (
      renderItemSeparator()
    );
  };

  const keyExtractor = ({ id }) => String(id);

  const loadMoreResults = () => {
    const { page, pages } = activeAdsPagination;
    const nextPage = page + 1;

    if (nextPage <= pages) {
      const params = {
        data: {
          active: 1,
        },
        metadata: {
          pagination: {
            page: nextPage,
            limit: PAGINATION_LIMIT,
          },
        },
        restartPagination: false,
      };

      dispatch(Ducks.fetchActiveAds(params));
    }
  };

  const handleRefresh = () => {
    setIsRefreshing(true);
    fetchActiveAds(INITIAL_PARAMS);
  };

  return (
    <FlatList
      data={activeAds}
      ItemSeparatorComponent={renderItemSeparator}
      keyExtractor={keyExtractor}
      ListFooterComponent={renderFooter}
      ListHeaderComponent={renderItemSeparator}
      onEndReached={loadMoreResults}
      onEndReachedThreshold={0.8}
      refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />}
      removeClippedSubviews={false}
      renderItem={renderItem}
      viewabilityConfig={VIEWABILITY_CONFIG}
    />
  );
}

export default Active;