A React Native hook for handling RefreshControl state & callbacks.

useRefreshControl.js

import React, { useRef, useState } from 'react';
import { RefreshControl } from 'react-native';

const useRefreshControl = (refreshesRequested = 1) => {
  const refreshesCompleted = useRef(0);
  const [isRefreshing, setIsRefreshing] = useState(false);

  const handleRefreshStart = () => {
    refreshesCompleted.current = 0;
    setIsRefreshing(true);
  };

  const handleRefreshEnd = () => {
    refreshesCompleted.current += 1;

    if (refreshesCompleted.current === refreshesRequested) {
      setIsRefreshing(false);
    }
  };

  const refreshControl = (
    <RefreshControl
      refreshing={isRefreshing}
      onRefresh={handleRefreshStart}
    />
  );

  return [refreshControl, isRefreshing, handleRefreshEnd];
};

export default useRefreshControl;