fix: prevent default backdrop from blocking ui behind

src/components/bottomSheet/BottomSheet.tsx

@@ -253,6 +253,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     //#region gesture interaction / animation
     // variables
     const animationState = useSharedValue(ANIMATION_STATE.UNDETERMINED, false);
+    const animatedSnapPoints = useSharedValue(snapPoints, true);
     const animatedPosition = useSharedValue(initialPosition, true);
     const animatedIndex = useDerivedValue(() => {
       const adjustedSnapPoints = snapPoints.slice().reverse();
@@ -323,7 +324,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     ] = useInteractivePanGestureHandler(
       GESTURE.CONTENT,
       animatedPosition,
-      snapPoints,
+      animatedSnapPoints,
       animateToPoint,
       enableOverDrag,
       overDragResistanceFactor,
@@ -336,7 +337,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
     ] = useInteractivePanGestureHandler(
       GESTURE.HANDLE,
       animatedPosition,
-      snapPoints,
+      animatedSnapPoints,
       animateToPoint,
       enableOverDrag,
       overDragResistanceFactor

src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx

@@ -1,13 +1,18 @@
-import React, { memo, useCallback, useMemo, useRef } from 'react';
-import { TouchableWithoutFeedback } from 'react-native';
+import React, { memo, useMemo, useRef } from 'react';
 import Animated, {
   interpolate,
   Extrapolate,
   useAnimatedStyle,
   useAnimatedProps,
   useSharedValue,
   useAnimatedReaction,
+  useAnimatedGestureHandler,
+  runOnJS,
 } from 'react-native-reanimated';
+import {
+  TapGestureHandler,
+  TapGestureHandlerGestureEvent,
+} from 'react-native-gesture-handler';
 import isEqual from 'lodash.isequal';
 import { useBottomSheet } from '../../hooks/useBottomSheet';
 import {
@@ -21,10 +26,6 @@ import { WINDOW_HEIGHT } from '../../constants';
 import type { BottomSheetDefaultBackdropProps } from './types';
 import { styles } from './styles';
 
-const AnimatedTouchableWithoutFeedback = Animated.createAnimatedComponent(
-  TouchableWithoutFeedback
-);
-
 const BottomSheetBackdropComponent = ({
   animatedIndex,
   opacity = DEFAULT_OPACITY,
@@ -45,30 +46,27 @@ const BottomSheetBackdropComponent = ({
   ]);
   //#endregion
 
-  //#region callbacks
-  const handleOnPress = useCallback(() => {
-    close();
-  }, [close]);
+  //#region tap gesture
+  const gestureHandler = useAnimatedGestureHandler<TapGestureHandlerGestureEvent>(
+    {
+      onStart: () => {
+        runOnJS(close)();
+      },
+    }
+  );
   //#endregion
 
   //#region animated props
   const isContainerTouchable = useSharedValue<boolean>(closeOnPress, true);
-  const containerAnimatedProps = useAnimatedProps(() => ({
-    pointerEvents: isContainerTouchable.value ? 'auto' : 'none',
-  }));
-  //#endregion
-
-  //#region styles
-  const buttonAnimatedStyle = useAnimatedStyle(
+  const containerAnimatedProps = useAnimatedProps(
     () => ({
-      top: animatedIndex.value <= disappearsOnIndex ? WINDOW_HEIGHT : 0,
+      pointerEvents: animatedIndex.value > disappearsOnIndex ? 'auto' : 'none',
     }),
     [disappearsOnIndex]
   );
-  const buttonStyle = useMemo(() => [style, buttonAnimatedStyle], [
-    style,
-    buttonAnimatedStyle,
-  ]);
+  //#endregion
+
+  //#region styles
   const containerAnimatedStyle = useAnimatedStyle(
     () => ({
       opacity: interpolate(
@@ -77,6 +75,7 @@ const BottomSheetBackdropComponent = ({
         [0, 0, opacity],
         Extrapolate.CLAMP
       ),
+      top: animatedIndex.value <= disappearsOnIndex ? WINDOW_HEIGHT : 0,
     }),
     [opacity, disappearsOnIndex, appearsOnIndex]
   );
@@ -101,21 +100,18 @@ const BottomSheetBackdropComponent = ({
   //#endregion
 
   return closeOnPress ? (
-    <AnimatedTouchableWithoutFeedback
-      accessible={true}
-      accessibilityRole="button"
-      accessibilityLabel="Bottom Sheet backdrop"
-      accessibilityHint="Tap to close the Bottom Sheet"
-      onPress={handleOnPress}
-      style={buttonStyle}
-    >
+    <TapGestureHandler onGestureEvent={gestureHandler}>
       <Animated.View
         ref={containerRef}
         style={containerStyle}
+        accessible={true}
+        accessibilityRole="button"
+        accessibilityLabel="Bottom Sheet backdrop"
+        accessibilityHint="Tap to close the Bottom Sheet"
         // @ts-ignore
         animatedProps={containerAnimatedProps}
       />
-    </AnimatedTouchableWithoutFeedback>
+    </TapGestureHandler>
   ) : (
     <Animated.View pointerEvents={pointerEvents} style={containerStyle} />
   );

src/hooks/useInteractivePanGestureHandler.ts

@@ -17,7 +17,7 @@ type InteractivePanGestureHandlerContextType = {
 export const useInteractivePanGestureHandler = (
   type: GESTURE,
   animatedPosition: Animated.SharedValue<number>,
-  snapPoints: number[],
+  snapPoints: Animated.SharedValue<number[]>,
   animateToPoint: (point: number, velocity: number) => void,
   enableOverDrag: boolean,
   overDragResistanceFactor: number,
@@ -56,33 +56,36 @@ export const useInteractivePanGestureHandler = (
 
         const position = context.currentPosition + translationY;
         const negativeScrollableContentOffset =
-          context.currentPosition === snapPoints[snapPoints.length - 1] &&
+          context.currentPosition ===
+            snapPoints.value[snapPoints.value.length - 1] &&
           scrollableContentOffsetY
             ? scrollableContentOffsetY.value * -1
             : 0;
         const clampedPosition = clamp(
           position + negativeScrollableContentOffset,
-          snapPoints[snapPoints.length - 1],
-          snapPoints[0]
+          snapPoints.value[snapPoints.value.length - 1],
+          snapPoints.value[0]
         );
 
         if (enableOverDrag) {
           if (
             type === GESTURE.HANDLE &&
-            position <= snapPoints[snapPoints.length - 1]
+            position <= snapPoints.value[snapPoints.value.length - 1]
           ) {
             const resistedPosition =
-              snapPoints[snapPoints.length - 1] -
-              Math.sqrt(1 + (snapPoints[snapPoints.length - 1] - position)) *
+              snapPoints.value[snapPoints.value.length - 1] -
+              Math.sqrt(
+                1 + (snapPoints.value[snapPoints.value.length - 1] - position)
+              ) *
                 overDragResistanceFactor;
             animatedPosition.value = resistedPosition;
             return;
           }
 
-          if (position >= snapPoints[0]) {
+          if (position >= snapPoints.value[0]) {
             const resistedPosition =
-              snapPoints[0] +
-              Math.sqrt(1 + (position - snapPoints[0])) *
+              snapPoints.value[0] +
+              Math.sqrt(1 + (position - snapPoints.value[0])) *
                 overDragResistanceFactor;
             animatedPosition.value = resistedPosition;
             return;
@@ -97,7 +100,7 @@ export const useInteractivePanGestureHandler = (
         const destinationPoint = snapPoint(
           gestureTranslationY.value + context.currentPosition,
           gestureVelocityY.value,
-          snapPoints
+          snapPoints.value
         );
 
         /**
@@ -110,8 +113,10 @@ export const useInteractivePanGestureHandler = (
 
         if (
           (scrollableContentOffsetY ? scrollableContentOffsetY.value : 0) > 0 &&
-          context.currentPosition === snapPoints[snapPoints.length - 1] &&
-          animatedPosition.value === snapPoints[snapPoints.length - 1]
+          context.currentPosition ===
+            snapPoints.value[snapPoints.value.length - 1] &&
+          animatedPosition.value ===
+            snapPoints.value[snapPoints.value.length - 1]
         ) {
           return;
         }