keyboard event height react native
import { useEffect, useState } from 'react';
import { Keyboard, KeyboardEvent } from 'react-native';
export const useKeyboard = (): [number] => {
const [keyboardHeight, setKeyboardHeight] = useState(0);
function onKeyboardDidShow(e: KeyboardEvent): void {
setKeyboardHeight(e.endCoordinates.height);
}
function onKeyboardDidHide(): void {
setKeyboardHeight(0);
}
useEffect(() => {
Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
return (): void => {
Keyboard.removeListener('keyboardDidShow', onKeyboardDidShow);
Keyboard.removeListener('keyboardDidHide', onKeyboardDidHide);
};
}, []);
return [keyboardHeight];
};
then in your component:
const [keyboardHeight] = useKeyboard();
console.log(keyboardHeight);