How to get a height of a Keyboard in React-Native?
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)
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);