diff --git a/README.md b/README.md index 1b2ea981..00499106 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ yarn add @react-native-community/hooks - [useDimensions](https://github.com/react-native-community/hooks#usedimensions) - [useImageDimensions](https://github.com/react-native-community/hooks#useImageDimensions) - [useKeyboard](https://github.com/react-native-community/hooks#usekeyboard) +- [useKeyboardEffect](https: //github.com/react-native-community/hooks#useKeyboardEffect) - [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) @@ -140,6 +141,20 @@ console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown) console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight) ``` +### `useKeyboardEffect` + +```js +import {useKeyboardEffect} from '@react-native-community/hooks' + +useKeyboardEffect((type, event) => { + if (type === 'keyboardDidShow') { + console.log('keyboard did show') + } else if (type === 'keyboardDidHide') { + console.log('keyboard did hide') + } +}, []) +``` + ### `useInteractionManager` ```js diff --git a/src/index.ts b/src/index.ts index a81ef316..80a9ed21 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,6 +9,7 @@ import {useInteractionManager} from './useInteractionManager' import {useDeviceOrientation} from './useDeviceOrientation' import {useLayout} from './useLayout' import {useImageDimensions} from './useImageDimensions' +import {useKeyboardEffect} from './useKeyboardEffect' export { useDimensions, @@ -22,4 +23,5 @@ export { useDeviceOrientation, useLayout, useImageDimensions, + useKeyboardEffect, } diff --git a/src/useKeyboardEffect.ts b/src/useKeyboardEffect.ts new file mode 100644 index 00000000..fb90626d --- /dev/null +++ b/src/useKeyboardEffect.ts @@ -0,0 +1,45 @@ +import {useEffect} from 'react' +import { + Keyboard, + KeyboardEventListener, + KeyboardEventName, + KeyboardEvent, +} from 'react-native' + +type EffectCallback = ( + eventType: KeyboardEventName, + event: KeyboardEvent, +) => void + +export function useKeyboardEffect( + effect: EffectCallback, + deps: React.DependencyList, +) { + useEffect(() => { + const handleKeyboardWillShow: KeyboardEventListener = (e) => { + effect('keyboardWillShow', e) + } + const handleKeyboardDidShow: KeyboardEventListener = (e) => { + effect('keyboardDidShow', e) + } + const handleKeyboardWillHide: KeyboardEventListener = (e) => { + effect('keyboardWillHide', e) + } + const handleKeyboardDidHide: KeyboardEventListener = (e) => { + effect('keyboardDidHide', e) + } + + Keyboard.addListener('keyboardWillShow', handleKeyboardWillShow) + Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow) + Keyboard.addListener('keyboardWillHide', handleKeyboardWillHide) + Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide) + + return () => { + Keyboard.removeListener('keyboardWillShow', handleKeyboardWillShow) + Keyboard.removeListener('keyboardDidShow', handleKeyboardDidShow) + Keyboard.removeListener('keyboardWillHide', handleKeyboardWillHide) + Keyboard.removeListener('keyboardDidHide', handleKeyboardDidHide) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, deps) +}