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

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>
);

1. Run the app using react-native run-android
2. Open and close the keyboard
3. 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

[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

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