Incorrect keyboard-height on Android

[OmarBasem]

Since upgrading to react-native v 0.67.5 in that commit I have noticed the value of window-height on my Android device has changed. The window-height value used to include the status-bar-height. After that commit, it does not include the status-bar-height. This issue happens on my Android device, but works fine on Emulator. This change in window-height causes some UI problems, for example in the maximized composer.

Expected Result

(from Emulator Pixel 3 API 30, Android v 11)

Actual Result

(from Samsung galaxy Note 10 Lite, Android v 11)

[OmarBasem]

Hi @Parveshdhull, any updates on that issue?

[Parveshdhull]

Hi @OmarBasem, I am currently on off time, So didn't got much time to look into the issue.

I can work on this later. Also Please feel free to reassign if you want to work on it.

[Parveshdhull]

hi @OmarBasem, I checked 3 devices and window-height is same, before and after upgrade

Type	Device with Notch	Device without Notch	Emulator Without Notch
Shell (Real device height)	765	672	781.090
Before Commit Window-height	732	672	781.909
After Commit Window-height	732	672	781.909
Status Bar before commit	32.33	28	49.09
Status Bar height after commit	32.33	28	49.09

So issue with composer height is not happening due to that. Probably there are some new changes after rn upgrade which is causing that issue.

Also, just to be sure, are you using same device as before for checking, because as you can see devices with notch doesn't include status bar height by default, and this is known issue. More information on that:
#14633 #14639 (comment) #15164

[OmarBasem]

Thanks a lot @Parveshdhull for checking this issue.
Yes, I am using same device as before.

Probably there are some new changes after rn upgrade which is causing that issue.

I am going to double-check if the RN upgrade is the first commit where this issue is happening. And whether the commit right before it is not cauing the issue.

[OmarBasem]

@Parveshdhull it is indeed caused from the RN upgrade.

Here is how it looks the commit right before the upgrade:

And here is how it looks the commit that upgrades RN (PR):

I have also noticed one of the QAs having this issue on their device. You can see in the video in that comment at second 00:12 when the composer is maximized that it doesn't look right.

[Parveshdhull]

window-height is still same, maybe something else changed during upgrade?

[OmarBasem]

Oh.. it seems it's happening on a few devices only.

[OmarBasem]

@Parveshdhull This issue is reproducible on Samsung S23 [Android 13] (which is the latest Samsung line-up). So I think this issue needs to be fixed. I will try to investigate more what's wrong.

I see there are issues in react-native repo regarding this problem: facebook/react-native#23693 (comment)

[OmarBasem]

@VladimrLitvinenko can you tell me which Android device were you using in that video: #15818 (comment)

[VolodLytvynenko]

@VladimrLitvinenko can you tell me which Android device were you using in that video: #15818 (comment)

@OmarBasem Real device: Huawei p20 light, android 9

[Parveshdhull]

I see there are issues in react-native repo regarding this problem: facebook/react-native#23693 (comment)

Research notes on this issue:
#14633
#14639 (comment)
#15164

[OmarBasem]

I checked 3 devices and window-height is same, before and after upgrade

@Parveshdhull can you let me know the devices you checked on

[OmarBasem]

So the problem is actually from the keyboard height.

Keyboard height before upgrade: 267
Keyboard-height after upgrade: 294

The difference between these 2 values is 27 which is exactly the status-bar height on that device, which made me think it's an issue with window-height and status bar height. Not sure if it is somehow related to the status bar height or just a coincidence.

[OmarBasem]

So a workaround for this is to subtract the keyboard's event screenY position from the window-height. This should give the right keyboard height.