@haroldtran/react-native-modals 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Jack Lam <phattran1201@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,184 @@
+# @haroldtran/react-native-modals
+
+> Cross-platform React Native modal components and utilities for building flexible dialogs, bottom sheets, and animated modals on iOS and Android.
+
+**Maintained and enhanced by [Harold - @phattran1201](https://github.com/phattran1201) 👨‍💻**
+
+## Features
+
+- Declarative `Modal` component with customizable title, content, footer and animations
+- Bottom sheet-style `BottomModal`
+- Imperative `ModalPortal` API for showing/updating/dismissing modals from anywhere in your app
+- Built-in animations: `FadeAnimation`, `ScaleAnimation`, `SlideAnimation` and the base `Animation` class for custom animations
+- Backdrop control and swipe-to-dismiss support
+- TypeScript types included
+
+---
+
+## Installation
+
+Install the published package (scoped):
+
+```bash
+npm install --save @haroldtran/react-native-modals
+# or
+yarn add @haroldtran/react-native-modals
+```
+
+Peer dependencies: react, react-native
+
+---
+
+## Quick Setup
+
+The library exposes an imperative portal that must be mounted near the root of your app. Add `ModalPortal` to your app root so the portal can render modals:
+
+```jsx
+import React from 'react';
+import { ModalPortal } from '@haroldtran/react-native-modals';
+
+export default function Root({ children }) {
+  return (
+    <>
+      {children}
+      <ModalPortal />
+    </>
+  );
+}
+```
+
+If you use Redux or other providers, mount `ModalPortal` alongside them.
+
+---
+
+## Basic Usage
+
+```jsx
+import React, { useState } from 'react';
+import { View, Button, Text } from 'react-native';
+import { Modal, ModalContent } from '@haroldtran/react-native-modals';
+
+export default function Example() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View>
+      <Button title="Show Modal" onPress={() => setVisible(true)} />
+
+      <Modal
+        visible={visible}
+        onTouchOutside={() => setVisible(false)}
+      >
+        <ModalContent>
+          <Text>Hello from the modal</Text>
+        </ModalContent>
+      </Modal>
+    </View>
+  );
+}
+```
+
+---
+
+## Imperative API (ModalPortal)
+
+Use the `ModalPortal` to show modals programmatically from anywhere in your app. The portal returns an id which you can use to update or dismiss that modal.
+
+```jsx
+import { ModalPortal } from '@haroldtran/react-native-modals';
+
+// Show a modal and keep the returned id
+const id = ModalPortal.show(
+  <View>
+    <Text>Imperative modal</Text>
+  </View>
+);
+
+// Update the modal content later
+ModalPortal.update(id, {
+  children: (
+    <View>
+      <Text>Updated</Text>
+    </View>
+  ),
+});
+
+// Dismiss a specific modal
+ModalPortal.dismiss(id);
+
+// Dismiss all open modals
+ModalPortal.dismissAll();
+```
+
+---
+
+## Animations
+
+The library includes a base `Animation` class and several concrete implementations:
+
+- `FadeAnimation` — fade in/out
+- `ScaleAnimation` — scale from/to a value
+- `SlideAnimation` — slide from `top`, `bottom`, `left` or `right`
+
+Example: passing a `SlideAnimation` to a `Modal`
+
+```jsx
+import { Modal, SlideAnimation } from '@haroldtran/react-native-modals';
+
+<Modal
+  visible={visible}
+  modalAnimation={new SlideAnimation({ slideFrom: 'bottom' })}
+>
+  <ModalContent />
+</Modal>
+```
+
+Create a custom animation by extending `Animation` and overriding `in`, `out` and `getAnimations()`.
+
+---
+
+## Components & Types (exports)
+
+The package exports the following components and TypeScript types:
+
+- Modal (default export)
+- BottomModal
+- ModalPortal
+- Backdrop
+- ModalButton
+- ModalContent
+- ModalTitle
+- ModalFooter
+- Animation, FadeAnimation, ScaleAnimation, SlideAnimation
+
+Types:
+
+- DragEvent, SwipeDirection, ModalProps, ModalFooterProps, ModalButtonProps, ModalTitleProps, ModalContentProps, BackdropProps
+
+For more details see the `src` folder and the types in `src/type.ts`.
+
+---
+
+## Tips & Notes
+
+- The `ModalPortal` must be mounted for the imperative APIs to work.
+- `Modal` supports swipe-to-dismiss and provides callbacks for swipe move, release and completed swipe events.
+- The modal backdrop, overlay color and opacity are configurable via props.
+
+---
+
+## Contributors
+
+<table>
+    <tbody>
+        <tr>
+            <td align="center">
+                <a href="https://github.com/phattran1201">
+                    <img src="https://avatars.githubusercontent.com/u/36856455" width="100;" alt="phattran1201"/>
+                    <br />
+                    <sub><b>Harold Tran</b></sub>
+                </a>
+            </td>
+        </tr>
+    </tbody>
+</table>

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@haroldtran/react-native-modals",
+  "version": "0.0.1",
+  "description": "React Native Modals Library for IOS & Android.",
+  "main": "/src/index.tsx",
+  "scripts": {
+    "test": "jest",
+    "prebuild": "yarn && 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",
+    "react-native",
+    "react-native-modals",
+    "modals",
+    "react-component",
+    "ios",
+    "android",
+    "haroldtran",
+    "phattran1201"
+  ],
+  "author": "Harold Tran <phattran1201@gmail.com> (https://github.com/phattran1201)",
+  "license": "MIT",
+  "homepage": "https://github.com/phattran1201/react-native-modals",
+  "dependencies": {
+    "babel-plugin-flow-react-proptypes": "^9.1.1",
+    "prop-types": "^15.6.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@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"
+  },
+  "jest": {
+    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
+    "setupFiles": [
+      "./__tests__/setup-tests.js"
+    ],
+    "testRegex": "__tests__/.+\\.test.js$",
+    "modulePathIgnorePatterns": [
+      "modals-example/node_modules"
+    ]
+  },
+  "packageManager": "yarn@4.9.2"
+}

