1 files changed, 36 insertions, 0 deletions
diff --git a/src/view/com/util/BottomSheetCustomBackdrop.tsx b/src/view/com/util/BottomSheetCustomBackdrop.tsx
new file mode 100644
index 000000000..e175b33a5
--- /dev/null
+++ b/src/view/com/util/BottomSheetCustomBackdrop.tsx
@@ -0,0 +1,36 @@
+import React, {useMemo} from 'react'
+import {GestureResponderEvent, TouchableWithoutFeedback} from 'react-native'
+import {BottomSheetBackdropProps} from '@gorhom/bottom-sheet'
+import Animated, {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated'
+
+export function createCustomBackdrop(
+  onClose?: ((event: GestureResponderEvent) => void) | undefined,
+): React.FC<BottomSheetBackdropProps> {
+  const CustomBackdrop = ({animatedIndex, style}: BottomSheetBackdropProps) => {
+    // animated variables
+    const opacity = useAnimatedStyle(() => ({
+      opacity: interpolate(
+        animatedIndex.value, // current snap index
+        [-1, 0], // input range
+        [0, 0.5], // output range
+        Extrapolate.CLAMP,
+      ),
+    }))
+
+    const containerStyle = useMemo(
+      () => [style, {backgroundColor: '#000'}, opacity],
+      [style, opacity],
+    )
+
+    return (
+      <TouchableWithoutFeedback onPress={onClose}>
+        <Animated.View style={containerStyle} />
+      </TouchableWithoutFeedback>
+    )
+  }
+  return CustomBackdrop
+}