Wrapping my App with <KeyboardProvider> adds space on top and bottom of the screen.

[e-biba-ofti]

Describe the bug When wrapping my app with KeyboardProvider it adds space looks like it tries to do the same <SafeAreaView> does but I am already using <SafeAreaView> partially in my app as in some screens is not needed. If I just disable it <KeyboardProvider enabled={false}> then the app shows in full view.

Expected behavior The app should show in full screen

Screenshots

Smartphone (please complete the following information):

• Desktop OS: [e.g. Windows 10, MacOS 10.15.5]
• Device: Android
• OS: Android
• RN version: 0.73.2
• RN architecture: [e.g. old/new or paper/fabric]
• JS engine: [e.g. JSC, Hermes, v8]
• Library version: 1.13.3

[kirillzyusko]

@e-biba-ofti have you tried to specify statusBarTranslucent and navigationBarTranslucent props on KeyboardProvider level?

[edisoni1995]

@kirillzyusko navigationBarTransparent seems to work fine but the statusBarTranslucent doesn't work. After checking it a bit more when I remove my status bar it works as expected or when I set my status bar as translucent it's working. But I don't want my status bar to be translucent as the content will be drawn under it.

[kirillzyusko]

@edisoni1995 when you wrap app in KeyboardProvider it will move to edge-to-edge mode and app will be drawn under status bar. Since edge-to-edge is not a default mode for RN app the KeyboardProvider will try to match default RN behavior and add paddings.

On your screenshot these white paddings most likely are caused by this fact (i. e. it's paddings from KeyboardProvider and for me it looks like you already handle safe-area paddings somewhere in your code). To remove these padding you will need to add navigationBarTranslucent and statusBarTranslucent props.

statusBarTranslucent doesn't work in your case because you are using StatusBar component and translucent is false by default, so you overwrite an initial config of KeyboardProvider and you are adding white padding again.

I think in your case it'll be safe to add translucent property to StatusBar - in this case it shouldn't draw anything under StatusBar because react-native-keyboard-controller uses its own implementation (this implementation is compatible with edge-to-edge mode, unlike RN component) of StatusBar and it becomes to be used automatically when you use KeyboardProvider.

Can you share here two screenshots side by side:

• one how your current app screen looks right now without react-native-keyboard-controller integration;
• the second one is with KeyboardProvider (with translucent props) and with <StatusBar translucent /> in place?

In my understanding these screenshots should be identical.

[e-biba-ofti]

Here you have it, I made a red border just to be able to tell that some part of the content is going under the status bar. The image on the right is the one with <StatusBar translucent /> and with translucent props for KeyboardProvider.

[kirillzyusko]

@e-biba-ofti would you be able to provide a minimal reproduction example?

Something is definetely going wrong here, but without a code I can not say what exactly 😔

Would you be able also to try to comment out this line:

https://github.com/kirillzyusko/react-native-keyboard-controller/blob/7c9c450984161dcb76858184fcb2d249b4dcf8f4/android/src/main/java/com/reactnativekeyboardcontroller/modules/StatusBarManagerCompatModuleImpl.kt#L58

And re-run app again?

[e-biba-ofti]

@kirillzyusko that would be very difficult to create for now but I will try to find a minimal reproducable example. I did the change in the android file and re-build android but nothing changed.

[kirillzyusko]

@e-biba-ofti got you! Then minimal reproduction example is highly appreciate - it can significantly reduce the time needed for fixing this problem! ❤️

[RayKay91]

The issue will be resolved soon - it's been merged to react-native-screens but is yet unreleased. I posted this in another issue:

https://github.com/kirillzyusko/react-native-keyboard-controller/issues/592#issuecomment-2370922343

[kirillzyusko]

@RayKay91 oh, yeah, you are right, good catch! @e-biba-ofti did you use native-stack with navigationBar* options by any chance? If yes, then what is the version of react-native-screens did you use?

[e-biba-ofti]

Yes I am using navigationBarOptions and [email protected]

[kirillzyusko]

Well @e-biba-ofti [email protected] is highly unlikely to break something 🤔

I really can't help here 😔 If you can provide a reproduction example that would be a dope and would significantly reduce time for fixing 🙏

[rranjan14]

I am also facing this issue on android. I am getting a white space at the top of the screen. The space is roughly equal to the height of the statusbar. This is happening with react-native-screens >=3.31.0

[kirillzyusko]

@rranjan14 what is the exact version of react-native-screens in package-lock.json or yarn.lock? Can you share a snippet of data from your .lock file?

[rranjan14]

here you go @kirillzyusko

[kirillzyusko]

@rranjan14 okay, you'll need to add a patch like https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/example/patches/react-native-screens%2B3.34.0.patch or apply changes from this PR: https://github.com/software-mansion/react-native-screens/pull/2301

Both patches are identical. Hopefully new version of react-native-screens will be released and that issue will go away 😅

Alternatively you can downgrade your version to 3.31.0 (without >= modifiers).

[rranjan14]

@kirillzyusko I have been following this issue for some time now. I have tried this but to no avail sadly 😕

[kirillzyusko]

@rranjan14 okay, then, please, create a small reproduction example and I will have a look on it 👀 By the way - did you specify statusBarTranslucent property for KeyboardProvider?

[rranjan14]

@kirillzyusko I did. And also, I am using SystemBars from react-native-edge-to-edge and not StatusBar from react-native or expo-status-bar. Also, I have created this issue here with react navigation as I am facing this issue only with if I have tab navigator it works well otherwise

[kirillzyusko]

I did. And also, I am using SystemBars from react-native-edge-to-edge and not StatusBar from react-native or expo-status-bar

Well, interesting 🤔 Can you provide a minimal reproduction example?

react-native-edge-to-edge is not using deprecated API so it should work fine. If you can provide a minimal reproduction example, then it can definitely speed up the process of fixing the problem 👀

[rranjan14]

@kirillzyusko unfortunately I do not see this happening in a new project. I suspect this is a configuration issue at my end. I have tried too many things to solve but the outcome is always same. Also, what i observed is, when the value of top inset returned is not 0 from react-native-safe-area-context after first render, the white space is gone. What's happening is, after first render, the values returned from useSafeAreaInsets hook is 0 for all the sides.

[kirillzyusko]

@rranjan14 but you can try to simplify your project. In the end you'll end up with a project, where you have 5-6 files and where the issue is reproducible. And then you can share that project (or create a new project and copy all changes from your simplified project to a new project) 👀

[rranjan14]

@kirillzyusko its a big task. I'd surely try this. Will share the simplified project when I can. Thanks a lot! 🫡

[rotoxl]

In case it helps, I had the same problem and adding statusBarTranslucent and navigationBarTranslucent to the provider fixed it

<KeyboardProvider statusBarTranslucent navigationBarTranslucent>
   {children}
</KeyboardProvider>

[Tobbe]

I also have issues with extra space at the top sometimes. It only happens sometimes.

(This is what I want it to look like, and what it usually does look like.)

Sometimes I also have the same thing happening but at the bottom of the screen when the keyboard is visible. Like this (notice the yellow bar above the keyboard that hides part of the button)

So far uninstalling and then reinstalling the app has been the only way to fix it for me once it starts doing that. Here it works as expected. (No extra yellow bar between the top of the keyboard and what's visible on the screen)

Using react-native-screens 4.1.0

It happens both with dev build and preview build. It happens both with and without statusBarTranslucent + navigationBarTranslucent

I understand it's almost impossible to fix without a reproduction app. I'll see what I can do about creating one. But since it only happens sometimes it very difficult 😅

[Tobbe]

Working on a reproduction I see weird things happening both at the top and the bottom of the screen at the same time

Here's a link to the code used for the screenshot above https://github.com/Tobbe/rnkc-keyboard-padding

If I add enabled={false} to <KeyboardController> and reload the app (by pressing r) I see this, which doesn't have the extra padding neither at the top nor the bottom

---

I simplified the code for the reproduction even more. Now it's just two files.

// _layout.tsx

import { Stack } from "expo-router";
import { KeyboardProvider } from "react-native-keyboard-controller";

export default function RootLayout() {
  return (
    <KeyboardProvider>
      <Stack />
    </KeyboardProvider>
  );
}

// index.tsx

import React from "react";
import { Text, ScrollView, StyleSheet } from "react-native";

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.scrollViewContainer}>
      <Text>Foobar</Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scrollViewContainer: {
    backgroundColor: "lightpink",
    flexGrow: 1,
  },
});

