[Android] KeyboardProvider adds additional space above react-navigation header

[roancoetzee]

Describe the bug

• Adding the KeyboardProvider on Android causes the react-navigation headers to increase in size. When the KeyboardProvider is removed the headers return to their default size.
• Issues starts with Android 13+. On Android 12 and below it works as expected.
• iOS doesn't appear to be affected.

Code snippet
See index.js from the example repo on how the KeyboardProvider is added. It is worth noting that the order in which the KeyboardProvider is being added doesn't seem to make a difference.

Repo for reproducing
Repo

To Reproduce
Steps to reproduce the behavior:

On Android 13+

1. Run the app on an Android (Emulator or Device).
2. Take note of the "Home" (green) header size.
3. Comment out the KeyboardProvider in index.js and rebuild/restart the app. Hot reloading doesn't always trigger a change.

Expected behavior
See the screenshots below for more context. We expect the header size to not change when the KeyboardProvider is added.

Screenshots

**Smartphone **

• Desktop OS: [MacOS 15.3.1]
• Device: [Android]
• OS: [Android 13+]
• RN version: [0.79.3]
• RN architecture: [new]
• JS engine: [Hermes]
• Library version: [1.17.3]

Additional context
I was unsure whether to post this issue here or in the react-navigation repo but when I came across this comment I thought this would be a good place to start given that it only happens when I introduce the KeyboardProvider. However I am happy to move this if we are sure this is a react-navigation issue?

[kirillzyusko]

Hey @roancoetzee

Thank you for your effort in writing such a detailed description ❤ And sorry for a long response - quite busy at main job right now. Let me try to clarify that question that you asked...

When you wrap your app in KeyboardProvider it moves app in edge-to-edge mode, so you don't have StatusBar/NavigationBar paddings. By default KeyboardProvider tries to match default RN behavior and it automatically adds padding to your app, so that app looks as before (StatusBar has a gray background, NavigationBar has a dark background color), but! react-native-safe-area-context already recognizes, that app UI will overlap with system elements (because edge-to-edge mode is enabled), so it reports top/bottom insets as not-0 values, and react-navigation applies it (similar to how iOS works).

In this case both, KeyboardProvider and react-navigation tries to handle that padding - because of that header "grows" (in fact it just includes StatusBar height).

To solve that problem you can try to specify statusBarTranslucent prop on a KeyboardProvider level - in this case KeyboardProvider will not handle padding on its own, so only react-navigation + react-native-safe-area-context will handle it. HOWEVER, with the new approach StatusBar will loose its default gray color - with those changes in place the Android will match iOS design (and it will simplify your development). But if you still want to have that gray background, then you can render it yourself just as an overlay inside the header (but as an Android user I highly recommend you to not do it)

Let me know if you have any other question 🙌

[roancoetzee]

@kirillzyusko
Thank you for the reply.
Your explanation pointed me in the right direction—my actual issue boiled down to not reading the documentation carefully. I did try statusBarTranslucent in our main project, but I never tried it in the demo repo I provided—if I had, I would have seen it working as you explained. I also noticed that in my demo repo, I forgot to include the <StatusBar> component from React Native, which also needed its own translucent prop to be set. That’s why statusBarTranslucent in our main project didn’t have any effect.
Appreciate the time you took to help. Great job with the repo, by the way.

[kirillzyusko]

Thank you @roancoetzee

Feel free to post any other issues if you encounter any problems ❤