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

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

Open
QichenZhu opened this issue Oct 21, 2024 · 4 comments · May be fixed by #48171
Open

Comments

@QichenZhu
Copy link
Contributor

QichenZhu commented Oct 21, 2024

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 #27526.

Steps to reproduce

  1. Build the reproducer for Android with New Arch enabled.
cd ReproducerApp
yarn
yarn android
  1. Start Metro.
npx react-native start
  1. Launch the app.

  2. Tap the text to open the soft keyboard.

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

Record_2024-10-22-05-45-02-2024-10-21.16_46_49.479.mp4
@QichenZhu
Copy link
Contributor Author

QichenZhu commented Oct 21, 2024

This was fixed by #29292.

374174748-2166caf1-f7b5-4164-af2a-3d6879111fd0

But the fix was recently reverted by #45928 to address #45880.

374173148-9be75a99-519d-40b5-b79e-d50712cbdea2

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
Copy link

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

@QichenZhu
Copy link
Contributor Author

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

@VagnerNerves
Copy link

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.

@Kudo Kudo linked a pull request Dec 8, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants