Android: KeyboardAvoidingView white-space on bottom of screen when android:windowTranslucentStatus is set to true

[hrastnik]

KeyboardAvoidingView leaves space on bottom of screen when the keyboard is closed.
This bug manifests when the android:windowTranslucentStatus is set to true. (Note that this is the case for project initialized with Expo)

React Native version:

System:
    OS: macOS 10.15.2
    CPU: (4) x64 Intel(R) Core(TM) i5-4308U CPU @ 2.80GHz
    Memory: 68.76 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    Yarn: 1.19.1 - ~/.nvm/versions/node/v12.4.0/bin/yarn
    npm: 6.13.1 - ~/.nvm/versions/node/v12.4.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 23, 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.0
      System Images: android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Steps To Reproduce

1. Initialize a new RN project
2. Add <item name="android:windowTranslucentStatus">true</item> to android/app/src/main/res/values/styles.xml
3. Copy/paste the following code to App.js

import React from 'react';
import {TextInput, View, KeyboardAvoidingView} from 'react-native';

export default () => (
  <KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
    <View
      style={{flex: 1, justifyContent: 'center', backgroundColor: 'yellow'}}>
      <TextInput placeholder="Tap here to open keyboard" />
    </View>
  </KeyboardAvoidingView>
);

4. Run the app using react-native run-android
5. Open and close the keyboard
6. Observe the white-space on the bottom of the screen

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

[patrickreck]

Have you found a solution to this?

[hrastnik]

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.

[MitchellSlavik]

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.

[Drzaln]

Have anyone found a solution for this issue?

[dhruv-toptal]

Facing same issue on RN v0.60 and <StatusBar backgroundColor={'transparent'} translucent={true} />

[devstarman]

Hi, is there any chance that this issue will be addressed soon?
I've switched to EXPO 36.0 recently and started to experience a lot of buggy behavior with KeyboardAvoidingView since :(

[MitchellSlavik]

@Drzaln @dhruv-toptal @devstarman
Since KeyboardAvoidingView is a purely js implementation, you can work around this issue in the mean time by running your own KeyboardAvoidingView. Here is what I am currently using it is just a slightly modified version of the one in react-native.
https://gist.github.com/MitchellSlavik/0cf342af5711c36d69af5224dba1f7e5

[hrastnik]

I found that behavior="height" works fine and doesn’t leave the white space on the bottom.
However iOS works weird with behavior="height", so the solution is to use:

behavior={Platform.select({ android: "height", ios: "padding" })}

[devstarman]

@hrastnik you are almost right but unfortunately, I found a bug with behavior="height" on Android and posted it here: #28004

[josmontes]

Besides the whitespace, does anybody know a workaround on bottom tabs jumping when the keyboard closes?

[devstarman]

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

[giregk]

@Drzaln @dhruv-toptal @devstarman
Since KeyboardAvoidingView is a purely js implementation, you can work around this issue in the mean time by running your own KeyboardAvoidingView. Here is what I am currently using it is just a slightly modified version of the one in react-native.
https://gist.github.com/MitchellSlavik/0cf342af5711c36d69af5224dba1f7e5

@MitchellSlavik did you or can you create a PR ?

[giregk]

Besides the whitespace, does anybody know a workaround on bottom tabs jumping when the keyboard closes?

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, this.setState({bottom: height}) with this.setState({bottom: Platform.OS === "ios" ? height : 0}), there is no jump

[t-fritsch]

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 🙏

[barnu5]

Also having this issue

[Octaner]

Same problem with space on bottom of screen after upgrade RN from 0.60.6 to 0.61.0

[fabOnReact]

While preparing the pull request for this issue I post the following:

#24947 normalized keyboardDidHide return value as following:

but the height returned in the below line does not include the StatusBar

react-native/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

Line 687 in e23e932

PixelUtil.toDIPFromPixel(mVisibleViewArea.height()),

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 StatusBar in the computation, this seems to be only applicable when using android:windowTranslucentStatus..

My current understanding is that windowTranslucentStatus makes the window show behind a translucent StatusBar, for this reason the window height is incrased by the StatusBar height.

I'll will find a solution for this issue and publish the pull request within days.

Thanks. Best Regards.

[sanchitos]

I was working on a pure JS RN app so the approach of @MitchellSlavik was not suitable for me.
If you have the same 'problem' this package saved my life:
https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view

[wmonecke]

@MitchellSlavik Your implementation is not consistent in Android. Works on API 28 but not 29.

[fabOnReact]

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 wonder about the behavior parity between iOS and Android, since on Android you could get multiple calls from keyboard events, if happens that you have more than one ReactRootView, I wonder if there is a way to do it as it is done on iOS, where you get the event triggered just once. (therefore depending of the app, might be a performance hit on Android)

I'm proposing to write a pr to react-native-navigation as explained in my post #30770 (comment)

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 ☮️ 🙏

I'll send pr to react-native-navigation to override checkForKeyboardEvents in ReactView, if those are the views used for this scenario.

public class ReactView extends ReactRootView implements IReactView, Renderable {
    @Override
    protected void checkForKeyboardEvents() {
        super.checkForKeyboardEvents();
        // copy below logic
    }
 }

https://github.com/wix/react-native-navigation/blob/15c7a7e799f3cff9ad83b782dccc92aa1fe8a523/lib/android/app/src/main/java/com/reactnativenavigation/react/ReactView.java#L23-L43

checkForKeyboardEvents should look like this

react-native/ReactAndroid/src/main/java/com/facebook/react/ReactRootView.java

Lines 667 to 697 in 98309fa

	private void checkForKeyboardEvents() {
	getRootView().getWindowVisibleDisplayFrame(mVisibleViewArea);
	final int heightDiff =
	DisplayMetricsHolder.getWindowDisplayMetrics().heightPixels - mVisibleViewArea.bottom;
	boolean isKeyboardShowingOrKeyboardHeightChanged =
	mKeyboardHeight != heightDiff && heightDiff > mMinKeyboardHeightDetected;
	if (isKeyboardShowingOrKeyboardHeightChanged) {
	mKeyboardHeight = heightDiff;
	sendEvent(
	"keyboardDidShow",
	createKeyboardEventPayload(
	PixelUtil.toDIPFromPixel(mVisibleViewArea.bottom),
	PixelUtil.toDIPFromPixel(mVisibleViewArea.left),
	PixelUtil.toDIPFromPixel(mVisibleViewArea.width()),
	PixelUtil.toDIPFromPixel(mKeyboardHeight)));
	return;
	}
	boolean isKeyboardHidden = mKeyboardHeight != 0 && heightDiff <= mMinKeyboardHeightDetected;
	if (isKeyboardHidden) {
	mKeyboardHeight = 0;
	sendEvent(
	"keyboardDidHide",
	createKeyboardEventPayload(
	PixelUtil.toDIPFromPixel(mVisibleViewArea.height()),
	0,
	PixelUtil.toDIPFromPixel(mVisibleViewArea.width()),
	0));
	}
	}

[MayoudP]

This issue was fixed with release 0.63.3 with my pr #29292

Does this version ( 0.63.3) and fixe suggestion fixed the issues in Android 11 where Keyboard doesn't show up in KeyboardAvoidingView ? Or does it seems to you a completely different bug ? thx

[fabOnReact]

@MayoudP open and issue with a Minimum Reproducible Example and I'll have a look into it. Thanks a lot 👍

[Sargnec]

#29292

I'm using router flux with react native version 0.63.3 but still having this issue