-
Notifications
You must be signed in to change notification settings - Fork 24.3k
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
Android: KeyboardAvoidingView white-space on bottom of screen when android:windowTranslucentStatus is set to true #27526
Comments
Have you found a solution to this? |
Not really. I set the behaviour to height as it seems to work better sometimes, but it's not a solution. I'm just waiting if a fix comes soon, otherwise I'll try rolling my own KeyboardAvoidingView. |
After some digging, this looks like it was caused by the keyboardDidHide event getting actual values on Android #24947. KeyboardAvoidingView is assuming that event will come back with no value and it will set it's bottom state value to 0. The values in the keyboardDidHide event are those from View.getWindowVisibleDisplayFrame(), which is the visible frame of the device without the statusbar since anything under the status bar would not be visible to the user. This causes the KeyboardAvoidingView to think that there is a keyboard the height of the statusbar still on the screen and causes the white line at the bottom. |
Have anyone found a solution for this issue? |
Facing same issue on RN v0.60 and |
Hi, is there any chance that this issue will be addressed soon? |
@Drzaln @dhruv-toptal @devstarman |
I found that behavior="height" works fine and doesn’t leave the white space on the bottom. behavior={Platform.select({ android: "height", ios: "padding" })} |
Besides the whitespace, does anybody know a workaround on bottom tabs jumping when the keyboard closes? |
@MitchellSlavik I actually have not noticed your suggestion and I'm pleased to report that it's working fabulously! Thank you very much! The question remains why nobody from react-native team checked this issue reported in multiple posts if the fix is available and only needs to be included into next official release as a fix. |
@MitchellSlavik did you or can you create a PR ? |
if you are using @MitchellSlavik 's solution, I found that instead of using his _onKeyboardHide method, if you keep using _onKeyboardChange and replace , at the end of that method, |
Not sure how this is related, but I noticed the KeyboardAvoidingView also has problems of height/padding restoration when changing orientation on android : rotating the phone from portrait to landscape and then back to portrait results in unwanted spacing at the bottom of the view. Using @MitchellSlavik hack seems to resolve this issue too ! thanks a lot 🙏 |
Also having this issue |
Same problem with space on bottom of screen after upgrade RN from 0.60.6 to 0.61.0 |
While preparing the pull request for this issue I post the following: #24947 normalized but the
I changed the height to 900 in my case and the white bar does not show I'm confident that I can publish pull request to fix this issue. @MitchellSlavik is probably right saying that getWindowVisibleDisplayFrame does not include the My current understanding is that I'll will find a solution for this issue and publish the pull request within days. Thanks. Best Regards. |
I was working on a pure JS RN app so the approach of @MitchellSlavik was not suitable for me. |
…s=true (#29292) Summary: This issue fixes #27526, related issue #27089 Avoid returning the wrong screenY coordinates on event keyboardDidHide. getWindowVisibleDisplayFrame retrieves the overall visible display size in which the window this view is attached to has been positioned in. This takes into account screen decorations above the window, for both cases where the window itself is being position inside of them or the window is being placed under then and covered insets are used for the window to position its content inside. In effect, this tells you the available area where content can be placed and remain visible to users, since anything below the StatusBar is not visible to the user, the method does not work with translucent StatusBar (android:windowTranslucentStatus). This commit fixes this issues removing the white bar at the bottom of the view when using windowTranslucentStatus. ## 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] - keyboardDidHide wrong screenY coordinates with windowTranslucentStatus=true Pull Request resolved: #29292 Test Plan: Works in all scenarios, but **I did not change RNTester `windowTranslucentStatus`**. I would like to discuss the potential breaking changes connected to not using [getWindowVisibleDisplayFrame](https://developer.android.com/reference/android/view/View#getWindowVisibleDisplayFrame(android.graphics.Rect)) with `keyboardDidHide`. I would be happy to build an alternative functionality to calculate the WindowVisibleDisplayFrameHeight under request from the Facebook Team. **WITHOUT** `android:windowTranslucentStatus` | **BEFORE** | |:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/86804255-0eca4680-c077-11ea-8c79-95ba297d05ba.gif" />| | **AFTER** | |:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/86804265-10940a00-c077-11ea-8cb8-a304cc5de363.gif" /> | **WITH** `android:windowTranslucentStatus` | **BEFORE** | |:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/86804458-3a4d3100-c077-11ea-8f3e-7c43eaa08d70.gif" height="" />| | **BEFORE (log)** | |:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/86806330-0d018280-c079-11ea-9266-c3bcf23a35da.png" height="" />| | **AFTER** | |:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/86804464-3b7e5e00-c077-11ea-8487-34c87f076e5f.gif" height="" /> | | **AFTER (log)** | |:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/86806042-c4e26000-c078-11ea-9c3c-cac5319bef65.png" height="" /> | RNTester **WITHOUT** `android:windowTranslucentStatus` | **BEFORE** | **AFTER** | |:-------------------------:|:-------------------------:| | <img src="https://user-images.githubusercontent.com/24992535/86805348-176f4c80-c078-11ea-8e2a-e2d84af5c278.gif" width="300" height="" />| <img src="https://user-images.githubusercontent.com/24992535/86805324-13432f00-c078-11ea-9e70-fa2606eee86b.gif" width="300" height="" /> | I remain available to do improvements. Thanks a lot. Fabrizio. Reviewed By: JoshuaGross Differential Revision: D22521125 Pulled By: mdvacca fbshipit-source-id: e2cb90163abb1baa00b1916e431971b011522565
@MitchellSlavik Your implementation is not consistent in Android. Works on API 28 but not 29. |
This issue was fixed with release 0.63.3 with my pr #29292 I quote the message from @andres-torres-marroquin in #30770 (comment)
I'm proposing to write a pr to I would be happy to receive your feedback as I'm evaluating several potential solutions, including writing a pr to reverse this change or find an alternative solution. I will update #30770 with any new idea, please join the conversation. Thanks a lot ☮️ 🙏
public class ReactView extends ReactRootView implements IReactView, Renderable {
@Override
protected void checkForKeyboardEvents() {
super.checkForKeyboardEvents();
// copy below logic
}
}
react-native/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java Lines 667 to 697 in 98309fa
|
@MayoudP open and issue with a Minimum Reproducible Example and I'll have a look into it. Thanks a lot 👍 |
I'm using router flux with react native version 0.63.3 but still having this issue |
KeyboardAvoidingView leaves space on bottom of screen when the keyboard is closed.
This bug manifests when the
android:windowTranslucentStatus
is set totrue
. (Note that this is the case for project initialized with Expo)React Native version:
Steps To Reproduce
<item name="android:windowTranslucentStatus">true</item>
toandroid/app/src/main/res/values/styles.xml
App.js
react-native run-android
Describe what you expected to happen:
It's expected for the yellow View to take up the whole space.
Snack, code example, screenshot, or link to a repository:
https://snack.expo.io/@hrastnik/keyboardavoidingview-bug
The text was updated successfully, but these errors were encountered: