Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyboard height is wrong on some Android devices #24353

Closed
psegalen opened this issue Apr 8, 2019 · 6 comments
Closed

Keyboard height is wrong on some Android devices #24353

psegalen opened this issue Apr 8, 2019 · 6 comments
Labels
API: Keyboard Bug Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.

Comments

@psegalen
Copy link

psegalen commented Apr 8, 2019

🐛 Bug Report

On some Android devices (like on Huawei phones), the event passed as a parameter to the keyboardDidShow listener has a wrong endCoordinates.height property.
I guess it has something to do with the way Android soft navigation bar is handled since Dimensions.get("window") also doesn't behave the same on those devices.

To Reproduce

Clone https://github.com/psegalen/rn-android-keyboard-height-bug
Run the app and give focus to the input.
If you are on a device that has the bug, the keyboard will cover some pixels of the input, if not, the input will have the same position relative to the bottom of the window wether the keyboard is opened or not.
I have reports of the bug by 3 other Huawei phones users so it seems the behaviour only occurs on Huawei phones. Maybe it has something to do with EMUI, Huawei's Android version?

Here are screenshots demonstrating the issue:
Keyboard closed
Keyboard opened

Expected Behavior

The keyboard height should always give the correct value.

Code Example

https://github.com/psegalen/rn-android-keyboard-height-bug

Environment

React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Memory: 2.43 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.3.0 - ~/.nvm/versions/node/v11.3.0/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v11.3.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 21, 23, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.1, 25.0.2, 26.0.0, 26.0.1, 26.0.2, 27.0.3, 28.0.2, 28.0.3
System Images: android-27 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.3 => 0.59.3

@kelset
Copy link
Contributor

kelset commented May 3, 2019

👋 there - sadly, in my experience

Maybe it has something to do with EMUI, Huawei's Android version?

it's related to it. Every manufacturer that has its own "flavour" of Android on the device will mess with the "standard" behaviour, one way or the other (in the past Samsung also created a ton of issues for me).

Sadly it's not really something we can account for; it would end up being an endless list of exceptions for like device model, version of flavoured OS, etc.

Because of this reason I can't think of anything actionable for this - I'm closing it for now, but if you have ideas please let's discuss them here :)

@psegalen
Copy link
Author

psegalen commented May 6, 2019

Hi @kelset! Thank you for your answer! I guess that's part of the deal with Android ... :(

@kelset
Copy link
Contributor

kelset commented May 7, 2019

Yeah sadly Android fragmentation is a real issue :(

@branislavantic87
Copy link

The real problem is swift keyboard on android devices, it return wrong height, around 15 20 px. Can we somehow get type of keyboard that android phone is using?

@Nasseratic
Copy link

@kelset Okay but how can other apps handle that? Are they handle a long list of exceptions? this is a killing bug for any chat app!

@kelset
Copy link
Contributor

kelset commented Jan 6, 2020

Can we somehow get type of keyboard that android phone is using?

I am not sure, maybe there is some native-side method that could be exposed?

Okay but how can other apps handle that?

I don't know - maybe they have some custom implementation?

@facebook facebook locked as resolved and limited conversation to collaborators May 3, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label May 3, 2020
facebook-github-bot pushed a commit that referenced this issue Sep 28, 2021
Summary:
fixes #27089 fixes #30191 fixes #26296 fixes #24353
Related #30052 #28004 #26536

The keyboard height of event keyboardDidShow is computed as the difference of two variables:

- The screen height excluding the Android Notch
DisplayMetricsHolder.getWindowDisplayMetrics().heightPixels returns the screen height excluding the Android Notch
- The Visible Area excluding the Keyboard, but including the Android Notch
getWindowVisibleDisplayFrame() which returns the visible area including the Android Notch

The computation of the keyboard height is wrong when the device has an Android Notch.
This pr adds the Android Notch computation for API levels 28+

More info at #27089 (comment)

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Compute Android Notch in keyboardDidShow height calculation API 28+

Pull Request resolved: #30919

Test Plan:
adding a ReactRootViewTest for keyboardDidShow verifying correct functionality on API < 28

**<details><summary>TEST CASE - BEFORE FIX</summary>**
<p>

**WITHOUT NOTCH**
- The black view on the bottom is visible
- The keyboard height is 282

| **Full Screen** | **Keyboard Did Show** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/107212700-a1fd9d00-6a07-11eb-9248-26f9c4d92ae3.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/107212590-7975a300-6a07-11eb-89f4-891a37a7c406.png"  width="300" height="" /> |

**WITH NOTCH**
- The black view on the bottom is **not** visible. The black view is not visible because keyboardDidHide is sending the wrong keyboard height value.
- The keyboard height changes to 234. The keyboard height is the same from the previous test, but the value sent from keyboardDidHide changed for the Notch.

| **Full Screen** | **Keyboard Did Show** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/107212619-81cdde00-6a07-11eb-9630-7e7c8c34d798.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/107212707-a4f88d80-6a07-11eb-9134-f077059c83a6.png"  width="300" height="" /> |

</p>
</details>

**<details><summary>TEST CASE - AFTER FIX</summary>**
<p>

**WITH NOTCH**
- The black view on the bottom is visible
- The keyboard height is 282

| **Full Screen** | **Keyboard Did Show** |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/107212619-81cdde00-6a07-11eb-9630-7e7c8c34d798.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/107349053-0d0ea880-6ac8-11eb-9695-33128080b6b8.png"  width="300" height="" /> |

</p>
</details>

Reviewed By: ShikaSD

Differential Revision: D31207989

Pulled By: cortinico

fbshipit-source-id: 0955a3884201122166c5c0ae2aca988a0ed4af53
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
API: Keyboard Bug Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants