fix!: make modals appear on top of react-native modals & add new anim…

…ation props (#51)

Introduces new animationOutTiming and animationInTiming props and the
ability to make modals not swipeable.

BREAKING CHANGE:
Renames "direction" to "swipeDirection"

.github/workflows/branch-validation.yml

@@ -1,4 +1,4 @@
-name: Branch Checkup
+name: 🛠️ Branch Checkup
 on:
   push:
     branches-ignore:
@@ -10,7 +10,7 @@ concurrency:
 
 jobs:
   checkup:
-    name: Typecheck, Lint and Format
+    name: 👮‍♂️ Typecheck, Lint and Format
     runs-on: ubuntu-latest
     steps:
       - name: 🏗 Setup Repo

CHANGELOG.md

@@ -1,59 +1 @@
-## 0.2.22 (2024-01-02)
-
-## 0.2.21 (2024-01-02)
-
-## 0.2.20 (2023-03-08)
-
-## 0.2.19 (2022-08-04)
-
-## 0.2.18 (2022-08-04)
-
-## 0.2.17 (2022-08-04)
-
-## 0.2.16 (2022-08-04)
-
-## 0.2.15 (2022-08-02)
-
-## 0.2.14 (2022-08-02)
-
-## 0.2.13 (2022-08-01)
-
-## 0.2.12 (2022-08-01)
-
-## 0.2.11 (2022-08-01)
-
-## 0.2.10 (2022-06-28)
-
-## [0.2.9](https://github.com/GSTJ/react-native-magic-modal/compare/v0.2.8...v0.2.9) (2022-03-06)
-
-## [0.2.8](https://github.com/GSTJ/react-native-magic-modal/compare/v0.2.6...v0.2.8) (2022-03-04)
-
-
-### Bug Fixes
-
-* deal with dynamic animationOutTiming's ([e5f488f](https://github.com/GSTJ/react-native-magic-modal/commit/e5f488f967a07d7536b5213a2e3f2050c0da6a8b))
-
-
-
-## [0.2.6](https://github.com/GSTJ/react-native-magic-modal/compare/v0.2.6...v0.2.8) (2022-02-23)
-
-
-
-## [0.2.5](https://github.com/GSTJ/react-native-magic-modal/compare/v0.2.6...v0.2.8) (2022-02-23)
-
-
-
-## [0.2.4](https://github.com/GSTJ/react-native-magic-modal/compare/v0.2.6...v0.2.8) (2022-02-23)
-
-
-
-## [0.2.3](https://github.com/GSTJ/react-native-magic-modal/compare/v0.2.6...v0.2.8) (2022-02-23)
-
-
-
-## [0.2.2](https://github.com/GSTJ/react-native-magic-modal/compare/v0.2.6...v0.2.8) (2022-02-22)
-
-
-
-## [0.2.1](https://github.com/GSTJ/react-native-magic-modal/compare/v0.2.6...v0.2.8) (2022-02-22)
-
+Refer to [Changelog](/packages/modal/CHANGELOG.md) for the latest updates.

examples/kitchen-sink/src/app/index.tsx

@@ -6,21 +6,40 @@ import { ExampleModal } from "@/components/ExampleModal";
 import { router } from "expo-router";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StatusBar } from "expo-status-bar";
