@haroldtran/react-native-modals 0.0.7 → 0.0.10

package/src/components/ModalTitle.tsx

@@ -1,11 +1,9 @@
-// @flow
+import React from 'react';
+import { PixelRatio, Platform, StyleSheet, Text, View } from 'react-native';
+import { Positions } from '../constants/Constants';
+import type { ModalTitleProps } from '../type';
 
-import React from "react";
-import { PixelRatio, Platform, StyleSheet, Text, View } from "react-native";
-import { Positions } from "../constants/Constants";
-import type { ModalTitleProps } from "../type";
-
-const isAndroid = Platform.OS === "android";
+const isAndroid = Platform.OS === 'android';
 
 const styles = StyleSheet.create({
   title: {
@@ -16,24 +14,18 @@ const styles = StyleSheet.create({
   },
   titleBar: {
     borderBottomWidth: 1 / PixelRatio.get(),
-    backgroundColor: "#F9F9FB",
-    borderColor: "#DAD9DC",
+    backgroundColor: '#F9F9FB',
+    borderColor: '#DAD9DC',
   },
   text: {
-    fontWeight: isAndroid ? "400" : "500",
-    fontFamily: isAndroid ? "sans-serif-medium" : "System",
+    fontWeight: isAndroid ? '400' : '500',
+    fontFamily: isAndroid ? 'sans-serif-medium' : 'System',
     fontSize: isAndroid ? 19 : 15,
-    color: "#151822",
+    color: '#151822',
   },
 });
 
-const ModalTitle = ({
-  title,
-  style,
-  textStyle,
-  hasTitleBar = true,
-  align = "center",
-}: ModalTitleProps) => {
+const ModalTitle = ({ title, style, textStyle, hasTitleBar = true, align = 'center' }: ModalTitleProps) => {
   const titleBar = hasTitleBar ? styles.titleBar : null;
   const titleAlign = { alignItems: Positions[align as keyof typeof Positions] };
 

package/src/index.tsx

@@ -1,17 +1,17 @@
-import Animation from "./animations/Animation";
-import FadeAnimation from "./animations/FadeAnimation";
-import ScaleAnimation from "./animations/ScaleAnimation";
-import SlideAnimation from "./animations/SlideAnimation";
-import BottomModal from "./BottomModal";
-import Backdrop from "./components/Backdrop";
-import DraggableView from "./components/DraggableView";
-import ModalButton from "./components/ModalButton";
-import ModalContent from "./components/ModalContent";
-import ModalFooter from "./components/ModalFooter";
-import ModalTitle from "./components/ModalTitle";
-import Modal from "./Modal";
-import ModalPortal from "./ModalPortal";
-export * from "./type";
+import Animation from './animations/Animation';
+import FadeAnimation from './animations/FadeAnimation';
+import ScaleAnimation from './animations/ScaleAnimation';
+import SlideAnimation from './animations/SlideAnimation';
+import BottomModal from './BottomModal';
+import Backdrop from './components/Backdrop';
+import DraggableView from './components/DraggableView';
+import ModalButton from './components/ModalButton';
+import ModalContent from './components/ModalContent';
+import ModalFooter from './components/ModalFooter';
+import ModalTitle from './components/ModalTitle';
+import Modal from './Modal';
+import ModalPortal from './ModalPortal';
+export * from './type';
 
 export {
   Animation,

package/src/type.ts

@@ -1,22 +1,19 @@
-// TypeScript types for the library
-
-import { BlurViewProps } from "@sbaiahmed1/react-native-blur";
-import { ReactNode } from "react";
-import Animation from "./animations/Animation";
+import { ReactNode } from 'react';
+import Animation from './animations/Animation';
 
 export type StackItem = ModalProps & {
   key: string;
-  type?: "modal" | "bottomModal";
+  type?: 'modal' | 'bottomModal';
   onDismiss?: () => void;
 };
 
 export type EmitModalPortal = {
-  type: "show" | "update" | "dismiss";
+  type: 'show' | 'update' | 'dismiss' | 'dismissAll';
   key?: string;
   stack: StackItem[];
 };
 
-export type SwipeDirection = "up" | "down" | "left" | "right";
+export type SwipeDirection = 'up' | 'down' | 'left' | 'right';
 
 export type DragEvent = {
   axis: {
@@ -39,14 +36,18 @@ export type ModalProps = {
   height?: number;
   rounded?: boolean;
   hasOverlay?: boolean;
-  overlayPointerEvents?: "auto" | "none";
+  overlayPointerEvents?: 'auto' | 'none';
   overlayBackgroundColor?: string;
   overlayOpacity?: number;
+  overlayAnimationDelay?: number;
+
   modalTitle?: any;
   modalAnimation?: Animation;
   modalStyle?: any;
   style?: any;
   animationDuration?: number;
+  animationDurationIn?: number;
+  animationDurationOut?: number;
   onTouchOutside?: () => void;
   onHardwareBackPress?: () => boolean;
   onShow?: () => void;
@@ -60,9 +61,9 @@ export type ModalProps = {
   swipeDirection?: SwipeDirection | Array<SwipeDirection>;
   swipeThreshold?: number;
   useNativeDriver?: boolean;
-  useBlurView?: boolean;
-  blurProps?: BlurViewProps;
+
   isDelay?: boolean;
+  type?: 'modal' | 'bottomModal';
 };
 
 export type ModalFooterProps = {
@@ -74,7 +75,7 @@ export type ModalFooterProps = {
 export type ModalButtonProps = {
   text: string;
   onPress?: () => void;
-  align?: "left" | "right" | "center" | string;
+  align?: 'left' | 'right' | 'center' | string;
   style?: any;
   textStyle?: any;
   disabled?: boolean;
@@ -86,7 +87,7 @@ export type ModalTitleProps = {
   title: any;
   style?: any;
   textStyle?: any;
-  align?: "left" | "right" | "center" | string;
+  align?: 'left' | 'right' | 'center' | string;
   hasTitleBar?: boolean;
 };
 
@@ -101,8 +102,7 @@ export type BackdropProps = {
   onPress?: () => void;
   backgroundColor?: string;
   animationDuration?: number;
-  pointerEvents?: "auto" | "none" | "box-none" | "box-only";
+  animationDelay?: number;
+  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only';
   useNativeDriver?: boolean;
-  blurProps?: BlurViewProps;
-  useBlurView?: boolean;
 };

package/src/components/SlideAnimation.tsx

@@ -1,91 +0,0 @@
-// @flow
-
-import { Animated, Dimensions } from "react-native";
-import Animation, { AnimationConfig } from "../animations/Animation";
-
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
-
-type SlideFrom = "top" | "bottom" | "left" | "right";
-type SlideAnimationConfig = AnimationConfig & {
-  slideFrom?: SlideFrom;
-};
-
-export default class SlideAnimation extends Animation {
-  slideFrom: SlideFrom;
-
-  static SLIDE_FROM_TOP: SlideFrom = "top";
-  static SLIDE_FROM_BOTTOM: SlideFrom = "bottom";
-  static SLIDE_FROM_LEFT: SlideFrom = "left";
-  static SLIDE_FROM_RIGHT: SlideFrom = "right";
-
-  constructor({
-    initialValue = 0,
-    useNativeDriver = true,
-    slideFrom = SlideAnimation.SLIDE_FROM_BOTTOM,
-  }: SlideAnimationConfig = {}) {
-    super({ initialValue, useNativeDriver });
-    this.slideFrom = slideFrom;
-  }
-
-  in(onFinished: Animated.EndCallback = () => {}, options: any = {}): void {
-    Animated.spring(this.animate, {
-      toValue: 1,
-      velocity: 0,
-      tension: 65,
-      friction: 11,
-      useNativeDriver: this.useNativeDriver,
-      ...options,
-    }).start(onFinished);
-  }
-
-  out(onFinished: Animated.EndCallback = () => {}, options: any = {}): void {
-    Animated.spring(this.animate, {
-      toValue: 0,
-      velocity: 0,
-      tension: 65,
-      friction: 11,
-      useNativeDriver: this.useNativeDriver,
-      ...options,
-    }).start(onFinished);
-  }
-
-  getAnimations(): any {
-    const transform: any[] = [];
-    if (this.slideFrom === SlideAnimation.SLIDE_FROM_TOP) {
-      transform.push({
-        translateY: this.animate.interpolate({
-          inputRange: [0, 1],
-          outputRange: [-SCREEN_HEIGHT, 0],
-        }),
-      });
-    } else if (this.slideFrom === SlideAnimation.SLIDE_FROM_BOTTOM) {
-      transform.push({
-        translateY: this.animate.interpolate({
-          inputRange: [0, 1],
-          outputRange: [SCREEN_HEIGHT, 0],
-        }),
-      });
-    } else if (this.slideFrom === SlideAnimation.SLIDE_FROM_LEFT) {
-      transform.push({
-        translateX: this.animate.interpolate({
-          inputRange: [0, 1],
-          outputRange: [-SCREEN_WIDTH, 0],
-        }),
-      });
-    } else if (this.slideFrom === SlideAnimation.SLIDE_FROM_RIGHT) {
-      transform.push({
-        translateX: this.animate.interpolate({
-          inputRange: [0, 1],
-          outputRange: [SCREEN_WIDTH, 0],
-        }),
-      });
-    } else {
-      throw new Error(`
-        slideFrom: ${this.slideFrom} not supported. 'slideFrom' must be 'top' | 'bottom' | 'left' | 'right'
-      `);
-    }
-    return {
-      transform,
-    };
-  }
-}