@haroldtran/react-native-modals 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haroldtran/react-native-modals",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React Native Modals Library for IOS & Android.",
   "main": "/src/index.tsx",
   "scripts": {
@@ -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";
@@ -90,6 +84,12 @@ class BaseModal extends Component<ModalProps, State> {
     onSwipeRelease: () => {},
     onSwipingOut: () => {},
     useNativeDriver: true,
+    useBlurView: false,
+    blurProps: {
+      blurType: "extraDark",
+      blurAmount: 20,
+      reducedTransparencyFallbackColor: "#000000",
+    },
   };
 
   constructor(props: ModalProps) {
@@ -142,8 +142,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 +186,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 +220,11 @@ class BaseModal extends Component<ModalProps, State> {
       onSwipeOut,
       swipeDirection,
       swipeThreshold,
+      useBlurView,
+      blurProps,
     } = 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;
 
@@ -266,6 +262,8 @@ 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

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,8 @@ export type ModalProps = {
   swipeDirection?: SwipeDirection | Array<SwipeDirection>;
   swipeThreshold?: number;
   useNativeDriver?: boolean;
+  useBlurView?: boolean;
+  blurProps?: BlurViewProps;
 };
 
 export type ModalFooterProps = {
@@ -99,4 +102,6 @@ export type BackdropProps = {
   animationDuration?: number;
   pointerEvents?: "auto" | "none" | "box-none" | "box-only";
   useNativeDriver?: boolean;
+  blurProps?: BlurViewProps;
+  useBlurView?: boolean;
 };