+import { ZoomIn, ZoomOut } from "react-native-reanimated";
 
 const showModal = async () => {
-  const direction = ["top", "bottom", "left", "right"][
+  const swipeDirection = ["top", "bottom", "left", "right"][
     Math.round(Math.random() * 3)
   ] as Direction;
 
   // eslint-disable-next-line no-console
   console.log("Opening modal");
   const modalResponse = await magicModal.show(() => <ExampleModal />, {
-    direction,
+    swipeDirection,
   });
   // eslint-disable-next-line no-console
   console.log("Modal closed with response:", modalResponse);
 };
 
+const showUndismissableModal = async () => {
+  magicModal.show(() => <ExampleModal />, {
+    onBackButtonPress: () => {},
+    onBackdropPress: () => {},
+    swipeDirection: undefined,
+  });
+};
+
+const showZoomInModal = async () => {
+  magicModal.show(() => <ExampleModal />, {
+    entering: ZoomIn,
+    exiting: ZoomOut,
+    swipeDirection: undefined,
+    animationInTiming: 1000,
+    animationOutTiming: 1000,
+  });
+};
+
 const Toast = () => {
   const insets = useSafeAreaInsets();
 
@@ -45,8 +64,9 @@ const Toast = () => {
 const showToast = async () => {
   // eslint-disable-next-line no-console
   console.log("Opening toast");
+
   const toastResponse = await magicModal.show(() => <Toast />, {
-    direction: "top",
+    swipeDirection: "top",
     hideBackdrop: true,
     dampingFactor: 0,
     style: {
@@ -59,20 +79,20 @@ const showToast = async () => {
 };
 
 export default () => {
-  useEffect(() => {
-    showModal();
-  }, []);
-
   return (
     <View style={styles.container}>
       <TouchableOpacity style={styles.button} onPress={showModal}>
         <Text style={styles.buttonText}>Show Modal</Text>
       </TouchableOpacity>
-
+      <TouchableOpacity style={styles.button} onPress={showUndismissableModal}>
+        <Text style={styles.buttonText}>Show Undismissable Modal</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.button} onPress={showZoomInModal}>
+        <Text style={styles.buttonText}>Show Zoom In Modal</Text>
+      </TouchableOpacity>
       <TouchableOpacity style={styles.button} onPress={showToast}>
         <Text style={styles.buttonText}>Show Toast</Text>
       </TouchableOpacity>
-
       <TouchableOpacity
         style={styles.button}
         onPress={() => router.push("/modal")}

examples/kitchen-sink/src/app/modal.tsx

@@ -1,38 +1 @@
-/* eslint-disable react-native/no-color-literals */
-import React from "react";
-import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
-import { magicModal } from "react-native-magic-modal";
-import { ExampleModal } from "@/components/ExampleModal";
-
-export default () => {
-  return (
-    <View style={styles.container}>
-      <TouchableOpacity
-        style={styles.button}
-        onPress={() => magicModal.show(() => <ExampleModal />)}
-      >
-        <Text style={styles.buttonText}>Press me!</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  button: {
-    height: 40,
-    paddingHorizontal: 20,
-    backgroundColor: "#000000",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 5,
-  },
-  buttonText: {
-    color: "#ffffff",
-    fontWeight: "bold",
-  },
-});
+export { default } from "./index";

examples/kitchen-sink/tsconfig.json

@@ -5,7 +5,9 @@
     "jsx": "react-native",
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "react-native-magic-modal": ["../../packages/modal/src"],
+      "react-native-magic-modal/*": ["../../packages/modal/src/*"]
     },
     "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
   },

package.json

@@ -24,7 +24,7 @@
     "format": "turbo format",
     "format:fix": "turbo format:fix",
     "typecheck": "turbo typecheck",
-    "start": "pnpm -F @magic/kitchen-sink start",
+    "start": "turbo start",
     "test": "turbo test",
     "build": "turbo build",
     "release": "turbo release",

packages/modal/.release-it.cjs

@@ -0,0 +1,73 @@
+module.exports = {
+  plugins: {
+    "@release-it/conventional-changelog": {
+      infile: "CHANGELOG.md",
+      header: "# 🦄 Magic Modal Changelog 🪄",
+      preset: {
+        name: "conventionalcommits",
+        types: [
+          {
+            type: "fix",
+            section: ":hammer: Bug Fixes :hammer:",
+            hidden: false,
+          },
+          {
+            type: "feat",
+            section: ":stars: New Features :stars:",
+            hidden: false,
+          },
+          {
+            type: "refactor",
+            section: ":dash: Code Improvements :dash:",
+            hidden: false,
+          },
+          {
+            type: "perf",
+            section: ":dash: Code Improvements :dash:",
+            hidden: false,
+          },
+          {
+            type: "test",
+            section: ":link: Testing Updated :link:",
+            hidden: false,
+          },
+          {
+            type: "breaking",
+            section: ":boom: BREAKING CHANGE :boom:",
+            hidden: false,
+          },
+          {
+            type: "revert",
+            section: ":x: Removed :x:",
+            hidden: false,
+          },
+          {
+            type: "ci",
+            section: ":curly_loop: Continuous Integrations :curly_loop:",
+            hidden: false,
+          },
+          {
+            type: "chore",
+            section: ":curly_loop: What a drag! :curly_loop:",
+            hidden: true,
+          },
+        ],
+      },
+    },
+  },
+  git: {
+    commitMessage: "chore(release): magic modal release v${version}",
+    commit: true,
+    tag: true,
+    push: true,
+    requireCleanWorkingDir: false,
+    tagName: "${version}",
+  },
+  npm: {
+    publish: true,
+  },
+  github: {
+    release: true,
+    releaseName: "Release ${version}",
+  },
+};

packages/modal/CHANGELOG.md

@@ -1,20 +1,13 @@
+## 0.3.3 (2024-05-24)
 
+### Bug Fixes
 
-## 0.3.8 (2024-05-24)
-
-## 0.3.7 (2024-05-24)
-
-## 0.3.6 (2024-05-24)
-
-## 0.3.5 (2024-05-24)
-
-## 0.3.4 (2024-05-24)
-
-## 0.3.3 (2024-05-24)
+- fix bugs and improve performance ([#40](https://github.com/GSTJ/react-native-magic-modal/issues/40)) ([2694e60](https://github.com/GSTJ/react-native-magic-modal/commit/2694e60291a4ede152168601d7c962b910885c43))
 
+## 0.3.x (2024-04-24)
 
-### Bug Fixes
+### Breaking Change
 
-* fix bugs and improve performance ([#40](https://github.com/GSTJ/react-native-magic-modal/issues/40)) ([2694e60](https://github.com/GSTJ/react-native-magic-modal/commit/2694e60291a4ede152168601d7c962b910885c43))
+The component has been fully restructured not to depend on react-native-modal and have full control, using react-native-reanimated. Some properties are not available anymore, please refer to the docs for a full list of supported properties.
 
-## 0.3.1 (2024-05-23)
+If you happened to use the library for an use-case not supported anymore, with no equivalent properties, please open an issue.

packages/modal/coverage/jest-junit.xml

@@ -1,3 +1,3 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<testsuites name="jest tests" tests="0" failures="0" errors="0" time="0.224">
+<testsuites name="jest tests" tests="0" failures="0" errors="0" time="0.621">
 </testsuites>

packages/modal/jest.config.js → packages/modal/jest.config.cjs

@@ -2,10 +2,10 @@ module.exports = {
   preset: "jest-expo",
   testResultsProcessor: "jest-junit",
   transformIgnorePatterns: [
-    "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)",
+    "node_modules/(?!((jest-)?react-native|react-native-gesture-handler|react-native-reanimated|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)",
   ],
   coverageReporters: ["json-summary", ["text", { file: "coverage.txt" }]],
-  setupFiles: ["./node_modules/react-native-gesture-handler/jestSetup.js"],
+  setupFiles: ["../../node_modules/react-native-gesture-handler/jestSetup.js"],
   reporters: [
     "default",
     ["github-actions", { silent: false }],

packages/modal/package.json

@@ -42,26 +42,8 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "release-it": {
-    "git": {
-      "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
-    },
-    "npm": {
-      "publish": true
-    },
-    "github": {
-      "release": true
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "preset": "angular",
-        "infile": "CHANGELOG.md"
-      }
-    }
-  },
   "scripts": {
-    "build": "bunchee --tsconfig tsconfig.build.json",
+    "build": "bunchee",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
     "format": "prettier --check . --ignore-path ./.prettierignore",