@haroldtran/react-native-modals 0.0.6 → 0.0.10

package/package.json

@@ -1,26 +1,7 @@
 {
   "name": "@haroldtran/react-native-modals",
-  "version": "0.0.6",
+  "version": "0.0.10",
   "description": "React Native Modals Library for IOS & Android.",
-  "main": "/src/index.tsx",
-  "scripts": {
-    "test": "jest",
-    "prebuild": "bun install && tsc --noEmit"
-  },
-  "files": [
-    "src"
-  ],
-  "exports": {
-    ".": "./src/index.tsx",
-    "./package.json": "./package.json"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/phattran1201/react-native-modals.git"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
   "keywords": [
     "modal",
     "dialog",
@@ -33,56 +14,51 @@
     "haroldtran",
     "phattran1201"
   ],
-  "author": "Harold Tran <phattran1201@gmail.com> (https://github.com/phattran1201)",
-  "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"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/phattran1201/react-native-modals.git"
   },
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+  "license": "MIT",
+  "author": "Harold Tran <phattran1201@gmail.com> (https://github.com/phattran1201)",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./package.json": "./package.json"
   },
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
+    "release": "npm login && npm publish && git push --follow-tags && gh release create v$(node -p \"require('./package.json').version\") --generate-notes",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "tsc": "tsc --noEmit"
+  },
+  "dependencies": {},
   "devDependencies": {
-    "@types/react": "^19.2.0",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-typescript": "^7.28.5",
+    "@react-native/babel-preset": "^0.84.1",
+    "@react-native/eslint-config": "^0.84.1",
+    "@types/react": "^19.2.14",
     "@types/react-native": "^0.73.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.0.2",
-    "babel-jest": "^23.0.1",
-    "babel-preset-react-native": "^4.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "eslint": "^4.11.0",
-    "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jest": "^21.17.0",
-    "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint-plugin-react": "^7.5.1",
-    "flow-bin": "^0.59.0",
-    "jest": "^22.0.0",
-    "jest-enzyme": "^7.1.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-native": ">=0.79.0",
-    "react-native-mock-render": "^0.0.26",
-    "rimraf": "^2.6.2"
+    "eslint": "^10.1.0",
+    "prettier": "^3.8.1",
+    "react": "^18.0.0",
+    "react-native": ">=0.74.0",
+    "typescript": "^6.0.2"
   },
-  "jest": {
-    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
-    "setupFiles": [
-      "./__tests__/setup-tests.js"
-    ],
-    "testRegex": "__tests__/.+\\.test.js$",
-    "modulePathIgnorePatterns": [
-      "modals-example/node_modules"
-    ]
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
   },
   "packageManager": "yarn@4.9.2",
-  "trustedDependencies": [
-    "core-js",
-    "fsevents"
-  ]
-}
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/BottomModal.tsx

@@ -1,7 +1,5 @@
-// @flow
-
-import ModalPortal from './ModalPortal';
 import Modal from './Modal';
