Search code examples
keyboardreact-native

'keyboardDidHide' returns null instead of an object


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!!


Solution

  • 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.