Nativescript: Can't open modal within modal due to ViewHierarchy error on IOS.

[aranmohyeddin]

Environment

$ tns info
✔ Getting NativeScript components versions information...
✔ Component nativescript has 6.5.0 version and is up to date.
✔ Component tns-core-modules has 6.5.0 version and is up to date.
✔ Component tns-android has 6.5.0 version and is up to date.
✔ Component tns-ios has 6.5.0 version and is up to date.

Describe the bug
When I try to open a modal while I'm already in another modal. I get an error saying:

ViewHierarchy: parent is already presenting view controller close the current modal page before showing another one!

How can I have one modal within another?

To Reproduce

• Click on Button (A modal should pop up)
• Click on Button (Nothing will happen and you will get an error)

Expected behavior
You should see a new popup open.

Sample project
Here is a playground sample

Additional context
I believe the exact same code used to work a few weeks ago. It seems like the issue is causes by an update but I do not know what and when. It works perfectly fine on android but I get this error in IOS.

• Please note that this is a bug because this issue only occurs on IOS simulator/real device. Not in android or playground(neither ios nor android) and nowhere in IOS docs or nativescript docs it is mentioned that we are not able to open a modal from within another modal.

• Furthermore, please note that navigation is not a proper workaround for this because in case of complex navigation in both outer and inner modals, it will be very difficult to get the same behavior using navigations. Modals are a real thing for a reason. Modals serve their own use cases, otherwise they would have not existed. We really need to be able to use modals inside modals.

• Finally, it is important to mention that this issue did not exist before. I could always open a modal in another modal before and It's since one of the recent updates that this is not possible anymore. Existing applications are breaking because of this.

• This issue had occurred before(#5924) and it was considered as a bug and was fixed.

[NickIliev]

@aranmohyeddin instead of opening a new modal, you could navigate inside the modal. The official NativeScript documentation shows how to achieve that in NativeScript Core and in NativeScript Angular but I guess you could check the NativeScript Vue docs for a similar solution.

[aranmohyeddin]

@NickIliev But that would make my code much more complicated. Also, I'm pretty sure this was possible like a month ago. Is there no way to manage to do this like before? Can you tell me what has changed recently to make this not possible anymore in IOS?

[aranmohyeddin]

@NickIliev I already knew I can navigate within modal. But I didn't want to do that. I need to open a new modal within my modal. My Issue is not resolved. This code was perfectly fine a month ago. Now my app is suddenly broken and I don't know what to do.

[aranmohyeddin]

\reopen

[aranmohyeddin]

open

[AbtinAghagolian]

We also have this issue.

[NathanaelA]

To my knowledge you have not been able to open a model inside a model in any of the NS 6's. I'm actually thinking this has been a issue since even before NS 4.

Typically you can do a simple work around of close model 1 and open model 2, or navigate inside the model...

[aranmohyeddin]

@NathanaelA no! you can't just close modal 1 and open modal 2 if what you intend for the user is to see modal 1 when they close modal 2 and

• you are have multiple navigations in both modal 1 and modal 2
• you use a custom modal component that has a close button etc and handles closure in certain ways.
• some of your modals return dynamic values upon their closure
• you have hooks to run on modal's closure for both modal 1 and modal 2
• you report closure of modal 1 to server for usage analysis.
• many other things that other people might do but I'm not doing in my app.

Of course it is possible to work around all of this but it would be much too complicated and could break again at any time.

I believe this is not at all an issue for any simple app with less than 10 pages, but anything more than 15 pages would definitely need to open modals within modals if they want to have a sane user experience.

Also please see this stackoverflow question.

[NathanaelA]

@aranmohyeddin -

• I've been using NS since the beginning of time :grinning: and this has to my knowledge never worked. In my head, it is a known limitation forever. That was all I was trying to say and give you a couple other ways to do it.

• I've worked on MANY MANY NS apps (I'm one of the Partners at nStudio, I believe we are the largest NS consulting/app building team). Some apps are smaller, but many are very complex. I've personally never actually needed model inside model. That isn't to say their isn't a reason to support it. Their might be cases people do need it; but I honestly haven't ran into it and so I was offering some other ways to handle it. :grinning:

• Finally, at this point since this has been an issue since NS 1 (see #423) and a very much a corner case; this is very much not likely to be fixed by the core team. If you really really have to have it fixed -- I would highly recommend you work on it yourself and create a PR that fixes it! Or hire someone who can spend the time figuring out how to work around the issue and create a PR.

[aranmohyeddin]

Then maybe I'm designing my app wrong. Here is my user experience.

• I have five tabs in my bottomnavigation, one of them is a list of charities to donate to
• When the user chooses a charity, I open a fullscreen modal because I don't want the actionbar or bottom navigation to be visible anymore because this is not one of the main pages of the app, this is the page of just one charity
• When the user clicks on one of the causes of that charity a modal is opened to enter how much they want to donate and there is a little navigation here again. when they are done the new modal should close and they should see the charity page again. In case they want to donate to other causes of that charity. and when they close that charity they should see the list of charities again in case they want to donate to other charities.

What do you think is the best way to handle this.
I believe we would have to maintain our disagreement over weather or not this is

very much a corner case

Because I don't think it is.

• You can navigate, you can open modals
• So you can navigate in normal pages and in modals
• So you should be able to open modals in normal pages or in modals

Also according to @Manoj in stackoverflow this should be not so difficult to implement anyway but sadly I know nothing about IOS development to be able to verify that.

Furthermore AFAIK this works in playground in both IOS and android and it works on native android and it only doesn't work on IOS. This should at least be documented that this bug exists for IOS. because it works everywhere else. And pretty much every other framework has this feature.

[NathanaelA]

• I would have simply navigated from Main Page to Charity page in the first place. Charity page would not have action bar visible. On charity page I would then open the Model. When finished with Charity page; just do a navigate.goback() and you will be back at the original page with the original tabs. :grinning:

• corner case meaning something that isn't used very often, and/or by many people. Unfortunately, the money to pay for NativeScript development by Progress is not unlimited -- So the limited development resources are put towards items that have a much much bigger impact on the whole community. I do realize this issue affects you, and it isn't tiny to you; but when you compare it to some of the other issues, is impact of this issue is extremely tiny in comparison.

Just to make sure, if you aren't aware; I am not part of Progress or the NativeScript team. This is 100% my opinion and my knowledge from being a developer of apps using NativeScript since it was first released and creating plugins and PR's for NS. So this is probably 100% correct; but I don't have any say on if they will even touch it. :grinning:

I believe things like this issue; are really a good things for the community to tackle since it has such a small footprint and usage case, I honestly do not see the core team working on this issue... If you have no ability to fix it yourself, and you really need this fixed -- I would highly recommend you just hire someone to do it for you. Manoj is very knowledgeable and might be available for this type of job. Or even us @ nStudio, we can do small jobs like this also...

[prajilshresthaiw]

Hello @aranmohyeddin , did you try the setTimeout(() => {}, 100) approach?

[aranmohyeddin]

@prajilshresthaiw I don't really remember but I think I did.

[aranmohyeddin]

keep in mind that I solved my problem using this: https://github.com/nativescript-vue/nativescript-vue/issues/612