Keyboard height wrong with notches

[TuurDutoit]

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

[TuurDutoit]

I think this is related to this line, where getWindowDisplayMetrics() should be getScreenDisplayMetrics()

[MichalKrakow]

Is there a workaround for this?
Same issue on galaxy s10 +

[TuurDutoit]

As the screenY property seems to be correct, you probably can by relying on that, but it's going to be hard. Depends on what you try to achieve though.

[MichalKrakow]

Thanks - this worked. Other thing to notice about Dimensions.get('window') is that when using gesture action bar on s10+ it returns wrong height value so instead of depending on this you're better of with container onLayout values.

[vandrieu]

@MichalKrakow could you please help me understand how you fixed it? I can't figure this out.

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

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

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[TuurDutoit]

This is still a bug in react-native AFAIK.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.