[Bug]: Extra blank space on input in BottomSheetScrollView - Android

[alemarra89]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Android

What happened?

When I have a BottomSheetTextInput that is at the bottom of a BottomSheetScrollView that reaches full screen size, when I give it focus, when the keyboard opens, excessive blank space appears at the bottom.

The empty space only appears when the keyboard is initially closed and I give focus to the last inputs.
If I give focus to one of the inputs that are at the top, and then give focus to the inputs at the bottom, without closing the keyboard, the bug does not occur.

My requirement is to have adjustPan both on AndroidManifest.xml and on the android_keyboardInputMode prop.

This is my package.json

  "dependencies": {
    "@gorhom/bottom-sheet": "^5.0.6",
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-gesture-handler": "^2.21.2",
    "react-native-reanimated": "^3.16.6"
  },

These are some useful information:

~ % node -v
v20.11.0
~ % npm -v
10.2.4

And this is the code of my App.tsx (the only file in a new project):

import BottomSheet, { BottomSheetScrollView, BottomSheetTextInput } from '@gorhom/bottom-sheet';
import React, { useCallback, useRef } from 'react';
import { Button, StyleSheet, Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

function App(): React.JSX.Element {
  const sheetRef = useRef<BottomSheet>(null);

  const handleOpenPress = useCallback(() => {
    sheetRef.current?.expand();
  }, []);
  const handleClosePress = useCallback(() => {
    sheetRef.current?.close();
  }, []);

  return (

    <GestureHandlerRootView style={styles.container}>

      <Button title="Open" onPress={() => handleOpenPress()} />

      <BottomSheet
        ref={sheetRef}
        keyboardBehavior="interactive"
        keyboardBlurBehavior="restore"
        android_keyboardInputMode="adjustPan"
        enablePanDownToClose
        enableOverDrag
        index={-1}
      >
        <BottomSheetScrollView
          contentContainerStyle={styles.contentContainer}
          bounces={false}
          overScrollMode="never"
          keyboardShouldPersistTaps="handled"
        >

            <Text>Some extra space 1</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 2</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 3</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 4</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 5</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 6</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 7</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 8</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 9</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 10</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 11</Text>
            <BottomSheetTextInput style={styles.input} />
            <Text>Some extra space 12</Text>
            <BottomSheetTextInput style={styles.input} />

            <Button title="Close" onPress={() => handleClosePress()} />

        </BottomSheetScrollView>
      </BottomSheet>
    </GestureHandlerRootView>

  );
}

export default App;


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainer: {
    backgroundColor: 'white',
  },
  itemContainer: {
    padding: 6,
    margin: 6,
    backgroundColor: '#eee',
  },
  input: {
    margin: 20,
    backgroundColor: 'white',
    borderWidth: 1,
    borderRadius: 10,
    borderColor: '#CCC',
  },
});

PS:
I set newArchEnabled=false because otherwise the application would crash once the keyboard was closed (probably due to some other bug on react-native-reanimated or react-native-gesture-handler), but the bug occurs even with newArchEnabled=true

This is the demo video:

Screen.Recording.2024-12-23.at.19.31.25.mov

I've linked a Reproduction sample, but I'm working without Expo, so this is the repo, if you need to reproduce the issue:
https://github.com/alemarra89/TestBottomSheet

Thanks for the support.

Reproduction steps

• Clone the repo (https://github.com/alemarra89/TestBottomSheet)
  or
• Start new project without Expo
• Install the following dependencies:
  "@gorhom/bottom-sheet": "^5.0.6",
  "react": "18.3.1",
  "react-native": "0.76.5",
  "react-native-gesture-handler": "^2.21.2",
  "react-native-reanimated": "^3.16.6"
• Set adjustPan in AndroidManifest.xml
• Copy my App.tsx code
• Run App on Android emulator
• Open bottom sheet with the button in the provided repo
• Give focus to the last input
• See the bug (blank space)

Reproduction sample

https://snack.expo.dev/@alemarra89/github.com-alemarra89-testbottomsheet

Relevant log output

No response