feat: add useRefresh hook (#320)

Co-authored-by: Pavlos Vinieratos <[email protected]>

Author: kanelloc

README.md

@@ -30,6 +30,7 @@ yarn add @react-native-community/hooks
 - [useInteractionManager](https://github.com/react-native-community/hooks#useinteractionmanager)
 - [useDeviceOrientation](https://github.com/react-native-community/hooks#usedeviceorientation)
 - [useLayout](https://github.com/react-native-community/hooks#uselayout)
+- [useRefresh](https://github.com/react-native-community/hooks#useRefresh)
 
 ### `useAccessibilityInfo`
 
@@ -131,6 +132,27 @@ console.log('layout: ', layout)
 <View onLayout={onLayout} style={{width: 200, height: 200, marginTop: 30}} />
 ```
 
+### `useRefresh`
+
+```js
+import { useRefresh } from '@react-native-community/hooks'
+
+const fetch = () => {
+    return new Promise((resolve) => setTimeout(resolve, 500))
+}
+
+const { isRefreshing, onRefresh } = useRefresh(fetch);
+
+<ScrollView 
+  refreshControl= {
+    <RefreshControl
+      refreshing={isRefreshing}
+      onRefresh={onRefresh}
+    />
+  }
+/>
+```
+
 [version-badge]: https://img.shields.io/npm/v/@react-native-community/hooks.svg?style=flat-square
 [package]: https://www.npmjs.com/package/@react-native-community/hooks
 

src/index.ts

@@ -6,6 +6,7 @@ import {useInteractionManager} from './useInteractionManager'
 import {useDeviceOrientation} from './useDeviceOrientation'
 import {useLayout} from './useLayout'
 import {useImageDimensions} from './useImageDimensions'
+import {useRefresh} from './useRefresh'
 
 export {
   useAccessibilityInfo,
@@ -16,4 +17,5 @@ export {
   useInteractionManager,
   useKeyboard,
   useLayout,
+  useRefresh,
 }

src/useRefresh.test.ts

@@ -0,0 +1,27 @@
+import {act, renderHook} from '@testing-library/react-hooks'
+import {useRefresh} from './useRefresh'
+
+const DELAY_IN_MS = 300
+jest.useFakeTimers()
+describe('useRefresh', () => {
+  it('should invoke refresh and return correct refreshing state', () => {
+    const wait = () => {
+      return new Promise((resolve) => setTimeout(resolve, DELAY_IN_MS))
+    }
+
+    const {result} = renderHook(() => useRefresh(wait))
+
+    const spy = jest.spyOn(result.current, 'onRefresh')
+    act(() => {
+      result.current.onRefresh()
+    })
+
+    expect(result.current.isRefreshing).toBe(true)
+    expect(spy).toHaveBeenCalledTimes(1)
+    act(() => {
+      jest.advanceTimersByTime(DELAY_IN_MS)
+    })
+
+    expect(result.current.isRefreshing).toBe(false)
+  })
+})

src/useRefresh.ts

@@ -0,0 +1,17 @@
+import {useState} from 'react'
+
+export function useRefresh(refresh: () => Promise<unknown>) {
+  const [isRefreshing, setIsRefreshing] = useState<boolean>(false)
+
+  async function onRefresh() {
+    setIsRefreshing(true)
+
+    try {
+      await refresh()
+    } finally {
+      setIsRefreshing(false)
+    }
+  }
+
+  return {isRefreshing, onRefresh}
+}