Keyboard height wrong with notches

The height of the keyboard as reported by the keyboardDidShow event is wrong when a notch is present.

React Native version: 0.59.8 (Expo 34.0.0) Tested on Android

Steps To Reproduce

1. Listen for keyboardDidShow events
2. Inspect the event details (note the height and screenY properties in particular)
3. Compare these values to Dimensions.get('screen') and Dimensions.get('window')

Expected behaviour

The height property of the keyboardDidShow event reflects the correct height of the keyboard

Actual behaviour

The height that is returned is slightly smaller than the expected value: the difference seems to be the height of the notch. I assume that the screenY property (correctly) reflects the offset from the top of the screen (upper side of the notch), but the height is calculated using the window dimensions (everything under the notch). For phones that don’t have a notch, the top of the screen and window are the same, so the height is correct. However, on phones with a notch, the top of the window is the bottom of the notch and as a result, the height is too small.

Example with actual numbers

Pixel 3 (no notch):

• screen height: 785
• window height: 737 (excludes on-screen system controls at the bottom of the screen, but includes status bar)
• keyboard screenY: 447
• keyboard height: 289

Pixel 3 XL (with notch):

• screen height: 845
• window height: 748 (excludes system controls and notch)
• keyboard screenY: 515
• keyboard height: 233

As you can see, screenY + keyboardHeight = windowHeight in both cases. As screenY is a screen coordinate, not window, this should be equal to screenHeight instead.

Snack: https://snack.expo.io/Sk_yXw9Sr

[vandrieu]

@MichalKrakow Got it working!

Before:

My App:

export default class App extends Component {
   render() {
      return (
         <MySwitchNavigator />
      )
   }
}

My component with keyboard:

const keyboardHeight = event.endCoordinates.height;

After:

My App:

export default class App extends Component {
   render() {
      return (
         <View
            style={{ flex: 1 }}
            onLayout={({ nativeEvent }) => MyConstants.realScreenHeight = nativeEvent.layout.height}
         >
         <MySwitchNavigator />
         </View>
      )
   }
}

My component with keyboard:

const keyboardHeight = MyConstants.realScreenHeight - event.endCoordinates.screenY;

Thanks!

[MichalKrakow]

@vandrieu (im using expo 30.0) Basically you cannot rely on returned keyboard height and dimensions.get(‘window’). So instead use container wrapping whole screen layout and get it’s height on ‘onLayout’ event - this is your screen height. Then ‘keyboardDidShow’ event returns correct endCoordinates.screenY value. so you get the top edge of keyboard. Subtract those and you have keyboard height. Double check if your container gets whole sceen (statusbar etc…) cause if not you have to add this in order to get correct height.