package/src/BottomModal.tsx

@@ -0,0 +1,13 @@
+// @flow
+
+import ModalPortal from './ModalPortal';
+import Modal from './Modal';
+
+class BottomModal extends Modal {
+  show() {
+    const { children, ...options } = this.props;
+    this.id = ModalPortal.show(children, { ...options, type: 'bottomModal' });
+  }
+}
+
+export default BottomModal;

package/src/Modal.tsx

@@ -0,0 +1,61 @@
+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`,
+      );
+    }
+    if (this.props.visible) {
+      this.show();
+    }
+  }
+
+  componentDidUpdate(prevProps: ModalProps) {
+    if (prevProps.visible !== this.props.visible) {
+      if (this.props.visible) {
+        this.show();
+      } else {
+        this.dismiss();
+      }
+    }
+    //  always re-render
+    if (this.id) {
+      this.update();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.id) {
+      this.dismiss();
+    }
+  }
+
+  show() {
+    const { children, ...options } = this.props;
+    this.id = ModalPortal.show(children, options);
+  }
+
+  dismiss() {
+    if (this.id) {
+      ModalPortal.dismiss(this.id);
+      this.id = null;
+    }
+  }
+
+  update() {
+    const { visible: _, ...props } = this.props;
+    if (this.id) {
+      ModalPortal.update(this.id, props);
+    }
+  }
+
+  render() {
+    return null;
+  }
+}

package/src/ModalPortal.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import { DeviceEventEmitter } from "react-native";
+import BaseModal from "./components/BaseModal";
+import BottomModal from "./components/BottomModal";
+import type { ModalProps } from "./type";
+
+type StackItem = ModalProps & {
+  key: string;
+  type?: "modal" | "bottomModal";
+  onDismiss?: () => void;
+};
+
+let modal: ModalPortal | null = null;
+
+class ModalPortal extends React.Component<{}, { stack: StackItem[] }> {
+  id: number;
+  constructor(props: {}) {
+    super(props);
+    this.state = { stack: [] };
+    this.id = 0;
+    modal = this;
+  }
+
+  static get ref() {
+    return modal;
+  }
+
+  static get size() {
+    return modal?.state.stack.length ?? 0;
+  }
+
+  static show(
+    children: React.ReactNode,
+    props: ModalProps & { type?: "modal" | "bottomModal" } = {},
+  ) {
+    return modal!.show({ children, ...props });
+  }
+
+  static update(key: string, props: ModalProps) {
+    modal?.update(key, props);
+  }
+
+  static dismiss(key?: string) {
+    modal?.dismiss(key);
+  }
+
+  static dismissAll() {
+    modal?.dismissAll();
+  }
+
+  get current() {
+    if (this.state.stack.length) {
+      return this.state.stack[this.state.stack.length - 1].key;
+    }
+    return null;
+  }
+
+  generateKey = () => `modal-${this.id++}`;
+
+  getIndex = (key: string) => this.state.stack.findIndex((i) => i.key === key);
+
+  getProps = (
+    props: ModalProps & { key?: string; type?: "modal" | "bottomModal" },
+  ) => {
+    const key = (props && (props as any).key) || this.generateKey();
+    return { visible: true, ...props, key } as StackItem;
+  };
+
+  show = (props: ModalProps & { type?: "modal" | "bottomModal" }) => {
+    const mergedProps = this.getProps(props);
+    this.setState(({ stack }) => ({ stack: stack.concat(mergedProps) }));
+    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 };
+      }
+      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 };
+    DeviceEventEmitter.emit("ModalDismiss", key);
+    this.update(key, props);
+  };
+
+  dismissAll = () => {
+    this.state.stack.forEach(({ key }) => this.dismiss(key));
+    DeviceEventEmitter.emit("ModalDismiss", "all");
+  };
+
+  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];
+    this.setState(
+      ({ stack }) => ({ stack: stack.filter((i) => i.key !== key) }),
+      onDismiss,
+    );
+  };
+
+  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)}
+        />
+      );
+    }
+  };
+
+  render() {
+    return this.state.stack.map(this.renderModal);
+  }
+}
+
+export default ModalPortal;

package/src/animations/Animation.tsx

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

package/src/animations/FadeAnimation.tsx

@@ -0,0 +1,41 @@
+// @flow
+
+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;
+  }
+
+  in(onFinished: Function = () => {}): void {
+    Animated.timing(this.animate, {
+      toValue: 1,
+      duration: this.animationDuration,
+      useNativeDriver: this.useNativeDriver,
+    }).start((result: { finished: boolean }) => onFinished(result));
+  }
+
+  out(onFinished: Function = () => {}): void {
+    Animated.timing(this.animate, {
+      toValue: 0,
+      duration: this.animationDuration,
+      useNativeDriver: this.useNativeDriver,
+    }).start((result: { finished: boolean }) => onFinished(result));
+  }
+
+  getAnimations(): Object {
+    return { opacity: this.animate };
+  }
+}

package/src/animations/ScaleAnimation.tsx

@@ -0,0 +1,37 @@
+// @flow
+
+import { Animated } from "react-native";
+import Animation from "./Animation";
+
+export default class ScaleAnimation extends Animation {
+  in(onFinished: (result?: { finished: boolean }) => void = () => {}): void {
+    Animated.spring(this.animate, {
+      toValue: 1,
+      velocity: 0,
+      tension: 65,
+      friction: 7,
+      useNativeDriver: this.useNativeDriver,
+    }).start((result: { finished: boolean }) => onFinished(result));
+  }
+
+  out(onFinished: (result?: { finished: boolean }) => void = () => {}): void {
+    Animated.timing(this.animate, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: this.useNativeDriver,
+    }).start((result: { finished: boolean }) => onFinished(result));
+  }
+
+  getAnimations(): Object {
+    return {
+      transform: [
+        {
+          scale: this.animate.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+          }),
+        },
+      ],
+    };
+  }
+}

package/src/animations/SlideAnimation.tsx

@@ -0,0 +1,88 @@
+import { Animated, Dimensions } from "react-native";
+import Animation from "./Animation";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+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";
+
+  constructor({
+    initialValue = 0,
+    useNativeDriver = true,
+    slideFrom = SlideAnimation.SLIDE_FROM_BOTTOM,
+  } = {}) {
+    super({ initialValue, useNativeDriver });
+    this.slideFrom = slideFrom as 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(
+        `\n        slideFrom: ${this.slideFrom} not supported. 'slideFrom' must be 'top' | 'bottom' | 'left' | 'right'\n      `,
+      );
+    }
+
+    return {
+      transform,
+    };
+  }
+}