closeModal() not working

[min6390]

The modal is stuck and cannot be closed using closeModal(), it has to be swiped to close. The only solution is to kill the app?

[CharlesMangwa]

hey @min6390 ! i'd be very helpful if you could provide a reproducible demo via snack pls.

[Grohden]

Have the same, plus this log

WARN  Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {"43327":{},"43329":{},"43331":{},"43333":{},"43335":{},"43337":{},"43339":{},"43341":{},"43343":{},"43345":{},"43347":{},"43349":{},"43351":{},"43353":{},"43355":{},"43357":{},"43359":{},"43361":{},"43363":{},"43365":{},"43367":{},"43369":{},"43371":{},"43373":{},"43375":{},"43377":{},"43379":{},"43381":{},"43383":{},"43385":{},"43387":{},"43389":{},"43391":{},"43393":{},"43395":{},"43397":{},"43399":{},"43401":{},"43403":{},"43405":{},"43407":{},"43409":{},"43411":{},"43413":{},"43415":{},"43417":{},"43419":{},"43421":{},"43423":{},"43425":{},"...(truncated keys)...":451} 
StackItem@http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.app365185:21
RCTView
View@http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.app:63701:43
Animated(View)@http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.app:80746:62
ModalStack@http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.app:365005:22
ModalProvider@http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.app:364874:24
RCTView
View@http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.app:63701:43
GestureHandlerRootView@http://localhost:8081/index.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=com.app:164788:21

I'll see if I can get more details

[Grohden]

Hmm.. noob mistake, I assumed modal would be stable so my specific issue is related to https://github.com/colorfy-software/react-native-modalfy/issues/132

I've made this to just test the lib

const modal = useModal();
  useEffect(() => {
    setTimeout(() => {
      modal.openModal('ConfirmModal');
    }, 1000);
  }, [modal]);

but modal is not stable so I'm getting a infinite setTimeout loop, fix is just to rely on the stable callback

const { openModal } = useModal();
  useEffect(() => {
    setTimeout(() => {
      openModal('ConfirmModal');
    }, 1000);
  }, [openModal]);

Now close works

[huydosgtech]

I also got same issue on version 3.5.4, sometime closeModal or closeModals all not working, but when press backdrops (out side of modal), it can hide

[Djhitman]

got the same

[CharlesMangwa]

@huydosgtech / @Djhitman could you please provide a reproducible demo via snack?

[nurhadiwibowo]

i experience this issue too using expo router, i've tried call closeAllModal or closeModal it sometime doesnt work. cant reproduce on snack, doesnt support expo-router/File-based routing

when i do log on queueClosingAction, value openedItems?.size got 0

[xinkuiwu]

same problem. There will be problems when clicking at high frequency

[sinanverve7]

@nurhadiwibowo i'm also facing same issue. after opening 3/4 modal top of previous one,closing one by one by clicking close button not working. shows error message modal not found

[JackHull]

@nurhadiwibowo i'm also facing same issue. after opening 3/4 modal top of previous one,closing one by one by clicking close button not working. shows error message modal not found

We are experiencing the same problem. We are running 3.6.0, using expo-router and cannot close our modals as soon as there are 3-4 modals stacked. This problem occurs only in production for us, which is a huge problem. We are now looking for alternative libraries.

[CharlesMangwa]

hi @sinanverve7 @JackHull: could you please provide a repro on snack? as i mentioned above in this thread: that would help investigating this issue. thanks 👍

[sinanverve7]

Hi @CharlesMangwa i have created a small reproduction example at https://github.com/sinanverve7/modalfy-bug-reproduction

🐞 Issue Reproduction Demo

This demo showcases a bug when using multiple modals and navigating back through them.

Steps to Reproduce:

Open the following modals in order by clicking their respective buttons:

Modal 1

Modal 2

Modal 3

Modal 8

Now click the "Go Back" button.

Expected Behavior:

Each modal should close in reverse order of how they were opened: Modal 8 → Modal 3 → Modal 2 → Modal 1

Actual Behavior:

You will see the following warning logs in the console:

perl Copy Edit (NOBRIDGE) WARN There was no opened Modal2 modal. (NOBRIDGE) WARN There was no opened Modal3 modal. This indicates that Modal 2 and Modal 3 were not properly tracked or already dismissed, causing the modal manager to throw warnings when trying to go back.

[AuroraBuff]

Problem

I'm encountering an issue where triggering closeModal multiple times in quick succession causes the modal to fail to close properly.

Temporary Fix

A simple workaround is to add a patch in /node_modules/react-native-modalfy/src/lib/ModalState.ts at line 275:

const { pendingClosingActions } = setState(currentState => {
  const newPendingClosingActions = new Set(currentState.stack.pendingClosingActions)
  newPendingClosingActions.add({
    hash,
    action,
    callback,
    modalName,
    currentModalHash: [...currentState.stack.openedItems].slice(-1)[0]?.hash,
  } as ModalPendingClosingAction)

  // Add this block to filter out duplicates
  const newPendingClosingActionsArray = new Set([...newPendingClosingActions].filter((item, index, self) =>
    index === self.findIndex((t) => t.currentModalHash === item.currentModalHash)
  ));

  return {
    ...currentState,
    stack: {
      ...currentState.stack,
      pendingClosingActions: newPendingClosingActionsArray, // Replace with filtered set to remove duplicates
    },
  }
}).stack

[sinanverve7]

Sorry to bother you. can you describe how to use above patch file correctly? it will be helpful for me if you give in below format it will be helful to proceed ( idk how to patch )? react-native-render-html+6.3.4.patch

Step 1: npm install --save-dev patch-package postinstall-postinstall Step 2: copy the 'react-native-render-html+6.3.4.patch' file to the patches folder that should exist in the route folder (ios, android, src, node_modules, patches) Step 3: add "scripts": { "postinstall": "patch-package" } if it is not there in package.json Step 4: npm install

post install should mean that when you build the patch is reapplied , hope this helps

[CharlesMangwa]

hey @sinanverve7! i've released v3.7.0 with @AuroraBuff's suggestion in it. let me know if that fixed things for you!