The library interacts oddly with Android header height in @react-navigation/native-stack

[DragomirAndrei19]

Describe the bug
On Android, wrapping the app root with <KeyboardProvider> can either unwantedly add or remove padding around the app header, depending on whether edgeToEdgeEnabled is set to true or false in android/gradle.properties.

1. If edgeToEdgeEnabled=true and <KeyboardProvider> is present, the entire header becomes too small.
2. If edgeToEdgeEnabled=true and <KeyboardProvider> is present, the entire header becomes too big

CASE 3 issue has also been referenced here: react-navigation/react-navigation#12653 with multiple users confirming it's the interaction with this library.

It's worth noting that simply removing the provider doesn't re-render the app; I had to rebuild it in order to see the changes.

At one point, I had this in my metro logs:

ERROR [Invariant Violation: Tried to register two views with the same name KeyboardControllerView]
ERROR [Invariant Violation: Tried to register two views with the same name KeyboardGestureArea]
ERROR [Invariant Violation: Tried to register two views with the same name OverKeyboardView]
ERROR [Invariant Violation: Tried to register two views with the same name KeyboardBackgroundView]
ERROR [Invariant Violation: Tried to register two views with the same name KeyboardExtender]

CASE 1: edgeToEdgeEnabled=true and <KeyboardProvider/> ❌	CASE 2: edgeToEdgeEnabled=true WITHOUT <KeyboardProvider/> ✅
CASE 3: edgeToEdgeEnabled=false and <KeyboardProvider/> ❌	CASE 4: edgeToEdgeEnabled=false WITHOUT <KeyboardProvider/> ✅

Code snippet

import * as React from 'react';
import { View, Text, StatusBar } from 'react-native';

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { KeyboardProvider } from 'react-native-keyboard-controller';

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

/* -------------------- Screens -------------------- */

function HomeScreen() {
  return (
    <SafeAreaView
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text>Home Screen</Text>
    </SafeAreaView>
  );
}

/* -------------------- Navigation -------------------- */

const Stack = createNativeStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerTitleAlign: 'center',
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

/* -------------------- App -------------------- */

