feat: update modal component implementation

obytes · Feb 21, 2024 · 304ac31 · 304ac31
1 parent 9838ecc
commit 304ac31
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 30 deletions.
diff --git a/src/ui/core/bottom-sheet/backdrop.tsx b/src/ui/core/bottom-sheet/backdrop.tsx
diff --git a/src/ui/core/bottom-sheet/index.tsx b/src/ui/core/bottom-sheet/index.tsx
diff --git a/src/ui/core/modal.tsx b/src/ui/core/modal.tsx
@@ -28,13 +28,16 @@
  *
  */
 
-import type { BottomSheetModalProps } from '@gorhom/bottom-sheet';
-import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import type {
+  BottomSheetBackdropProps,
+  BottomSheetModalProps,
+} from '@gorhom/bottom-sheet';
+import { BottomSheetModal, useBottomSheet } from '@gorhom/bottom-sheet';
 import * as React from 'react';
 import { Pressable, View } from 'react-native';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 import { Path, Svg } from 'react-native-svg';
 
-import { renderBackdrop } from './bottom-sheet';
 import { Text } from './text';
 
 type ModalProps = BottomSheetModalProps & {
@@ -105,6 +108,29 @@ export const Modal = React.forwardRef(
   }
 );
 
+/**
+ * Custom Backdrop
+ */
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+const CustomBackdrop = ({ style }: BottomSheetBackdropProps) => {
+  const { close } = useBottomSheet();
+  return (
+    <AnimatedPressable
+      onPress={() => close()}
+      entering={FadeIn.duration(50)}
+      exiting={FadeOut.duration(20)}
+      // eslint-disable-next-line react-native/no-inline-styles
+      style={[style, { backgroundColor: 'rgba(0, 0, 0, 0.4)' }]}
+    />
+  );
+};
+
+export const renderBackdrop = (props: BottomSheetBackdropProps) => (
+  <CustomBackdrop {...props} />
+);
+
 /**
  *
  * @param detached