How to get a height of a Keyboard in React-Native?
This is what I did:
If the app has "Authorization / Log-in / Sign-up screen" then:
-
In componentWillMount add KeyboardListeners as explained here:
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow); this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
Add autoFocus to e-mail / phone number / any other "first" TextInput on the page, so that when the screen loads, the Keyboard pops-up.
-
In
_keyboardDidShow
function, that is used as a KeyboardListener, do the follows:_keyboardDidShow(e) { this.props.navigation.setParams({ keyboardHeight: e.endCoordinates.height, normalHeight: Dimensions.get('window').height, shortHeight: Dimensions.get('window').height - e.endCoordinates.height, }); }
Dimensions is an API of React-Native, do not forget to import it just like you import any React-Native component.
-
After that, while redirecting to the next page, pass these params and do not forget to keep on passing them to other screens in order not to lose this data:
this.props.navigation.navigate('pageName', { params: this.props.navigation.state.params });
I also needed a hook for it, so that is how I get the height of the keyboard (largely inspired by the other answer), the code example is in TypeScript:
import { useEffect, useState } from 'react';
import { Keyboard, KeyboardEvent } from 'react-native';
export const useKeyboard = () => {
const [keyboardHeight, setKeyboardHeight] = useState(0);
function onKeyboardDidShow(e: KeyboardEvent) { // Remove type here if not using TypeScript
setKeyboardHeight(e.endCoordinates.height);
}
function onKeyboardDidHide() {
setKeyboardHeight(0);
}
useEffect(() => {
const showSubscription = Keyboard.addListener('keyboardDidShow', onKeyboardDidShow);
const hideSubscription = Keyboard.addListener('keyboardDidHide', onKeyboardDidHide);
return () => {
showSubscription.remove();
hideSubscription.remove();
};
}, []);
return keyboardHeight;
};
then in your component:
const keyboardHeight = useKeyboard();
console.log(keyboardHeight);
For those of you still looking for an answer to this now you can use hooks.
import { useKeyboard } from '@react-native-community/hooks'
//Then keyboard like this
const keyboard = useKeyboard()
console.log('keyboard isKeyboardShow: ', keyboard.keyboardShown)
console.log('keyboard keyboardHeight: ', keyboard.keyboardHeight)