+import ModalPortal from './ModalPortal';
 
 class BottomModal extends Modal {
   show() {

package/src/Modal.tsx

@@ -1,15 +1,13 @@
-import React from "react";
-import ModalPortal from "./ModalPortal";
-import type { ModalProps } from "./type";
+import React from 'react';
+import ModalPortal from './ModalPortal';
+import type { ModalProps } from './type';
 
 export default class Modal extends React.Component<ModalProps> {
   id: string | null = null;
 
   componentDidMount() {
     if (!ModalPortal.ref) {
-      throw new Error(
-        `Can not use ${this.constructor.name} component until ModalPortal is mounted`,
-      );
+      throw new Error(`Can not use ${this.constructor.name} component until ModalPortal is mounted`);
     }
     if (this.props.visible) {
       this.show();

package/src/ModalPortal.tsx

@@ -1,20 +1,28 @@
-import React from "react";
-import { DeviceEventEmitter } from "react-native";
-import BaseModal from "./components/BaseModal";
-import BottomModal from "./components/BottomModal";
-import type { EmitModalPortal, ModalProps, StackItem } from "./type";
+import React from 'react';
+import { DeviceEventEmitter } from 'react-native';
+import BaseModal from './components/BaseModal';
+import BottomModal from './components/BottomModal';
+import type { EmitModalPortal, ModalProps, StackItem } from './type';
 
 let modal: ModalPortal | null = null;
+let modalCounter = 0;
+
+export default class ModalPortal extends React.Component<{}, { stack: StackItem[] }> {
+  private dismissHandlers = new Map<string, () => void>();
 
-class ModalPortal extends React.Component<{}, { stack: StackItem[] }> {
-  id: number;
   constructor(props: {}) {
     super(props);
     this.state = { stack: [] };
-    this.id = 0;
     modal = this;
   }
 
+  componentWillUnmount() {
+    if (modal === this) {
+      modal = null;
+    }
+    this.dismissHandlers.clear();
+  }
+
   static get ref() {
     return modal;
   }
@@ -23,10 +31,7 @@ class ModalPortal extends React.Component<{}, { stack: StackItem[] }> {
     return modal?.state.stack.length ?? 0;
   }
 
-  static show(
-    children: React.ReactNode,
-    props: ModalProps & { key?: string; type?: "modal" | "bottomModal" } = {},
-  ) {
+  static show(children: React.ReactNode, props: ModalProps & { key?: string } = {}) {
     return modal!.show({ children, ...props, key: props.key });
   }
 
@@ -43,104 +48,132 @@ class ModalPortal extends React.Component<{}, { stack: StackItem[] }> {
   }
 
   get current() {
-    if (this.state.stack.length) {
-      return this.state.stack[this.state.stack.length - 1].key;
+    const { stack } = this.state;
+    for (let i = stack.length - 1; i >= 0; i -= 1) {
+      if (stack[i].visible) {
+        return stack[i].key;
+      }
     }
     return null;
   }
 
-  generateKey = () => `modal-${this.id++}`;
-
-  getIndex = (key: string) => this.state.stack.findIndex((i) => i.key === key);
+  generateKey = () => {
+    modalCounter++;
+    return `modal-${modalCounter}`;
+  };
 
-  getProps = (
-    props: ModalProps & { key?: string; type?: "modal" | "bottomModal" },
-  ) => {
+  getProps = (props: ModalProps & { key?: string }) => {
     const key = props?.key || this.generateKey();
     return { visible: true, ...props, key } as StackItem;
   };
 
-  show = (
-    props: ModalProps & { key?: string; type?: "modal" | "bottomModal" },
-  ) => {
+  show = (props: ModalProps & { key?: string }) => {
     const mergedProps = this.getProps(props);
-    this.setState(({ stack }) => ({ stack: stack.concat(mergedProps) }));
-    DeviceEventEmitter.emit("ModalPortal", {
-      type: "show",
-      key: mergedProps.key,
-      stack: this.state.stack,
-    } as EmitModalPortal);
+
+    this.setState(
+      ({ stack }) => {
+        const index = stack.findIndex((i) => i.key === mergedProps.key);
+        let newStack;
+        if (index > -1) {
+          const item = { ...stack[index], ...mergedProps };
+          newStack = stack.filter((i) => i.key !== mergedProps.key).concat(item);
+        } else {
+          newStack = stack.concat(mergedProps);
+        }
+        return { stack: newStack };
+      },
+      () => {
+        DeviceEventEmitter.emit('ModalPortal', {
+          type: 'show',
+          key: mergedProps.key,
+          stack: this.state.stack,
+        } as EmitModalPortal);
+      },
+    );
     return mergedProps.key;
   };
 
   update = (key: string, props: ModalProps) => {
     const mergedProps = this.getProps({ ...props, key });
-    this.setState(({ stack }) => {
-      const index = this.getIndex(key);
-      if (index >= 0) {
-        stack[index] = { ...stack[index], ...mergedProps };
-        DeviceEventEmitter.emit("ModalPortal", {
-          type: mergedProps.visible ? "update" : "dismiss",
+    this.setState(
+      ({ stack }) => {
+        const index = stack.findIndex((i) => i.key === key);
+        if (index === -1) {
+          return null;
+        }
+        const isShowing = !stack[index].visible && mergedProps.visible;
+        const newStack = [...stack];
+
+        if (isShowing) {
+          const item = { ...newStack[index], ...mergedProps };
+          newStack.splice(index, 1);
+          newStack.push(item);
+        } else {
+          newStack[index] = { ...newStack[index], ...mergedProps };
+        }
+
+        return { stack: newStack };
+      },
+      () => {
+        DeviceEventEmitter.emit('ModalPortal', {
+          type: mergedProps.visible ? 'update' : 'dismiss',
           key,
-          stack,
+          stack: this.state.stack,
         } as EmitModalPortal);
-      }
-      return { stack };
-    });
+      },
+    );
   };
 
   dismiss = (key: string | null = this.current) => {
     if (!key) return;
-    const idx = this.getIndex(key);
-    if (idx < 0) return;
-    const props = { ...this.state.stack[idx], visible: false };
-    this.update(key, props);
+    this.update(key, { visible: false });
   };
 
   dismissAll = () => {
-    this.state.stack.forEach(({ key }) => this.dismiss(key));
+    this.setState(
+      ({ stack }) => {
+        if (stack.every((item) => !item.visible)) return null;
+        const newStack = stack.map((item) => ({ ...item, visible: false }));
+        return { stack: newStack };
+      },
+      () => {
+        DeviceEventEmitter.emit('ModalPortal', {
+          type: 'dismissAll',
+          stack: this.state.stack,
+        } as EmitModalPortal);
+      },
+    );
   };
 
   dismissHandler = (key: string) => {
-    // dismiss hander: which will remove data from stack and call onDismissed callback
-    const idx = this.getIndex(key);
-    if (idx < 0) return;
-    const { onDismiss = () => {} } = this.state.stack[idx];
+    const item = this.state.stack.find((i) => i.key === key);
+    if (!item) return;
+
     this.setState(
       ({ stack }) => ({ stack: stack.filter((i) => i.key !== key) }),
-      onDismiss,
+      () => {
+        item.onDismiss?.();
+        this.dismissHandlers.delete(key);
+      },
     );
   };
 
-  renderModal = (item: StackItem) => {
-    const { type = "modal", key, ...props } = item;
-    if (type === "modal") {
-      return (
-        <BaseModal
-          {...props}
-          key={key}
-          onDismiss={() => this.dismissHandler(key)}
-        />
-      );
-    } else if (type === "bottomModal") {
-      return (
-        <BottomModal
-          {...props}
-          key={key}
-          onDismiss={() => this.dismissHandler(key)}
-        />
-      );
+  getStableDismissHandler = (key: string) => {
+    let handler = this.dismissHandlers.get(key);
+    if (!handler) {
+      handler = () => this.dismissHandler(key);
+      this.dismissHandlers.set(key, handler);
     }
+    return handler;
+  };
+
+  renderModal = (item: StackItem) => {
+    const { type = 'modal', key, ...props } = item;
+    const Component = type === 'bottomModal' ? BottomModal : BaseModal;
+    return <Component {...props} key={key} onDismiss={this.getStableDismissHandler(key)} />;
   };
 
   render() {
-    return this.state?.stack
-      ?.filter(
-        (item, index, self) =>
-          index === self?.findIndex((t) => t?.key === item?.key),
-      )
-      ?.map(this.renderModal);
+    return this.state.stack.map(this.renderModal);
   }
 }
-
-export default ModalPortal;

package/src/animations/Animation.tsx

@@ -1,37 +1,35 @@
-// @flow
-
 /* eslint class-methods-use-this: ["error", { "exceptMethods": ["in", "out", "getAnimations"] }] */
 /* eslint no-unused-vars: ["error", { "argsIgnorePattern": "onFinished" }] */
 
-import { Animated } from "react-native";
+import { Animated } from 'react-native';
 
 export type AnimationConfig = {
   initialValue?: number;
   useNativeDriver?: boolean;
+  animationDuration?: number;
 };
 
 // Base Animation class
 export default class Animation {
   useNativeDriver: boolean;
   animate: Animated.Value;
+  animationDuration: number;
 
-  constructor({
-    initialValue = 0,
-    useNativeDriver = true,
-  }: AnimationConfig = {}) {
+  constructor({ initialValue = 0, useNativeDriver = true, animationDuration = 200 }: AnimationConfig = {}) {
     this.animate = new Animated.Value(initialValue);
     this.useNativeDriver = useNativeDriver;
+    this.animationDuration = animationDuration;
   }
 
-  in(onFinished?: Function): void {
-    throw Error("not implemented yet");
+  in(onFinished?: Function, duration?: number): void {
+    throw Error('not implemented yet');
   }
 
-  out(onFinished?: Function): void {
-    throw Error("not implemented yet");
+  out(onFinished?: Function, duration?: number): void {
+    throw Error('not implemented yet');
   }
 
   getAnimations(): Object {
-    throw Error("not implemented yet");
+    throw Error('not implemented yet');
   }
 }

package/src/animations/FadeAnimation.tsx

@@ -1,36 +1,26 @@
-// @flow
-
-import { Animated } from "react-native";
-import Animation, { type AnimationConfig } from "./Animation";
+import { Animated } from 'react-native';
+import Animation, { type AnimationConfig } from './Animation';
 
 type FadeAnimationConfig = AnimationConfig & {
   animationDuration?: number;
 };
-
 export default class FadeAnimation extends Animation {
-  animationDuration: number;
-
-  constructor({
-    initialValue = 0,
-    useNativeDriver = false,
-    animationDuration = 200,
-  }: FadeAnimationConfig = {}) {
-    super({ initialValue, useNativeDriver });
-    this.animationDuration = animationDuration;
+  constructor({ initialValue = 0, animationDuration = 200, useNativeDriver = true }: AnimationConfig = {}) {
+    super({ initialValue, useNativeDriver, animationDuration });
   }
 
-  in(onFinished: Function = () => {}): void {
+  in(onFinished: (result?: { finished: boolean }) => void = () => {}, duration?: number): void {
     Animated.timing(this.animate, {
       toValue: 1,
-      duration: this.animationDuration,
+      duration: duration || this.animationDuration,
       useNativeDriver: this.useNativeDriver,
     }).start((result: { finished: boolean }) => onFinished(result));
   }
 
-  out(onFinished: Function = () => {}): void {
+  out(onFinished: (result?: { finished: boolean }) => void = () => {}, duration?: number): void {
     Animated.timing(this.animate, {
       toValue: 0,
-      duration: this.animationDuration,
+      duration: duration || this.animationDuration,
       useNativeDriver: this.useNativeDriver,
     }).start((result: { finished: boolean }) => onFinished(result));
   }

package/src/animations/ScaleAnimation.tsx

@@ -1,10 +1,17 @@
-// @flow
-
-import { Animated } from "react-native";
-import Animation from "./Animation";
+import { Animated } from 'react-native';
+import Animation from './Animation';
 
 export default class ScaleAnimation extends Animation {
-  in(onFinished: (result?: { finished: boolean }) => void = () => {}): void {
+  in(onFinished: (result?: { finished: boolean }) => void = () => {}, duration?: number): void {
+    const finalDuration = duration || this.animationDuration;
+    if (finalDuration) {
+      Animated.timing(this.animate, {
+        toValue: 1,
+        duration: finalDuration,
+        useNativeDriver: this.useNativeDriver,
+      }).start((result: { finished: boolean }) => onFinished(result));
+      return;
+    }
     Animated.spring(this.animate, {
       toValue: 1,
       velocity: 0,
@@ -14,10 +21,10 @@ export default class ScaleAnimation extends Animation {
     }).start((result: { finished: boolean }) => onFinished(result));
   }
 
-  out(onFinished: (result?: { finished: boolean }) => void = () => {}): void {
+  out(onFinished: (result?: { finished: boolean }) => void = () => {}, duration?: number): void {
     Animated.timing(this.animate, {
       toValue: 0,
-      duration: 200,
+      duration: duration || this.animationDuration,
       useNativeDriver: this.useNativeDriver,
     }).start((result: { finished: boolean }) => onFinished(result));
   }

package/src/animations/SlideAnimation.tsx

@@ -1,46 +1,68 @@
-import { Animated, Dimensions } from "react-native";
-import Animation from "./Animation";
+import { Animated, Dimensions } from 'react-native';
+import Animation from './Animation';
 
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+let { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
 
-export type SlideFrom = "top" | "bottom" | "left" | "right";
+Dimensions.addEventListener('change', ({ window }) => {
+  SCREEN_WIDTH = window.width;
+  SCREEN_HEIGHT = window.height;
+});
+
+export type SlideFrom = 'top' | 'bottom' | 'left' | 'right';
 
 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";
+  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,
+    animationDuration = 200,
     slideFrom = SlideAnimation.SLIDE_FROM_BOTTOM,
   } = {}) {
-    super({ initialValue, useNativeDriver });
+    super({ initialValue, useNativeDriver, animationDuration });
     this.slideFrom = slideFrom as SlideFrom;
   }
 
-  in(onFinished: Animated.EndCallback = () => {}, options: any = {}): void {
+  in(onFinished: Animated.EndCallback = () => {}, duration?: number): void {
+    const finalDuration = duration || this.animationDuration;
+    if (finalDuration) {
+      Animated.timing(this.animate, {
+        toValue: 1,
+        duration: finalDuration,
+        useNativeDriver: this.useNativeDriver,
+      }).start(onFinished);
+      return;
+    }
     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 {
+  out(onFinished: Animated.EndCallback = () => {}, duration?: number): void {
+    const finalDuration = duration || this.animationDuration;
+    if (finalDuration) {
+      Animated.timing(this.animate, {
+        toValue: 0,
+        duration: finalDuration,
+        useNativeDriver: this.useNativeDriver,
+      }).start(onFinished);
+      return;
+    }
     Animated.spring(this.animate, {
       toValue: 0,
       velocity: 0,
       tension: 65,
       friction: 11,
       useNativeDriver: this.useNativeDriver,
-      ...options,
     }).start(onFinished);
   }