Fix issue with simultaneous keyboard dismiss and sheet close

[paulrostorp]

Motivation

This aims to address https://github.com/gorhom/react-native-bottom-sheet/issues/1159 and https://github.com/gorhom/react-native-bottom-sheet/issues/1072

This simply exits the OnKeyboardStateChange callback if the sheet is about close.

This may conflict with https://github.com/gorhom/react-native-bottom-sheet/commit/a1ec74dbbc85476bb39f3637e9a97214e0cad9a0 but as I am unsure of the calendar for the v5 release, I thought I'd open a PR for this fix only. Please advise

[paulrostorp]

for any interested, here is a patch: @gorhom+bottom-sheet+4.4.5.patch

diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
index b166440..ce74512 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheet/BottomSheet.tsx
@@ -1402,6 +1402,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           (Platform.OS === 'android' &&
             keyboardBehavior === KEYBOARD_BEHAVIOR.interactive &&
             android_keyboardInputMode === KEYBOARD_INPUT_MODE.adjustResize)
+          || animatedNextPositionIndex.value == -1
         ) {
           animatedKeyboardHeightInContainer.value = 0;
           return;

[princefishthrower]

@paulrostorp while this patch did prevent my modal bottom sheet from staying / snapping back up to it's highest snap point after dismissing the keyboard, for bottom sheets with more than one snap point, I noticed that after the keyboard closed (by way of dragging the sheet down), my bottom sheet was stuck at it's first (non 0) snap point.

I believe this to be momentum-based since hard swipes down fully close the modal, but if you swipe too lightly, the sheet gets stuck in this weird halfway position...

I could only fully close the modal by doing something like this:

useTimeout(() => bottomSheetRef.current?.dismiss(), keyboardShown ? null : 10);

so far I've only tested on android; my bottom sheet modal has the following (relevant) properties:

keyboardBehavior="extend"
keyboardBlurBehavior="restore"
android_keyboardInputMode="adjustPan"

[github-actions[bot]]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[paulrostorp]

not stale

[github-actions[bot]]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[paulrostorp]

not stale

[bombillazo]

@gorhom any feedback on this PR?

[gorhom]

Will look into this pr this weekend

[felixaa]

Tested the Discord fork and it worked for us 🎊

[bombillazo]

@gorhom any chance for a recent review?

[github-actions[bot]]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[brahimmouhamou]

not stale, @gorhom ?

[github-actions[bot]]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[paulrostorp]

Not stale

[PrimulaX]

No way to merge this? 😷

[github-actions[bot]]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[PrimulaX]

no stale, gringo.

[bhupendra1011]

@paulrostorp , is there any update when this fix will be merged.

[github-actions[bot]]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[PrimulaX]

🫠

[JulesVision]

Is the fix merged ?

[gorhom]

@paulrostorp could you provide the issue repro sample code.

[johannessachse]

@paulrostorp I tested this PR with Pixel 7. Not sure why but in my case this fix isn't working correctly.

This is my component:

        <BottomSheet
          index={bottomSheetIndex}
          ref={sheetRef}
          snapPoints={['70%']}
          enablePanDownToClose={true}
          handleComponent={null}
          backdropComponent={renderBackdrop}
        >
        {...}
        </BottomSheet>

  const close = () => {
    Keyboard.dismiss();
    setBottomSheetIndex(-1);
    sheetRef.current?.close();
  };

[fjmorant]

Any chance in making this work?, facing the same issue