export default function App() {
  return (
    <SafeAreaProvider>
      <GestureHandlerRootView>
        <KeyboardProvider>
          <StatusBar barStyle="dark-content" />
          <NavigationContainer>
            <RootStack />
          </NavigationContainer>
        </KeyboardProvider>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

To Reproduce
Steps to reproduce the behavior:

1. Simply paste the above code in App.tsx

Expected behavior
Padding should remain the same (CASE 2 & CASE 4)

Smartphone/Libraries/Development environment

Library version: 1.20.7

System:
OS: macOS 14.6.1
CPU: (8) arm64 Apple M1 Pro
Memory: 101.95 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 25.2.1
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 11.7.0
path: /opt/homebrew/bin/npm
Watchman:
version: 2025.04.28.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.2
- iOS 18.2
- macOS 15.2
- tvOS 18.2
- visionOS 2.2
- watchOS 11.2
Android SDK: Not Found
IDEs:
Android Studio: 2025.2 AI-252.25557.131.2521.14432022
Xcode:
version: 16.2/16C5032a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 21.0.8
path: /usr/bin/javac
Ruby:
version: 3.2.10
path: /opt/homebrew/opt/ruby@3.2/bin/ruby
npmPackages:

"@react-native-community/cli":
installed: 20.1.1
wanted: ^20.1.1
react:
installed: 19.2.4
wanted: ^19.2.4
react-native:
installed: 0.83.1
wanted: 0.83.1
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true

TemplateApp@0.0.1 /Users/Andrei/Desktop/React_Work/TemplateApp
├── @babel/core@7.28.6
├── @babel/preset-env@7.28.6
├── @babel/runtime@7.28.6
├── @react-native-community/cli-platform-android@20.1.1
├── @react-native-community/cli-platform-ios@20.1.1
├── @react-native-community/cli@20.1.1
├── @react-native/babel-preset@0.83.1
├── @react-native/eslint-config@0.83.1
├── @react-native/metro-config@0.83.1
├── @react-native/typescript-config@0.83.1
├── @react-navigation/native-stack@7.11.0
├── @react-navigation/native@7.1.28
├── @types/jest@30.0.0
├── @types/react-test-renderer@19.1.0
├── @types/react@19.2.10
├── eslint@8.57.1
├── jest@30.2.0
├── prettier@3.8.1
├── react-native-gesture-handler@2.30.0
├── react-native-keyboard-controller@1.20.7
├── react-native-reanimated@4.2.1
├── react-native-safe-area-context@5.6.2
├── react-native-screens@4.20.0
├── react-native-worklets@0.7.2
├── react-native@0.83.1
├── react-test-renderer@19.2.4
├── react@19.2.4
└── typescript@5.9.3

[YoucefBen47]

@DragomirAndrei19 did you find a fix for this issue ?

[ArekChr]

+1

[ArekChr]

Downgrading react-native-screens to 4.18.0 solves this issue.

[kirillzyusko]

Thank you @ArekChr

So the issue is present with react-native-screens@4.19.0 and not reproducible with react-native-screens@4.18.0, correct?

[ArekChr]

Thank you @ArekChr

So the issue is present with react-native-screens@4.19.0 and not reproducible with react-native-screens@4.18.0, correct?

Exactly, tried find by commits but there are too many changes

[YoucefBen47]

Thank you @ArekChr
So the issue is present with react-native-screens@4.19.0 and not reproducible with react-native-screens@4.18.0, correct?

Exactly, tried find by commits but there are too many changes

I believe if you have Status bar set to translucent the issue will be the same if you downgrade react-native-screens.

[DragomirAndrei19]

I haven’t had a chance to try it again since opening this thread, but I might have a possible lead for @kirillzyusko in case the issue doesn’t seem reproducible.

I’m not sure about the people in react-navigation/react-navigation#12653 or other people in this thread, but if I remember correctly, I tested this on the Android emulator in the experimental version of Android Studio. That emulator doesn’t show a visible notch (i.e., no top insets). So maybe it might be defaulting to some minimum inset values or something similar when there’s no notch present.

This could be a completely off-base guess and might not apply to other users at all, but I figured it was worth mentioning just in case.

[kirillzyusko]

@DragomirAndrei19 emulator handles insets differently, from what I remember. It's better to test on a real device.

[DragomirAndrei19]

@kirillzyusko

Unfortunately, there definitely a real bug, not a simulator-exclusive one. I’ve been able to reproduce it on a real Android device, and I think I’ve narrowed down the possible causes. I’ve also prepared a simplified App.tsx example (included at the end of my comment). I tested everything on a Samsung Galaxy A54 (Android 16 / One UI 8.0).

TL;DR - I'm pretty positive this happens only with the non-JS navigators from react-navigation.

From what I can tell, the issue only occurs with the native implementations in React Navigation but not with the JavaScript ones.

In this case, it happens when using @react-navigation/native-stack but should not happen with @react-navigation/stack, - again, this bug only occurs when app is wrapped with <KeyboardProvider>.

I first noticed it because the problem didn’t appear when using the JavaScript-based tab navigator from @react-navigation/bottom-tabs with createBottomTabNavigator. However, it does occur with the native version from @react-navigation/bottom-tabs/unstable using createNativeBottomTabNavigator. So I tested with the JS/Native variants of the stack navigator too and it's the same issue.

So the problem is common to both native implementations.

It’s worth mentioning that in upcoming React Navigation 8.x, the native bottom tabs implementation is expected to become the default. And many developers are already using the native stack from @react-navigation/native-stack and they're probably nesting these native navigators with other (JS-based) navigators, which is why they might see these issues in some screens but not others. It's possible this did not happen until a more recent version of react-native-keyboard-controller, i haven't tested this.

Strongest example:

1. in landscape, when <KeyboardProvider> wrapps the app, the icons on the right side overlap the status bar.

2. in landscape, when <KeyboardProvider> IS ABSENT, it behaves correctly.

It's very important TO REBUILD the app when you add/remove <KeyboardProvider>. I suppose this is because how KeyboardProvider is applied internally. You're also free to replace @react-navigation/native-stack with @react-navigation/stack and this shouldn't happen anymore, even if <KeyboardProvider> wraps the app. You can also safely remove any react-native-bootsplash code below, it's unrelated.

// App.tsx (minimal repro)
// deps:
// npm i @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-gesture-handler react-native-keyboard-controller
// (and native deps required by React Navigation)

import React, {useLayoutEffect } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { KeyboardProvider } from 'react-native-keyboard-controller';
import Bootsplash from 'react-native-bootsplash';
import { SystemBars } from 'react-native-edge-to-edge';

const Stack = createNativeStackNavigator();

function IconBtn({ label }: { label: string }) {
  return (
    <Pressable style={styles.iconBtn} onPress={() => {}}>
      <Text style={styles.iconText}>{label}</Text>
    </Pressable>
  );
}

function AlertsScreen({ navigation }: any) {
  useLayoutEffect(() => {
    navigation.setOptions({
      title: 'Alerts',
      headerRight: () => (
        <View style={styles.headerRight}>
          <IconBtn label="R" />
          <IconBtn label="F" />
        </View>
      ),
    });
  }, [navigation]);

  return (
    <SafeAreaView style={styles.screen}>
      <Text>Alerts screen</Text>
      <Pressable style={styles.navButton} onPress={() => navigation.navigate('Settings')}>
        <Text style={styles.iconText}>Go Settings</Text>
      </Pressable>
    </SafeAreaView>
  );
}

function SettingsScreen() {
  return (
    <SafeAreaView style={styles.screen}>
      <Text>Settings screen</Text>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <SystemBars style={{ statusBar: 'light', navigationBar: 'dark' }} />

        <KeyboardProvider>
          <NavigationContainer
            onReady={() => {
              Bootsplash.hide({ fade: true });
            }}
          >
            <Stack.Navigator
              screenOptions={{
                headerShown: true,
                headerStyle: { backgroundColor: '#1f4f9c' },
                headerTintColor: '#fff',
                headerTitleStyle: { color: '#fff' },
              }}
            >
              <Stack.Screen
                name="Alerts"
                component={AlertsScreen}
                options={{ title: 'Alerts' }}
              />
              <Stack.Screen
                name="Settings"
                component={SettingsScreen}
                options={{ title: 'Settings' }}
              />
            </Stack.Navigator>
          </NavigationContainer>
        </KeyboardProvider>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerRight: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingRight: 8,
    gap: 8,
  },
  iconBtn: {
    width: 34,
    height: 34,
    borderRadius: 17,
    backgroundColor: '#ffffff33',
    alignItems: 'center',
    justifyContent: 'center',
  },
  iconText: {
    color: '#fff',
    fontWeight: '700',
  },
  navButton: {
    marginTop: 16,
    width: 120,
    borderRadius: 8,
    backgroundColor: '#1f4f9c',
    alignItems: 'center',
    justifyContent: 'center',
    height: 40,
  },
});