kirillzyusko
Modal layout offset issue with react-native-keyboard-controller on Android 10 (extra top and bottom space)
Describe the bug When using react-native-keyboard-controller with a Modal component on older Android OS versions (e.g., Android 10), the modal content displays with unintended empty space at the top and bottom of the screen.
Repo for reproducing You can clone this and check the issue. https://github.com/sufian1999/TestApp
To Reproduce Steps to reproduce the behavior:
- Clone the repo.
- Press the Sign Out button. Modal will open, and you'll see the issue.
- When you remove Keyboard Provider, the extra spaces are removed.
Expected behavior Modal must behave normally. No extra spaces.
Screenshots
Smartphone (please complete the following information):
- Desktop OS: Windows 10
- Device: I used the emulator Google Pixel 3a with Android 10
- OS: Android 10
- RN version: 0.80.2
- RN architecture: Old/Paper
- JS engine: Hermes
- Library version: 1.18.3
Additional context I tested this issue on Android versions 10, 11, 13, 14, and 15. The issue occurs only on Android 10.
I’m experiencing a similar issue. When using react-native-keyboard-controller on Android devices, I sometimes get unexpected extra space at the top (below the status bar) and at the bottom (above the navigation bar) of my app layout. It took me quite some time to track down the cause. With a small code change, the extra spaces temporarily disappeared, but they reappeared after rerunning the app or creating a new build.
- if keyboard controller is not active modal is coming
- if keyboard controller is active modal is coming but stuck at top left.
I am experiencing the exact same issue, but only when building the apk for production on a physical device (S10 on Android 12). It works fine when working in dev mode with metro on both the same physical device and emulator.
I am currently running react native 0.76.6 and the workaround I found is to downgrade from 1.18.1 to 1.17.5.
