BottomSheetBackdrop: customize behavior on press

Feature Request

Provide a new prop for BottomSheetBackdrop component, pressBehavior, which can have the following values:

Press Behavior	Description
'none'	Pressing the backdrop does nothing. Equivalent to closeOnPress=false.
'close'	Pressing the backdrop closes the sheet. Equivalent to closeOnPress=true.
'collapse'	Pressing the backdrop collapses the sheet (snap to disappearsOnIndex index).
number	Pressing the backdrop snaps to the provided index.

Why it is needed

Currently, the only customization is via closeOnPress, which causes the sheet to be completely closed when the user presses the backdrop. I believe it is a very frequent scenario when the library consumer wants the sheet to be collapsed instead.

Possible implementation

const BottomSheetBackdropComponent = ({
  disappearsOnIndex = DEFAULT_DISAPPEARS_ON_INDEX,
  pressBehavior = DEFAULT_PRESS_BEHAVIOR
}) => {
  const { collapse, snapTo, close } = useBottomSheet();
  //...
  const handleOnPress = useCallback(() => {
    if (pressBehavior === 'close') {
      close()
    } else if (pressBehavior === 'collapse') {
      snapTo(disappearsOnIndex)
    } else if (typeof pressBehavior === 'number') {
      snapTo(pressBehavior)
    }
  }, [close, snapTo, disappearsOnIndex]);
  // ...
}

Code sample

const Backdrop = (props: BottomSheetBackdropProps) => <BottomSheetBackdrop pressBehavior="collapse" {...props} />

Remarks

1. I wonder if 'collapse' should snaps to zero instead… not sure what’s the best. I do favor the proposed implementation, since the consumer can still use a numbered index (0) for the desired behavior.
2. closeOnPress would be deprecated by this new prop. While these props coexist, I believe it would be sensible that pressBehavior takes precedence over closeOnPress when both are defined. We could also print a warning.

[jsamr]

@gorhom I’m plannig to take a shot very soon! I’ll post one PR on master, and one on v3 branch.

[gorhom]

thanks @jsamr for the amazing work you’ve done!

this feature is now available for v3 & v2 🎉