@haroldtran/react-native-modals 0.0.4 → 0.0.6

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@haroldtran/react-native-modals",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "React Native Modals Library for IOS & Android.",
   "main": "/src/index.tsx",
   "scripts": {
     "test": "jest",
-    "prebuild": "yarn && tsc --noEmit"
+    "prebuild": "bun install && tsc --noEmit"
   },
   "files": [
     "src"
@@ -37,6 +37,7 @@
   "license": "MIT",
   "homepage": "https://github.com/phattran1201/react-native-modals",
   "dependencies": {
+    "@sbaiahmed1/react-native-blur": "^4.4.1",
     "babel-plugin-flow-react-proptypes": "^9.1.1",
     "prop-types": "^15.6.0"
   },

package/src/components/Backdrop.tsx

@@ -1,5 +1,6 @@
 // @flow
 
+import { BlurView } from "@sbaiahmed1/react-native-blur";
 import React, { Component } from "react";
 import { Animated, StyleSheet, TouchableOpacity } from "react-native";
 import { BackdropProps } from "../type";
@@ -11,18 +12,19 @@ export default class Backdrop extends Component<BackdropProps> {
     animationDuration: 200,
     visible: false,
     useNativeDriver: true,
+    useBlurView: false,
     onPress: () => {},
+    blurProps: {
+      blurType: "extraDark",
+      blurAmount: 20,
+      reducedTransparencyFallbackColor: "#000000",
+    },
   };
 
   opacity = new Animated.Value(0);
 
   componentDidUpdate(prevProps: BackdropProps) {
-    const {
-      visible,
-      useNativeDriver = true,
-      opacity: toOpacity = 0.5,
-      animationDuration: duration = 200,
-    } = this.props;
+    const { visible, useNativeDriver = true, opacity: toOpacity = 0.5, animationDuration: duration = 200 } = this.props;
     if (prevProps.visible !== visible) {
       const toValue = visible ? toOpacity : 0;
       Animated.timing(this.opacity, {
@@ -38,16 +40,20 @@ export default class Backdrop extends Component<BackdropProps> {
   };
 
   render() {
-    const { onPress, pointerEvents, backgroundColor } = this.props;
+    const { onPress, pointerEvents, backgroundColor, useBlurView, blurProps } = this.props;
     const { opacity } = this;
-    const overlayStyle: any = [
-      StyleSheet.absoluteFill,
-      { backgroundColor, opacity },
-    ];
-    return (
+    const overlayStyle: any = [StyleSheet.absoluteFill, { backgroundColor, opacity }];
+    const _children = (
       <Animated.View pointerEvents={pointerEvents as any} style={overlayStyle}>
         <TouchableOpacity onPress={onPress} style={StyleSheet.absoluteFill} />
       </Animated.View>
     );
+    return useBlurView ? (
+      <BlurView {...blurProps} style={StyleSheet.absoluteFill}>
+        {_children}
+      </BlurView>
+    ) : (
+      _children
+    );
   }
 }

package/src/components/BaseModal.tsx

@@ -1,11 +1,5 @@
 import React, { Component, Fragment } from "react";
-import {
-  Animated,
-  BackHandler,
-  Dimensions,
-  StyleSheet,
-  View,
-} from "react-native";
+import { Animated, BackHandler, Dimensions, StyleSheet, View } from "react-native";
 
 import Animation from "../animations/Animation";
 import FadeAnimation from "../animations/FadeAnimation";
@@ -49,11 +43,7 @@ const styles = StyleSheet.create({
   },
 });
 
-type ModalState =
-  | typeof MODAL_OPENING
-  | typeof MODAL_OPENED
-  | typeof MODAL_CLOSING
-  | typeof MODAL_CLOSED;
+type ModalState = typeof MODAL_OPENING | typeof MODAL_OPENED | typeof MODAL_CLOSING | typeof MODAL_CLOSED;
 
 type State = {
   modalAnimation: Animation;
@@ -90,6 +80,13 @@ class BaseModal extends Component<ModalProps, State> {
     onSwipeRelease: () => {},
     onSwipingOut: () => {},
     useNativeDriver: true,
+    useBlurView: false,
+    isDelay: false,
+    blurProps: {
+      blurType: "extraDark",
+      blurAmount: 20,
+      reducedTransparencyFallbackColor: "#000000",
+    },
   };
 
   constructor(props: ModalProps) {
@@ -109,10 +106,7 @@ class BaseModal extends Component<ModalProps, State> {
     if (this.props.visible) {
       this.show();
     }
-    this.backHandler = BackHandler.addEventListener(
-      HARDWARE_BACK_PRESS_EVENT,
-      this.onHardwareBackPress,
-    );
+    this.backHandler = BackHandler.addEventListener(HARDWARE_BACK_PRESS_EVENT, this.onHardwareBackPress);
   }
 
   componentDidUpdate(prevProps: ModalProps) {
@@ -129,8 +123,7 @@ class BaseModal extends Component<ModalProps, State> {
     this.backHandler?.remove();
   }
 
-  onHardwareBackPress = (): boolean =>
-    this.props.onHardwareBackPress ? this.props.onHardwareBackPress() : false;
+  onHardwareBackPress = (): boolean => (this.props.onHardwareBackPress ? this.props.onHardwareBackPress() : false);
 
   get pointerEvents(): "auto" | "none" {
     const { overlayPointerEvents } = this.props;
@@ -142,8 +135,7 @@ class BaseModal extends Component<ModalProps, State> {
   }
 
   get modalSize(): any {
-    const { width: screenWidth, height: screenHeight } =
-      Dimensions.get("window");
+    const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
     let { width, height } = this.props;
     if (width && width > 0.0 && width <= 1.0) {
       width *= screenWidth;
@@ -187,15 +179,11 @@ class BaseModal extends Component<ModalProps, State> {
     if (Math.abs(event.axis.y)) {
       const lastAxis = Math.abs(this.lastSwipeEvent.layout.y);
       const currAxis = Math.abs(event.axis.y);
-      newOpacity =
-        opacity -
-        (opacity * currAxis) / (Dimensions.get("window").height - lastAxis);
+      newOpacity = opacity - (opacity * currAxis) / (Dimensions.get("window").height - lastAxis);
     } else {
       const lastAxis = Math.abs(this.lastSwipeEvent.layout.x);
       const currAxis = Math.abs(event.axis.x);
-      newOpacity =
-        opacity -
-        (opacity * currAxis) / (Dimensions.get("window").width - lastAxis);
+      newOpacity = opacity - (opacity * currAxis) / (Dimensions.get("window").width - lastAxis);
     }
     this.backdrop?.setOpacity(newOpacity);
   };
@@ -225,10 +213,12 @@ class BaseModal extends Component<ModalProps, State> {
       onSwipeOut,
       swipeDirection,
       swipeThreshold,
+      useBlurView,
+      blurProps,
+      isDelay,
     } = this.props;
 
-    const overlayVisible =
-      hasOverlay && [MODAL_OPENING, MODAL_OPENED].includes(modalState);
+    const overlayVisible = hasOverlay && [MODAL_OPENING, MODAL_OPENED].includes(modalState);
     const round = rounded ? styles.round : null;
     const hidden = modalState === MODAL_CLOSED && styles.hidden;
 
@@ -239,10 +229,7 @@ class BaseModal extends Component<ModalProps, State> {
           hasFooter: Boolean(footer),
         }}
       >
-        <View
-          pointerEvents={this.isSwipingOut ? "none" : "auto"}
-          style={[styles.container, hidden]}
-        >
+        <View pointerEvents={this.isSwipingOut ? "none" : "auto"} style={[styles.container, hidden]}>
           <DraggableView
             style={StyleSheet.flatten([styles.draggableView, style])}
             onMove={this.handleMove}
@@ -266,19 +253,13 @@ class BaseModal extends Component<ModalProps, State> {
                   opacity={overlayOpacity}
                   animationDuration={animationDuration}
                   useNativeDriver={useNativeDriver}
+                  useBlurView={useBlurView}
+                  blurProps={blurProps}
                 />
                 <Animated.View style={pan.getLayout()} onLayout={onLayout}>
-                  <Animated.View
-                    style={[
-                      styles.modal,
-                      round,
-                      this.modalSize,
-                      modalStyle,
-                      modalAnimation.getAnimations(),
-                    ]}
-                  >
+                  <Animated.View style={[styles.modal, round, this.modalSize, modalStyle, modalAnimation.getAnimations()]}>
                     {modalTitle}
-                    {modalState === MODAL_OPENED && children}
+                    {isDelay ? (modalState === MODAL_OPENED ? children : null) : children}
                     {footer}
                   </Animated.View>
                 </Animated.View>

package/src/type.ts

@@ -1,5 +1,6 @@
 // TypeScript types for the library
 
+import { BlurViewProps } from "@sbaiahmed1/react-native-blur";
 import { ReactNode } from "react";
 import Animation from "./animations/Animation";
 
@@ -59,6 +60,9 @@ export type ModalProps = {
   swipeDirection?: SwipeDirection | Array<SwipeDirection>;
   swipeThreshold?: number;
   useNativeDriver?: boolean;
+  useBlurView?: boolean;
+  blurProps?: BlurViewProps;
+  isDelay?: boolean;
 };
 
 export type ModalFooterProps = {
@@ -99,4 +103,6 @@ export type BackdropProps = {
   animationDuration?: number;
   pointerEvents?: "auto" | "none" | "box-none" | "box-only";
   useNativeDriver?: boolean;
+  blurProps?: BlurViewProps;
+  useBlurView?: boolean;
 };