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.

[fjuric]

Hi @kirillzyusko , I just got back from vacation so I finally had a chance to focus on the code related to the keyboard provider. I managed to fix the padding issues on all screens except one, but that’s a minor issue which I’ll try to fix myself. I have one more question for you. If you get a chance, I’d appreciate it if you could take a look at the video. The animation on iOS is smooth, but on Android it stutters.

Screen.Recording.2025-07-10.at.11.59.47.mov

Here’s a part of the code, maybe it’ll help. Thank you in advance for your time and support

const topEdge = useMemo(() => {
    if (buttonOffsetY && scrollHeight) return buttonOffsetY - scrollHeight;
    return 0;
  }, [buttonOffsetY, scrollHeight]);

  const scrollToBottom = () => {
    scrollViewRef.current?.scrollToEnd({ animated: true });
  };

  const onScroll = useAnimatedScrollHandler({
    onScroll: (event) => {
      scrollY.value = event.contentOffset.y;
      if (event.contentOffset.y >= topEdge && !hintDismissed) {
        runOnJS(setHintDismissed)(true);
      }
    },
  });

  return (
    <>
      <Stack.Screen
        options={{
          headerRight: () => (
            <Pressable onPress={() => clearBasket()}>
              <Text className="text-sm font-openSansSemiBold text-grayPrimary">
                Obriši sve
              </Text>
            </Pressable>
          ),
        }}
      />
      <View className="flex-1 relative">
        {topEdge > 0 && !hintDismissed && (
          <ConfirmOrderHint
            scrollY={scrollY}
            scrollToBottom={scrollToButton}
            topEdge={topEdge}
            hasSufficientMonthlyAllowance={hasSufficientMonthlyAllowance}
            hasSufficientDailyAllowance={hasSufficientDailyAllowance}
          />
        )}
        <KeyboardAwareScrollView
          ref={scrollViewRef}
          onScroll={onScroll}
          className="flex-1 bg-white relative"
          showsVerticalScrollIndicator={false}
          scrollEventThrottle={16}
          contentContainerStyle={{
            minHeight: '100%',
            justifyContent: 'space-between',
            paddingBottom: isIos ? bottom || 16 : bottom + 16,
          }}
          onLayout={(e) => {
            const rawHeight = e.nativeEvent.layout.height;
            const adjustedHeight = isAndroid ? rawHeight - bottom : rawHeight;
            setScrollHeight(adjustedHeight);
          }}
        >
          <View>
            <View className="flex-1 flex-row items-center justify-between p-4 gap-4">
              <Text className="flex-1 text-base font-openSansSemiBold text-grayPrimary">
                {title}
              </Text>
              {currentRestaurant?.restaurantProfilePicture && (
                <View className="w-8 h-8 rounded-full overflow-hidden border border-grayPrimary20">
                  <Image
                    source={{
                      uri: restaurantProfilePicture,
                    }}
                    className="w-full h-full"
                  />
                </View>
              )}
            </View>
            <ConfirmOrderList
              hasSufficientMonthlyAllowance={hasSufficientMonthlyAllowance}
              hasSufficientDailyAllowance={hasSufficientDailyAllowance}
            />
            <ConfirmOrderNote />
            {shouldShowTotalPrice && (
              <ConfirmOrderPrice totalPrice={totalPrice} />
            )}
          </View>
          <ConfirmOrderButton
            setButtonOffsetY={setButtonOffsetY}
            hasSufficientMonthlyAllowance={hasSufficientMonthlyAllowance}
            hasSufficientDailyAllowance={hasSufficientDailyAllowance}
          />
        </KeyboardAwareScrollView>
      </View>
    </>
  );

[fjuric]

@kirillzyusko Would it help if I created a minimal example and sent you the repo link?

[kirillzyusko]

@fjuric yes!

[fjuric]

I'm sending you a link to a repo with a reproduction where you'll notice that the animation on Android isn't smooth.
Also, please pay attention to the console.log(top, bottom) — you'll see that it first logs an actual value, then 0, and then a valid value again. This issue only occurs on Android.
This causes a brief jump up and down of the entire screen content.

https://github.com/fjuric/keyboard-provider-example

[fjuric]

This is the first project I'm developing in a React Native environment, so I don't have much experience, but it seems to me that the issue might be related to how Reanimated handles padding/height animations on Android devices. I tried removing KeyboardAwareScrollView and using useKeyboardHandler instead — I didn't notice any improvements in the animation. However, when I commented out the padding part, the animation became smooth. I couldn’t figure out why this change in the top value is happening 😄 .

const animatedStyle = useAnimatedStyle(
  () => ({
    transform: [{ translateY: -keyboardHeight.value }],
    flex: 1,
    // paddingTop: keyboardHeight.value,
  }),
  []
);

[kirillzyusko]

Sorry @fjuric

I somehow completely forgot about this problem, but I fixed a very similar bug in 1.21.5 version - don't you mind to test it?.. 🙏

[janusqa]

@fjuric can you tell me how you fixed this issue? I am experiencing the same bottom ghost space when i employ KeyboardProvider.

On newer versions on Android no issue but on version like Android 9 is an issue.

I have this in my app.config.json

         "softwareKeyboardLayoutMode": "resize",

I have been trying with putting the provider at various levels of the tree

   return (
      <GestureHandlerRootView style={styles.container}>
         <SafeAreaProvider>
            <QueryClientProvider client={queryClient}>
               <QueryBoundaries>
                  <KeyboardProvider>
                     <StatusBar
                        style={AppTheme.theme.dark ? 'light' : 'dark'}
                     />
                     <RootLayout hideSplash={sessionLoaded && fontsLoaded} />
                  </KeyboardProvider>
               </QueryBoundaries>
            </QueryClientProvider>
         </SafeAreaProvider>
      </GestureHandlerRootView>
   );

import COLORS from '@/constants/colors';
import { StyleSheet } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';

const AppKeyboardAwareScrollView = ({
children,
...rest
}: React.ComponentProps<typeof KeyboardAwareScrollView>) => {
return (
   <KeyboardAwareScrollView
      bottomOffset={0}
      extraKeyboardSpace={-30}
      contentContainerStyle={styles.container}
      {...rest}
   >
      {children}
   </KeyboardAwareScrollView>
);
};

export default AppKeyboardAwareScrollView;

const styles = StyleSheet.create({
container: {
   flexGrow: 1,
   backgroundColor: COLORS.primary,
},
});

i have been playing around with some of the props in the scrollview but yet the space persists.