I'm currently working on a react-native
app and I'm trying to animate the layout of the login-screen when a keyboard is shown.
To track the state of the keyboard, I'm using this code:
componentDidMount() {
this.keyboardDidShowSub = Keyboard.addListener('keyboardDidShow', (event) => console.log(event));
this.keyboardDidHideSub = Keyboard.addListener('keyboardDidHide', (event) => console.log(event));
}
keyboardDidShow
is working and returning:
Object {
"endCoordinates": Object {
"height": 286,
"screenX": 0,
"screenY": 354,
"width": 360,
},
}
However, keyboardDidHide
is NOT working and returning null
.
What could cause my problem? Thank you so much for your help!!
This is expected behaviour in Android
. If you look at the underlying native code that is called when the keyboard is shown/hidden you can see what is sent back to the javascript side.
private void checkForKeyboardEvents() {
getRootView().getWindowVisibleDisplayFrame(mVisibleViewArea);
final int heightDiff =
DisplayMetricsHolder.getWindowDisplayMetrics().heightPixels - mVisibleViewArea.bottom;
if (mKeyboardHeight != heightDiff && heightDiff > mMinKeyboardHeightDetected) {
// keyboard is now showing, or the keyboard height has changed
mKeyboardHeight = heightDiff;
WritableMap params = Arguments.createMap();
WritableMap coordinates = Arguments.createMap();
coordinates.putDouble("screenY", PixelUtil.toDIPFromPixel(mVisibleViewArea.bottom));
coordinates.putDouble("screenX", PixelUtil.toDIPFromPixel(mVisibleViewArea.left));
coordinates.putDouble("width", PixelUtil.toDIPFromPixel(mVisibleViewArea.width()));
coordinates.putDouble("height", PixelUtil.toDIPFromPixel(mKeyboardHeight));
params.putMap("endCoordinates", coordinates);
sendEvent("keyboardDidShow", params);
} else if (mKeyboardHeight != 0 && heightDiff <= mMinKeyboardHeightDetected) {
// keyboard is now hidden
mKeyboardHeight = 0;
sendEvent("keyboardDidHide", null); // <- you can see here that when the keyboard is hidden it sends back null
}
}
It is worthwhile noting that in iOS
that 'keyboardWillShow'
, 'keyboardDidShow'
, 'keyboardWillHide'
and 'keyboardDidHide'
will return an object.