add callback to pass the touch event up

Author: gbrvalerio

src/index.tsx

@@ -13,6 +13,7 @@ import {
   BackHandler,
   Dimensions,
   Easing,
+  GestureResponderEvent,
   LayoutChangeEvent,
   LayoutRectangle,
   Modal,
@@ -101,6 +102,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
       overlayColor = 'black',
       closable = true,
       closeOnTouchBackdrop = true,
+      onTouchBackdrop,
       drawUnderStatusBar = false,
       gestureEnabled = false,
       isModal = true,
@@ -702,7 +704,8 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
       ],
     );
 
-    const onTouch = () => {
+    const onTouch = (event: GestureResponderEvent) => {
+      onTouchBackdrop?.(event);
       if (enableRouterBackNavigation && router.canGoBack()) {
         router.goBack();
         return;

src/types.ts

@@ -1,6 +1,11 @@
 import {Route} from './hooks/use-router';
 import React from 'react';
-import {Animated, TouchableOpacityProps, ViewStyle} from 'react-native';
+import {
+  Animated,
+  GestureResponderEvent,
+  TouchableOpacityProps,
+  ViewStyle,
+} from 'react-native';
 
 export type ActionSheetProps = {
   children?: React.ReactNode;
@@ -133,6 +138,13 @@ export type ActionSheetProps = {
    */
   closeOnTouchBackdrop?: boolean;
 
+  /**
+   * Callback when user touches the backdrop. Includes the GestureResponderEvent.
+   *
+   * Default: undefined
+   */
+  onTouchBackdrop?: (event: GestureResponderEvent) => void;
+
   /**
    * Render a component over the ActionSheet. Useful for rendering
    * Toast components with which user can interact. Should be `absolutely` positioned.