`KeyboardAvoidingView` with translucent status bar leaves space at the bottom of the screen on Android

[QichenZhu]

Description

When android:windowTranslucentStatus is set to true, KeyboardAvoidingView displays a white space at the bottom of the screen after the soft keyboard closes.

This is the same as https://github.com/facebook/react-native/issues/27526.

Steps to reproduce

1. Build the reproducer for Android with New Arch enabled.

cd ReproducerApp
yarn
yarn android

2. Start Metro.

npx react-native start

3. Launch the app.

4. Tap the text to open the soft keyboard.

5. Close the soft keyboard.

React Native Version

0.75.4

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: Linux 5.15 Linux Mint 21.3 (Virginia)
  CPU: (6) x64 AMD Ryzen 5 3500X 6-Core Processor
  Memory: 24.93 GB / 39.16 GB
  Shell:
    version: 5.1.16
    path: /bin/bash
Binaries:
  Node:
    version: 20.15.1
    path: ~/.nvm/versions/node/v20.15.1/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v20.15.1/bin/yarn
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v20.15.1/bin/npm
  Watchman:
    version: 20231008.002904.0
    path: /usr/local/bin/watchman
SDKs:
  Android SDK:
    API Levels:
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.3
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-34 | Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.4
    wanted: 0.75.4
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

N/A

Reproducer

https://github.com/QichenZhu/reproducer-react-native-keyboard-avoiding-view-android

Screenshots and Videos

https://github.com/user-attachments/assets/6eaf5656-9617-469c-bbf0-e461277a4612

[QichenZhu]

This was fixed by https://github.com/facebook/react-native/pull/29292.

But the fix was recently reverted by https://github.com/facebook/react-native/pull/45928 to address https://github.com/facebook/react-native/issues/45880.

mLastHeight includes the translucent status bar height, but in Bridgeless mode it's not set.

mVisibleViewArea.height() works in Bridgeless mode but doesn’t account for the translucent status bar.

How about using getMeasuredHeight()? It should resolve both issues.

[jja08111]

It also occurs when using WindowCompat.setDecorFitsSystemWindows(window, false).

[QichenZhu]

Hi @shubhamguptadream11, just checking on the progress of this. Let me know if there’s something I can assist with.

[VagnerNerves]

It's happening in my project: when I click on an input and open the keyboard, after closing, there is a spacing at the bottom.

[QichenZhu]

@shubhamguptadream11 This issue is still reproducible in React Native 0.77. We have a PR and another possible solution. Any chance we can make progress on this? Thanks a lot!

[danielrakaczki1]

Any update on this? Still happening with

    "react-native": "0.79.2"
    "expo": "^53.0.7",
    "expo-status-bar": "^2.2.3",

[JerakRus]

In RN 0.80 the problem persists. This is especially sad, considering that on Android 15 in MainActivity there is a forced edge-to-edge, and here we can't manage it normally if we need a keyboard.

I also assume that there are not many people who responded here - because the problem is difficult to localize. It took me about 4 hours. It would be great to raise its priority.

[Martijncvv]

Finally figured out where the problem came from.. still here with those packages: "react-native": "0.76.9", "expo": "~52.0.23", "react-native-keyboard-controller": "^1.17.5",

keywords for google search white-space, white space bottom of screen, white container keyboardAvoidingView react-native-keyboard-controller

[araujobarret]

Linked a PR where it shows an example of this issue(The fix was to remove the KeyboardAvoidingView for the affected screen). It's being triggered from another screen when the keyboard is hidden.

[skoolaidl]

Bump, same issue.

[YaAvi]

I had the same problem. I think I found a workaround: <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={keyboardVisible ? 0 : -80} \> Adding the keyboardVerticalOffset according to the status of the keyboard fixed the issue for me. I used Keyboard.addListener('keyboardDidShow', ...) and Keyboard.addListener('keyboardDidHide', ...) to update keyboardVisible

[lucaswitch]

Happening for me, thats very weird.

[vanillafrosty]

Same issue here

[lucaswitch]

The only way that i could solve that is basically removing keyboardavoidingview on android.