[rranjan14]

Working on a reproduction I see weird things happening both at the top and the bottom of the screen at the same time

Here's a link to the code used for the screenshot above https://github.com/Tobbe/rnkc-keyboard-padding

If I add enabled={false} to <KeyboardController> and reload the app (by pressing r) I see this, which doesn't have the extra padding neither at the top nor the bottom

I simplified the code for the reproduction even more. Now it's just two files.

// _layout.tsx

import { Stack } from "expo-router";
import { KeyboardProvider } from "react-native-keyboard-controller";

export default function RootLayout() {
  return (
    <KeyboardProvider>
      <Stack />
    </KeyboardProvider>
  );
}

// index.tsx

import React from "react";
import { Text, ScrollView, StyleSheet } from "react-native";

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.scrollViewContainer}>
      <Text>Foobar</Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scrollViewContainer: {
    backgroundColor: "lightpink",
    flexGrow: 1,
  },
});

Can you try adding the react-native-edge-to-edge package and check with enabled prop set as true? It might solve it for you.

[Tobbe]

@rranjan14 Thanks! That seems to have improved things 🙂 Now I just need to start slowly adding things back one by one and see how far I can take it until my app breaks again 😆

[kirillzyusko]

react-native-screens@4 also might be not always compatible with keyboard-controller: https://github.com/software-mansion/react-native-screens/issues/2554 😔

[Tobbe]

@kirillzyusko Thank you! That might explain why rnkc sometimes just stops working altogether for me. Is there any kind of workaround right now? Or do I need to downgrade to earlier version of react-native-screens?

[kirillzyusko]

Or do I need to downgrade to earlier version of react-native-screens?

Well, this is the most proper way to resolve that now 👍

Another workaround that I discovered is mounting KeyboardProvider with some delay (however it's far from being perfect approach). I'm going to look into why the integration with RNS is broken and how it can be fixed 👀