Fix missing param in modalfy().closeModal() 🐞

lib/ModalState.ts

@@ -144,13 +144,39 @@ const createModalState = (): ModalStateType<any> => {
     return stackItem?.params?.[paramName] || defaultValue
   }
 
-  const closeModal = <P>(stackItem?: ModalStackItem<P>) => {
+  const closeModal = <P>(
+    closingElement?: Exclude<keyof P, symbol> | ModalStackItem<P>,
+  ) => {
     const {
-      stack: { openedItems },
+      stack: { openedItems, names },
     } = state
 
-    if (stackItem && openedItems.has(stackItem)) {
-      openedItems.delete(stackItem)
+    if (typeof closingElement === 'string') {
+      invariant(
+        names.some((name) => name === closingElement),
+        `'${closingElement}' is not a valid modal name. Did you mean any of these: ${names.map(
+          (validName) => `\n• ${String(validName)}`,
+        )}`,
+      )
+
+      let wasItemRemoved = false
+      let reversedOpenedItemsArray = Array.from(openedItems).reverse()
+
+      reversedOpenedItemsArray.forEach((openedItem) => {
+        if (openedItem.name === closingElement && !wasItemRemoved) {
+          openedItems.delete(openedItem)
+          wasItemRemoved = true
+        }
+      })
+
+      if (!wasItemRemoved) {
+        console.warn(`There was no opened ${closingElement} modal.`)
+      }
+    } else if (
+      closingElement &&
+      openedItems.has(closingElement as ModalStackItem<P>)
+    ) {
+      openedItems.delete(closingElement as ModalStackItem<P>)
     } else {
       const staleStackItem = Array.from(openedItems).pop()
       if (staleStackItem) openedItems.delete(staleStackItem)
@@ -267,13 +293,14 @@ export const modalfy = <
   /**
    * This function closes the currently displayed modal by default.
    *
-   * You can also provide a `modalName` if you want to close
-   * a different modal than the latest opened.
+   * You can also provide a `modalName` if you want to close a different modal
+   * than the latest opened. This will only close the latest instance of that modal,
+   * see `closeModals()` if you want to close all instances.
    *
    * @example modalfy().closeModal()
    * @see https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modalprop#closemodal
    */
-  closeModal: () => ModalState.closeModal(),
+  closeModal: (modalName: M) => ModalState.closeModal(modalName),
   /**
    * This function closes all the instances of a given modal.
    *

lib/StackItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef, memo } from 'react'
 import { Animated, StyleSheet } from 'react-native'
 import {
   useMemoOne as useMemo,
@@ -51,7 +51,7 @@ const StackItem = <P extends ModalfyParams>({
     [],
   )
 
-  const animatedListenerId = React.useRef<string | undefined>()
+  const animatedListenerId = useRef<string | undefined>()
 
   const {
     position: verticalPosition,
@@ -66,7 +66,7 @@ const StackItem = <P extends ModalfyParams>({
     animationIn,
   } = useMemo(() => getStackItemOptions(stackItem, stack), [stack, stackItem])
 
-  React.useEffect(() => {
+  useEffect(() => {
     let handleAnimatedListener: ModalEventCallback = () => undefined
 
     if (transitionOptions && typeof transitionOptions !== 'function') {
@@ -146,9 +146,14 @@ const StackItem = <P extends ModalfyParams>({
     ],
   )
 
-  const closeStackItem = useCallback(() => {
-    updateAnimatedValue(position - 1, closeModal)
-  }, [closeModal, position, updateAnimatedValue])
+  const closeStackItem = useCallback(
+    (closingElement) => {
+      if (closingElement === currentModal) {
+        updateAnimatedValue(position - 1, () => closeModal(closingElement))
+      } else closeModal(closingElement)
+    },
+    [closeModal, currentModal, position, updateAnimatedValue],
+  )
 
   const closeAllStackItems = useCallback(() => {
     updateAnimatedValue(position - 1, closeAllModals)
@@ -240,11 +245,11 @@ const StackItem = <P extends ModalfyParams>({
     }
   }, [verticalPosition])
 
-  React.useEffect(() => {
+  useEffect(() => {
     updateAnimatedValue(position)
     if (wasClosedByBackdropPress) {
       if (backBehavior === 'clear') closeAllStackItems()
-      else closeStackItem()
+      else closeStackItem(undefined)
     }
   }, [
     backBehavior,
@@ -272,7 +277,7 @@ const styles = StyleSheet.create({
   },
 })
 
-export default React.memo(
+export default memo(
   StackItem,
   (prevProps, nextProps) =>
     prevProps.position === nextProps.position &&

lib/useModal.ts

@@ -24,8 +24,9 @@ export default function <P extends ModalfyParams>(): UsableModalProp<P> {
     /**
      * This function closes the currently displayed modal by default.
      *
-     * You can also provide a `modalName` if you want to close
-     * a different modal than the latest opened.
+     * You can also provide a `modalName` if you want to close a different modal
+     * than the latest opened. This will only close the latest instance of that modal,
+     * see `closeModals()` if you want to close all instances.
      *
      * @example modal.closeModal()
      * @see https://colorfy-software.gitbook.io/react-native-modalfy/api/types/modalprop#closemodal

types.ts

@@ -75,7 +75,7 @@ export interface ModalContextProvider<
 > {
   currentModal: M | null
   closeAllModals: () => void
-  closeModal: (stackItem?: ModalStackItem<P>) => void
+  closeModal: (stackItem?: M | ModalStackItem<P>) => void
   closeModals: (modalName: M) => boolean
   getParam: <N extends keyof P[M], D extends P[M][N]>(
     hash: ModalStackItem<P>['hash'],