Extra bottom padding on Android devices when using Keyboard Provider

[fjuric]

When I wrap my app with the keyboard provider, I notice a strange padding/margin at the bottom of each screen, regardless of whether I'm using anything from the package on that screen or not. I should mention that I'm also using react-native-safe-area-context, specifically the useSafeAreaInsets() hook, which ensures that content stays within the allowed top and bottom boundaries. I don’t experience any issues on iOS devices, and this problem doesn't even occur on all Android devices. I notice it on certain Android devices—especially those with a navigation bar at the bottom—where there’s extra space between the navigation bar and the content above it. Unfortunately, I can’t reproduce this effect using Android emulators; it's only visible on those specific Android devices I'm testing on. It’s also worth mentioning that I’m using KeyboardAwareScrollView with a bottomOffset, in case that helps someone further identify the issue.

<SafeAreaProvider>
  <KeyboardProvider>
    <StatusBar style="dark" />
    <Slot />
  </KeyboardProvider>
</SafeAreaProvider>

Platform: Android (no issue on iOS)

Expo SDK: ~52.0.46

React Native version: 0.76.9

react-native-keyboard-controller: ^1.17.2

[kirillzyusko]

@fjuric can you try to specify statusBarTranslucent/navigationBarTranslucent props on KeyboardProvider level? 👀

[fjuric]

@kirillzyusko First of all, thank you for the quick response.
I tried your approach and it really did fix the issue with the bottom padding. However, I’ve now noticed a new problem.
I’m wondering — is it necessary to include both statusBarTranslucent and navigationBarTranslucent, or can I leave out statusBarTranslucent since I haven’t had any issues with top padding until now?

P.S. That white area is supposed to be gray, but ever since I added statusBarTranslucent, I’ve been seeing what’s shown in the screenshot.
It’s important to mention that this doesn’t happen on all Android devices. 😄

[kirillzyusko]

is it necessary to include both statusBarTranslucent and navigationBarTranslucent, or can I leave out statusBarTranslucent since I haven’t had any issues with top padding until now?

It's totally up to you which prop to toggle on/toggle off. The example project uses only statusBarTranslucent=true property 🙂

P.S. That white area is supposed to be gray, but ever since I added statusBarTranslucent, I’ve been seeing what’s shown in the screenshot.
It’s important to mention that this doesn’t happen on all Android devices. 😄

Very hard to say what's going wrong here, but let me elaborate a little bit more here.

Basically when you wrap in KeyboardProvider the app goes into edge-to-edge mode (i.e. content of the app will overlap with status bar and navigation bar - literally it'll match iOS behavior). By default I'm trying to preserve default react-native behavior and add padding to top and bottom. If you specify statusBarTranslucent=true/navigationBarTranslucent=true then you utilize full power of edge-to-edge mode and you match the iOS design.

In case if you have fully working edge-to-edge mode then react-native-safe-area-context detects paddings and react-navigation in its turn applies paddings to header (to avoid the overlap between your elements and system UI).

Looking at screenshot above it can be a component that render the padding of react-native-safe-area-context somewhere in your code. But it also can be a race condition between different modules (i. e. react-native-keyboard-controller and react-native-screens). It's very hard to say what exactly going wrong here, so if you can prepare a reproduction example I'll be happy to look into the code and help you. Otherwise I believe I explained what you can check/explore 🙂 Try to use layout inspector to see which view adds this undesired padding.

On which Android devices you see this white line? Is it physical devices only?

[fjuric]

Thank you for this very detailed response. Some things are now much clearer to me in terms of how they work, and as soon as I get back from vacation, I’ll test everything. I conducted the tests on three Android devices: Honor 200 (everything worked fine on it from the start), and two devices where I noticed the issues I showed you in the images. Those devices are the Xiaomi M11 and Xiaomi 13T. I didn't notice any issues on the emulators — I did most of the testing on a Pixel 9 Pro. I was switching between gesture navigation and 3-button navigation.

I won’t bother you anymore for now, haha — I think you gave me a clear picture of how the package works and what you were trying to achieve. If I need anything else, I’ll get in touch and provide you with a code example if needed.

P.s. I haven’t had time to go through everything in detail, but I did find two possible quick fixes for the white background issue I’m seeing on the M11 and 13T devices:

1. Add the backgroundColor prop to StatusBar in my parent component. Up until now, I was only using the style prop.

<StatusBar
  style={
    currentRestaurant?.isOnline
      ? 'dark'
      : 'light'
  }
  backgroundColor={
    currentRestaurant?.isOnline
      ? colors.white
      : colors.grayPrimary
  }
/>

and this is navigation bar component

export const NavigationBar = ({
  navigationBarStyle,
  restaurantName,
  setNavigationBarHeight,
  isRestaurantOnline,
}: IProps) => {
  const router = useRouter();
  const { top } = useSafeAreaInsets();

  return (
    <Animated.View
      onLayout={(e) => setNavigationBarHeight(e.nativeEvent.layout.height)}
      style={[navigationBarStyle, { paddingTop: top }]}
      className={twMerge(
        'absolute top-0 w-full z-10 flex-row items-center px-4 pb-2',
        isRestaurantOnline
          ? 'bg-white border-b border-grayPrimary10'
          : 'bg-grayPrimary'
      )}
    >
      <Pressable
        onPress={() => router.back()}
        className="z-10 w-14 h-8 justify-center items-center -ml-3"
      >
        <View className="w-8 h-8 flex justify-center items-center">
          <View className="-ml-0.5">
            <ChevronLeftIcon
              width={20}
              height={20}
              color={isRestaurantOnline ? colors.grayPrimary : colors.white}
            />
          </View>
        </View>
      </Pressable>
      <Text
        className={twMerge(
          'flex-1 text-center -ml-11 text-base font-openSansSemiBold px-12',
          isRestaurantOnline ? 'text-grayPrimary' : 'text-white'
        )}
      >
        {isRestaurantOnline === undefined
          ? 'Trenutno nije moguće prikazati informacije o restoranu'
          : isRestaurantOnline
            ? restaurantName
            : 'Trenutno zatvoreno'}
      </Text>
    </Animated.View>
  );
};

2. Remove statusBarTranslucent and leave only navigationBarTranslucent.