KeyboardAwareScrollView applies unexpected bottom gap in contentContainerStyle

[Ikthegreat]

Describe the bug
When using KeyboardAwareScrollView from react-native-keyboard-controller, contentContainerStyle.gap is applied differently compared to a regular ScrollView.

• A gap is applied to the bottom of the content, even though this is not expected.
• Additionally, when gap: 0 is explicitly set, there is still 1px of bottom spacing rendered.
• This inconsistency does not occur with a normal ScrollView.

Code snippet

<KeyboardAwareScrollView
  contentContainerStyle={{
    backgroundColor: 'black',
    gap: 10,
  }}>
  {array.map((_, index) => (
    <View key={index} style={{ backgroundColor: 'red', height: 20 }} />
  ))}
</KeyboardAwareScrollView>

<KeyboardAwareScrollView
  contentContainerStyle={{
    backgroundColor: 'black',
    gap: 0,
  }}>
  {array.map((_, index) => (
    <View key={index} style={{ backgroundColor: 'red', height: 20 }} />
  ))}
</KeyboardAwareScrollView>

Repo for reproducing

Expo snack Link

To Reproduce

1. Go to Expo snack
2. See Layout

or

• Render a KeyboardAwareScrollView with contentContainerStyle.gap set.
• Compare it to a regular ScrollView with the same style.
• Observe the extra space at the bottom in KeyboardAwareScrollView.

Expected behavior

• The behavior of contentContainerStyle.gap should match that of ScrollView.
• No extra bottom spacing should be added when gap: 0 is specified.

Screenshots

Smartphone (please complete the following information):

• Desktop OS: Mac OS 15.4
• Device: iPhone 13 Pro, Galaxy Z Flip 4
• OS: iOS 18.3.2, Android 14
• RN version: 0.76.9
• RN architecture: old
• JS engine: Hermes
• Library version: 1.15.2

[kirillzyusko]

@Ikthegreat this is a problem for both iOS and Android, right?

[Ikthegreat]

@kirillzyusko Yes, This issue has been observed on both iOS and Android platforms.

[dhruvpaobs]

I'm also seeing this issue on Android — there's an extra gap when the keyboard opens, and it stays even after the keyboard is closed.

[rbtt]

maybe adding a negative marginTop with a value of contentContainerStyle?.gap to the keyboard view style would solve this?

react-native-keyboard-controller/src/components/KeyboardAwareScrollView/index.tsx

Line 392 in 98df8d8

paddingBottom: currentKeyboardFrameHeight.value + 1,

    const view = useAnimatedStyle(
      () =>
        enabled
          ? {
              // animations become choppy when scrolling to the end of the `ScrollView` (when the last input is focused)
              // this happens because the layout recalculates on every frame. To avoid this we slightly increase padding
              // by `+1`. In this way we assure, that `scrollTo` will never scroll to the end, because it uses interpolation
              // from 0 to `keyboardHeight`, and here our padding is `keyboardHeight + 1`. It allows us not to re-run layout
              // re-calculation on every animation frame and it helps to achieve smooth animation.
              // see: https://github.com/kirillzyusko/react-native-keyboard-controller/pull/342
              paddingBottom: currentKeyboardFrameHeight.value + 1,
              marginTop: - (rest?.contentContainerStyle ? (StyleSheet.flatten(rest.contentContainerStyle)?.gap || 0) : 0)
            }
          : {},
      [enabled],
    );

[YuryCSilva]

Hello my friend, I don't no if in your project the android version it's ok, but in my project it's work fine! but on iOS I had this problem and I solve it using this code below:

import {
  KeyboardAwareScrollView,
  KeyboardAwareScrollViewProps,
  KeyboardGestureArea,
} from 'react-native-keyboard-controller';
import React, { useEffect, useState } from 'react';
import { Keyboard, KeyboardEvent, Platform } from 'react-native';

export type ContainerScrollInputsProps =  KeyboardAwareScrollViewProps & { }

function ContainerScrollInputs(dados: ContainerScrollInputsProps) {
  const { children, ...rest } = dados;

  const [keyboardSize, setKeyboardSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (Platform.OS === 'android') return;

    const onShowKeyboard = (e: KeyboardEvent) => {
      setKeyboardSize({
        width: e.endCoordinates.width,
        height: e.endCoordinates.height,
      });
    };

    const onHideKeyboard = () => {
      setKeyboardSize({ width: 0, height: 0 });
    };

    const show = Keyboard.addListener('keyboardWillShow', onShowKeyboard);
    const hide = Keyboard.addListener('keyboardWillHide', onHideKeyboard);

    return () => {
      if (Platform.OS === 'android') return;

      show.remove();
      hide.remove();
    };
  }, []);

  return (
    <KeyboardGestureArea interpolator='ios'>
      <KeyboardAwareScrollView
        bottomOffset={16}
        {...rest}
        automaticallyAdjustKeyboardInsets={Platform.OS === 'ios' ? true : false}
        extraKeyboardSpace={0 - keyboardSize.height}
        enabled
      >
        {children}
      </KeyboardAwareScrollView>
    </KeyboardGestureArea>
  );
}

export default ContainerScrollInputs;

I use this component envolt all the content that I want be scrollable.

[kirillzyusko]

Okay, I think the original problem happens because gap is inserted between all children, right? KeyboardAwareScrollView internally has one additional children (which mimics keyboard size to make sure you can scroll if keyboard is visible). Because of that we are getting a new line 🤔

The correct fix is here #797 But I can not merge it, because the support for Android is still missing.

@rbtt The workaround with negative marginTop may work in some cases, but now always and may produce other issues potentially, I think.