[Bug]: Dragging down bottom sheet when Text Input is selected causes to go away from screen

[Mahdirah0]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Android

What happened?

When text input (BottomSheetTextInput) is selected and you drag down the bottom sheet it goes away from screen and not recoverable. BottomSheet Index is -1.

My lowest snap point is set at 25%.

Issue occurs on physical android device and android emulator.

The code is from the docs for BottomSheetTextInput and hasn't been changed:

URL to docs: https://gorhom.dev/react-native-bottom-sheet/components/bottomsheettextinput

video.mp4

Reproduction steps

• Select input
• Drag down the bottom sheet
• Bottom sheet disappears of the screen

Reproduction sample

https://snack.expo.dev/EiR7hPk0P3p44RA7QGcgc

Relevant log output

handleSheetChanges -1

[Mahdirah0]

A quick fix I'm doing is to snap the bottomsheet to 1 when it detects index being -1. This makes it appear at all times and never goes off-screen.

Code:

const handleSheetChanges = useCallback((index: number) => {
    if (index === -1) {
      bottomSheetRef.current?.snapToIndex(1);
    }
  }, []);

return (
    <GestureHandlerRootView style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        index={1}
        snapPoints={snapPoints}
        keyboardBehavior='fillParent'
        enableDynamicSizing={false}
        onChange={handleSheetChanges}
      >
        <BottomSheetTextInput style={styles.input} />
        <BottomSheetView style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
        </BottomSheetView>
      </BottomSheet>
    </GestureHandlerRootView>
  );

[bvanderdrift]

We're dealing with a very similar issue to you; on keyboard blur in a similar screen it does the same behaviour -> fully closes the bottom sheet.

I've done a little write-up of what I've found in the next comment.

If I ignore any 0 values in this line:

react-native-bottom-sheet/src/components/bottomSheet/BottomSheet.tsx

Line 916 in 7bfe7ae

const proposedPosition = getEvaluatedPosition(source);

the bug stops occurring. This is obviously not a proper fix, but it's as far as I've gone so far.

Curious if that also stops the bug for you? If so we probably have a similar/same root cause.

[bvanderdrift]

A bit more of a clear report what's happening. I'm writing this here since

1. Even though the trigger is different, looks like a very similar issue
2. It happens at such a specific event, that depends on the height of the specific device & it's keyboard, I have a hard time to create a reproducible example myself. I can't therefore make an issue so maybe this helps.

If this is not relevant to current issue, please remove/hide my comment. Don't mean to pollute/distract.

---

Steps what happens

1. We have an open sheet with dynamic content size. The current screen has a single input.
2. We focus on the input. The keyboard appears
   • Values: highestSnapPoint: 270, keyboardHeightInContainer: 260
3. We submit the input. In our case this unmounts just the input component, causing a keyboard blur effect
   • Values: highestSnapPoint: 255.5, keyboardHeightInContainer: 260

This causes the following line to return 0:

react-native-bottom-sheet/src/components/bottomSheet/BottomSheet.tsx

Line 852 in 7bfe7ae

return Math.max(0, highestSnapPoint - keyboardHeightInContainer);

5. This value gets passed to the following line

react-native-bottom-sheet/src/components/bottomSheet/BottomSheet.tsx

Lines 1008 to 1013 in 7bfe7ae

	animateToPosition(
	proposedPosition,
	source,
	undefined,
	animationConfigs
	);

6. This for some reason causes the bottom sheet to dissapear (please note there is no collapse animation happening)