A way to disable gesture handling on the sheet's content

[adamsoutar]

Feature Request

Hi, for some controls on Android you can't replace the Touchables with ones from this lib. For example, a native <Switch /> or buttons/tabs from other 3rd party dependencies. This makes quite a few components unusable within sheets.

Is there a way to disable gesture handling on the content so only the handle is draggable, leaving normal touchables working in the sheet?

reanimated-bottom-sheet has enabledHeaderGestureInteraction , enabledContentGestureInteraction, and enabledContentTapInteraction props which can be composed to get this behaviour on Android.

As a side-note, is it possible to produce this behaviour already - perhaps by wrapping the content in a gesture handler and not allowing the events to propagate?

Possible implementation

The implementation might involve wrapping the header & content in separate TapGestureHandler/PanGestureHandlers, and allowing us to toggle whether each is wrapped in them using props.

Code sample

Usage might look something like:

<BottomSheet
      snapPoints={['40%', '70%']}
      enableHeaderGestures={true}
      enableContentGestures={false}
    >
 {/* ... content with native/3rd party controls for Android */}
</BottomSheet>

[gorhom]

@adamsoutar thanks for submitting this enhancement, this already in progress , check #75 & #76 👏

[adamsoutar]

Thank you! I should've looked harder first

[gorhom]

I just pushed an alpha release for v2, please try it and let me know :)

also check out the new documents website ( still in progress ) 🎉

yarn add @gorhom/bottom-sheet@2.0.0-alpha.2

[kamote]

@gorhom This now works, thanks!
However BottomSheetModalProvider seems not working properly on this version

[phgn0]

For anyone finding this from Google ... enableContentPanningGesture={false} seems to disable dragging gestures.