Why does KeyboardController leave blank space or space of bottom after restarting the app?

[agusstingalvan]

🐞 Describe the bug

When I wrap my app with KeyboardController, a blank space is added underneath the screen content. I've tried several approaches—switching library versions, wrapping KeyboardController in different places, and testing across screens—but the issue persists.

It displays fine when I first launch the app and interact with inputs. However, if I close and reopen the app, the blank space consistently appears again beneath the UI, as if the keyboard padding remains active even when the keyboard is dismissed.

Code snippet

To Reproduce

1. Steps to reproduce the behavior:
2. Wrap the app root with .
3. Run the app on a physical Android device (e.g., Samsung A21).
4. Interact with a screen that contains an input.
5. Close and reopen the app.
6. Observe the blank space added at the bottom of the screen.

Expected behavior
The screen should display correctly after reopening the app, without leaving any additional blank space or layout shift caused by the keyboard handler.

Screenshots

Smartphone (please complete the following information):

• OS: Android 11 (Samsung A21)
• Desktop OS: Windows 11 (for development)
• React Native version: 0.76.7
• React Native architecture: Old architecture
• Library versions:
  react-native-keyboard-controller: ^1.15.2
  react-native-screens: ^4.4.0

I check the #587
But dont found a solution

[kirillzyusko]

Hey @agusstingalvan

It indeed looks like a bug - is it possible to prepare a reproduction example? Without the repro I don't think I can help a lot - only give a guidance of what to try etc 🤷‍♂

[kirillzyusko]

@agusstingalvan would you mind to try latest 1.18.1 version and see if the issue is till there?..

In a meantime I'll try to reproduce the bug in example app using Samsung device!

[kirillzyusko]

Screen.Recording.2025-07-23.at.18.05.57.mov

This is how it works in example app on latest version (Samsung Galaxy A24, Android 13, library version 1.18.1, react-native version 0.78.0)

[roniemartinez]

We are having the same issue on Samsung Galaxy Note 10.

• Expo SDK 52
• react-native 0.76.9
• We are using SafeAreaView and Stack so probably that has an effect?

The only solution was setting statusBarTranslucent and navigationBarTranslucent to true but they seem to be unrelated to the bug, or at least it's just a side effect.

<KeyboardProvider statusBarTranslucent={true} navigationBarTranslucent={true}>
    <SafeAreaView style={{ flex: 1 }}>
        <Stack ...
        </Stack>
    </SafeAreaView>
</KeyboardProvider>

[Ejdamm]

I have the same problem with Android 11 and 12 and I traced it to StatusBar.setHidden(false). I could reproduce it in the example app by putting this in App.tsx above the return statement.

React.useEffect(() => {
  StatusBar.setHidden(false);
}, []);

[agusstingalvan]

@agusstingalvan¿Te importaría probar la última 1.18.1versión y ver si el problema persiste?

Mientras tanto, intentaré reproducir el error en la aplicación de ejemplo usando el dispositivo Samsung.

Hey, sorry, I had GitHub notifications disabled! Yes! I think it was a cache issue or something weird. Since I checked again, the bottom white bar error hasn't reappeared very rarely in development.

So far, everything seems to be working! Thank you very much!

[kirillzyusko]

Hey, sorry, I had GitHub notifications disabled! Yes! I think it was a cache issue or something weird. Since I checked again, the bottom white bar error hasn't reappeared very rarely in development.

So far, everything seems to be working! Thank you very much!

@agusstingalvan Okay, glad to know that!

I have the same problem with Android 11 and 12 and I traced it to StatusBar.setHidden(false). I could reproduce it in the example app by putting this in App.tsx above the return statement.

@Ejdamm Interesting, will try to reproduce on my machine too!

[kirillzyusko]

@Ejdamm I can not reproduce it using Android emulator:

Are you testing on a real device? Is the problem reproducible on emulator for you?

[Ejdamm]

I have only tested on emulator and can reproduce on the same emulator as you (Pixel pro API 31). It doesn't happen every time but at least more than 50%. Try alternating between reloading metro and shutting off the app completely and also try to do them both. The gap appears without the need of scrolling.

It's barely visible because the color is almost the same as the background but it covers example 14.

[sufian1999]

@kirillzyusko

Testing on Real Device Google Pixel 3a (Android 12).

"react": "18.3.1",
"react-native": "0.77.3",
"react-native-keyboard-controller": "1.18.2"

I can still see a white color gap. In react-native: 0.73.0, it was working fine.

My App.tsx:

Important Notes:

1. With this lib, there is no white space gap issue on Android 15.

2. With this lib, the white space gap issue comes on Android < 15.

[sufian1999]

We are having the same issue on Samsung Galaxy Note 10.

• Expo SDK 52
• react-native 0.76.9
• We are using SafeAreaView and Stack so probably that has an effect?

The only solution was setting statusBarTranslucent and navigationBarTranslucent to true but they seem to be unrelated to the bug, or at least it's just a side effect.

<KeyboardProvider statusBarTranslucent={true} navigationBarTranslucent={true}>
    <SafeAreaView style={{ flex: 1 }}>
        <Stack ...
        </Stack>
    </SafeAreaView>
</KeyboardProvider>

To solve the white gap issue and fulfill my app needs. I only added this in Keyboard Provider:
navigationBarTranslucent={Platform.OS === 'android' && Platform.Version >= 35 ? false : true}

App.tsx: