import { useEffect , useState } from 'react' ; import { Keyboard } from 'react-native' ; export type KeyboardVisibility = 'appearing' | 'visible' | 'hiding' | 'hidden' ; export function useKeyboardVisibility ( ) { const [ visibility , setVisibility ] = useState < KeyboardVisibility > ( 'hidden' ) ; useEffect ( ( ) => { const handleWillShow = ( ) => { setVisibility ( 'appearing' ) ; } ; const handleDidShow = ( ) => { setVisibility ( 'visible' ) ; } ; const handleWillHide = ( ) => { setVisibility ( 'hiding' ) ; } ; const handleDidHide = ( ) => { setVisibility ( 'hidden' ) ; } ; Keyboard . addListener ( 'keyboardWillShow' , handleWillShow ) ; Keyboard . addListener ( 'keyboardDidShow' , handleDidShow ) ; Keyboard . addListener ( 'keyboardWillHide' , handleWillHide ) ; Keyboard . addListener ( 'keyboardDidHide' , handleDidHide ) ; return ( ) => { Keyboard . removeListener ( 'keyboardWillShow' , handleWillShow ) ; Keyboard . removeListener ( 'keyboardDidShow' , handleDidShow ) ; Keyboard . removeListener ( 'keyboardWillHide' , handleWillHide ) ; Keyboard . removeListener ( 'keyboardDidHide' , handleDidHide ) ; } ; } , [ visibility ] ) ; return visibility ; }