onRequestClose prop

[Stenbaek]

Feature Request

An onRequestClose prop on the BottomSheet. This prop should accept a function returning a Promise, which should be run between user dismissal/closing interaction and the sheet actually closing (to index -1). The return value of the promise should in turn decide whether to proceed with closing the sheet.

Why it is needed

In certain situations, it would be very useful to be able to interrupt any dismissal/closing of the sheet, eg. if there is unsaved changes in a form, or if some process is running. This would eg. allow you to prompt the user with an alert to confirm ending whatever workflow they are currently in.

Possible implementation

Almost as described above. I actually made it work by adding the onRequestClose prop to the sheet, and injecting that function in the handleClose handler. But this only works for dismissal of the sheet by either pressing the backdrop or running the .close() ref handler, and not when closing with the pan down to close gesture. I would love to make a PR, but I think I need help or guidance to make it work with the panning gesture as well.

Code sample

I imagine the use of onRequestClose prop something like:

const App = () => {
  return (
     <BottomSheet
        onRequestClose={async () => await AsyncAlert()}
        {...otherProps}
      />
  )
}

const AsyncAlert = async (): Promise<boolean> =>
    new Promise(resolve => {
        Alert.alert(
            'Some info',
            'Do you want to close?',
            [
                {
                    text: 'Close',
                    onPress: () => resolve(true),
                },
                {
                    text: 'Cancel',
                    onPress: () => resolve(false),
                },
            ],
        );
    });

[Stenbaek]

@gorhom I made a PR that add's the functionality, and it is working as intended. #1320

[RohovDmytro]

Can you solve your usecase by listening to index = -1 via onChange prop and then do your thing?

[RohovDmytro]

The other way is to use the onPress (and other) props of the backdrop component.

[Stenbaek]

Can you solve your usecase by listening to index = -1 via onChange prop and then do your thing?

I've tried both, but it doesn't work as intended. Especially not since you want the onClose handler to run after the close happens (in this case, after the actual close), and BottomSheet listens for the animated change to happen and fires both the onClose and the onChange when the sheet animates to -1. I think it would be a nice addition to the API, but I understand that it could fall outside of the author's scope.

[github-actions]

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

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.