react-native-modal: multiple modals not working

I switched from react-native’s default Modal to react-native-modal and i noticed that if I have multiple modals open at the same time, only one will ever be visible.

react-native’s modal handles this correctly: they display only the first one, but if i dismiss, i see the other modals.

With react-native-modal, the others are simply ignored, altough they are mounted with isVisible={true}. This leads to inconsistency.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 7
Comments: 25 (7 by maintainers)

Most upvoted comments

Just try embed ModalB in ModalA. It will work.

<ModalA>
   <ModalB/>
</ModalA>

452MJ on Jun 24, 2021

@jojonarte @IlifilzaRusli Hey, the approach that i used is this. There is a class ( say A ) that is build on top of the react-native-modal, every time some class ( say B ) needs a modal to be shown it calls class A. Class A puts the instance of class B into a queue. Now if another class ( say c ) needs a modal, it again calls A. A then checks if there is any other instance that is open. It sees that B is already open, it then closes the modal B deletes its instance and opens C and saves its instance. This cycle keeps on going.

Sorry for the delay, by this weekend i’ll be making the entire code public.

kalwaniyash on Sep 7, 2018

Just try embed ModalB in ModalA. It will work.
<ModalA>
   <ModalB/>
</ModalA>

This worked. Thanks, @452MJ .

vishwa1937 on Aug 6, 2021

@jojonarte @IlifilzaRusli Check out this library @kalwani/react-native-modal This will do the trick for you. It has been tested in production as well. Let me know if it works out for you guys or if you are facing any issues with it.

kalwaniyash on Nov 11, 2018

@macrozone Hey, i was facing a similar issue and i wrote a wrapper on top of the react-native-modal that does exactly what you said. If one modal is already visible and another one needs to show itself, then the wrapper will close the first modal and show the second one automatically. The UI won’t freeze and stop working. Let me know if you still need it.

kalwaniyash on Aug 23, 2018

Re-opening 👍

mmazzarolo on Aug 23, 2018

Hi! Unfortunately it is no possible showing more than a modal at the same time right now because react native’s default modal do not support this feature.

There should be a few GitHub issues both here and in the react-native repo discussing the subject. It happens even with dialogs/alerts.

If, instead of showing the modals at the same time, you just want to show a modal one after another you should keep in mind that you should wait for the animation to complete before showing it (both with this modal with the original one).

TLDR: Show the new second modal using the onModalHide prop of the first one.

Let me know if you need further info!

mmazzarolo on Jun 13, 2018

@kalwaniyash This solution is gold 👍. I’ve been fighting with this for ages now. Looking at your github repo though (https://github.com/kalwaniyash/react-native-modal-wrapper), this will be non-trivial to merge into react-native-modal core. It’s also likely going to require some refactoring since you’re using unsafe methods like componentWilllReceiveProps

scottmas on Jan 2, 2019