How to interrupt sheet dismissal

[joeporpeglia]

Use case: I'm displaying a form in a bottom sheet. If the user has entered any data, a prompt should be displayed to the user before closing the sheet and clearing the form data. So if the user taps on the backdrop or swipes the bottom sheet away, I want to keep the sheet open and change the bottom sheet contents to an "are you sure" prompt.

My current approach is to add an onAnimate handler, check the to index, and call expand() on the bottom sheet instance to force it back to the open state. This works for swiping the bottom sheet, but doesn't work for taps on the backdrop. Tapping the backdrop seems a little buggy when doing this too. Sometimes it will stay open, but other times it will close.

[OfficialDarkComet]

Personally, I'd probably set enablePanDownToClose prop to false, use the onAnimate prop to determine if the user swiped down to index 0 (since -1 is not allowed) and show the prompt when this happens. If the user cancels don't do anything, but if the user confirms the prompt then close the bottom sheet using ref method close().

const bottomSheetRef = useRef(null)

function handleConfirm( ) {
  if(bottomSheetRef && bottomSheetRef.current) {
    bottomSheetRef.current.close( )
  }
}

return (
  <BottomSheet
    ref={bottomSheetRef}
    enablePanDownToClose={false}
    onAnimate={(fromIndex, toIndex) => {
      if((fromIndex > toIndex) && toIndex === 0) {
        // showPrompt....
      }
    }}
  >
    {Your stuff}
  </BottomSheet>
)

Hope this helps! I did it on my phone, so there may be errors. 😊

- Logan (a.k.a. DarkComet)

[joeporpeglia]

I ended up disabling the backdrop press behavior as well just to avoid that weird force closing behavior. Seems like this is the way to go, thanks!

[joeporpeglia]

Turns out this doesn't work as expected. I'm managing the form state in the parent component that renders the bottom sheet so I know if the prompt should display on animate. When I start typing in the form it updates the parent component state and rerenders the bottom sheet. This causes the content to shift back down to the original position without the keyboard offset. This doesn't happen if I remove the onAnimate prop, so I might need a different approach here 🤔

[Stenbaek]

Did you ever solve this one?

[joeporpeglia]

I ended up going with a different strategy where I allow users to close the sheet, but re-open it if they didn't mean to close it.

Example flow:

1. User fills in form
2. User dismisses bottom sheet
3. App shows Alert asking if they want to discard or continue with the form

If they choose to discard, I clear out the form state and leave the sheet closed.
If they choose to continue, I expand the sheet with the same form state.

Not what I originally intended, but it worked for our use case!

[Stenbaek]

Alright, cool. I might end up doing something similar temporarily. But I'm working on a PR for this feature request.
#1318
If you like the idea, show support in the thread 😊 And if you want to pitch in with ideas, let me know.

[TNAJanssen]

I also don't get this to work, how can we interrupt the backdrop click and pan down?

[Stenbaek]

I made a feature request for a onRequestClose prop, with a pull request. If this is something you still think is a good idea, please show support in the issue and the PR.
Issue: #1318 PR: #1320

[Stenbaek]

I needed this same behavior, and I think I was experiencing the same bugs and glitches that you both describe. My use case was to be able to have an onRequestClose handler step in between user close interaction, and actual closing of the sheet.

The way I fixed it was to introduce a new pressBehavior "override" to the backdrop, which lets you define your own onPress handler, without press of the backdrop triggering any of the default behaviors.

I ended up using the onClose handler on BottomSheet to listen for sheet close.

I intend to suggest this in a pull request when I get the time. You can patch version 4.4.5 with patch-package using this until then:

@gorhom+bottom-sheet+4.4.5.patch

diff --git a/node_modules/@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types.d.ts b/node_modules/@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types.d.ts
index 6a33b9a..9faf31a 100644
--- a/node_modules/@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types.d.ts
+++ b/node_modules/@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types.d.ts
@@ -6,7 +6,7 @@ export interface BottomSheetBackdropProps
   extends Pick<ViewProps, 'style'>,
     BottomSheetVariables {}
 
-export type BackdropPressBehavior = 'none' | 'close' | 'collapse' | number;
+export type BackdropPressBehavior = 'none' | 'close' | 'collapse' | 'override' | number;
 
 export interface BottomSheetDefaultBackdropProps
   extends BottomSheetBackdropProps {
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
index 35597ce..32bee08 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx
@@ -56,7 +56,7 @@ const BottomSheetBackdropComponent = ({
   //#region callbacks
   const handleOnPress = useCallback(() => {
     onPress?.();
-
+    if(pressBehavior === 'override') return
     if (pressBehavior === 'close') {
       close();
     } else if (pressBehavior === 'collapse') {
diff --git a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/types.d.ts b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/types.d.ts
index 6a33b9a..9faf31a 100644
--- a/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/types.d.ts
+++ b/node_modules/@gorhom/bottom-sheet/src/components/bottomSheetBackdrop/types.d.ts
@@ -6,7 +6,7 @@ export interface BottomSheetBackdropProps
   extends Pick<ViewProps, 'style'>,
     BottomSheetVariables {}
 
-export type BackdropPressBehavior = 'none' | 'close' | 'collapse' | number;
+export type BackdropPressBehavior = 'none' | 'close' | 'collapse' | 'override' | number;
 
 export interface BottomSheetDefaultBackdropProps
   extends BottomSheetBackdropProps {

[kauan777]

how i can apply to Modal?
@Stenbaek

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

  useEffect(() => {
    bottomSheetModalRef?.current?.present();
  }, [bottomSheetModalRef]);
  
  return (
    <BottomSheetModalProvider>
      <View style={styles.container}>
        <Button
          text="Open"
          onPress={() => {
            bottomSheetModalRef?.current?.present();
          }}
        />
        <BottomSheetModal
          ref={bottomSheetModalRef}
          index={1}
          animateOnMount
          handleHeight={300}
          handleIndicatorStyle={{ display: "none" }}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}
          handleStyle={{
            borderRadius: 30,
          }}
          containerStyle={{
            borderRadius: 30,
          }}
          style={{
            borderRadius: 30,
          }}
          backgroundStyle={{
            borderRadius: 30,
          }}>
          <BottomSheetView style={styles.contentContainer}>{children}</BottomSheetView>
        </BottomSheetModal>
      </View>
    </BottomSheetModalProvider>

[zipcartapp]

I managed a simple solution to invoke the handleModalPress() on an index of -1. It has the benefit of letting the user swipe down (to still indicate it is a sheet, from a UX perspective. But then it springs back up again with an elastic motion). Just modify the getting started code.

// callbacks const handlePresentModalPress = useCallback(() => { bottomSheetModalRef.current?.present(); }, []); const handleSheetChanges = useCallback((index: number) => { if(index==-1) { handlePresentModalPress(); } console.log('handleSheetChanges', index); }, []);

...

return ( <GestureHandlerRootView style={{flex: 1}} onLayout={handlePresentModalPress}> <BottomSheetModalProvider > <View style={styles.container}> ... Your stuff here ... <BottomSheetModal ref={bottomSheetModalRef} index={1} snapPoints={snapPoints} onChange={handleSheetChanges} backgroundComponent={props => <BottomSheetBackground {...props} />} > <BottomSheetView style={styles.contentContainer}> <Text>Awesome 🎉</Text> </BottomSheetView> </BottomSheetModal> </View> </BottomSheetModalProvider> </GestureHandlerRootView> );