Open modal within modal in nativescript

Question

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!

Here is a playground sample, 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.

My Env

$ 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.

Which device you are testing it with? Not finding any issues with iPad running iOS 13. — Manoj, Mar 20 '20 at 03:55
It's an emulator. I download the playground and then run tns debug ios. I don't have a real device. — yukashima huksay, Mar 20 '20 at 05:54
@Manoj Did you succeed in reproducing the problem? I added my environment versions. — yukashima huksay, Mar 21 '20 at 09:03
@Manoj did you only try with playground or did you also try building into a device? I also raised an issue in the repo but they don't seem to consider this a problem eventho It has appeared out of nowhere. https://github.com/NativeScript/NativeScript/issues/8447 — yukashima huksay, Mar 21 '20 at 09:04
I see the issue in Simulator, I haven't had time to debug that further though. I will update once I do. — Manoj, Mar 21 '20 at 10:05
@Manoj That would be really really kind of you! Thank you so much Manoj! You are really such a blessing! — yukashima huksay, Mar 21 '20 at 10:28

score 2 · Accepted Answer · answered Sep 24 '20 at 03:29

The nativescript-vue documentation isn't clear on how to use nested modals, since it was fixed after @yukashima-huksay's post. But there is an example on github that demonstrates its use.

A secondary modal can be opened using the target option, which can target the current view (with this) or an element (i.e. this.$refs[<some element>]).

// this
this.$showModal(SecondaryModal, { target: this });

// $refs
this.$showModal(SecondaryModal, { target: this.$refs['myView'] });

You can also see if a modal is already open on the root object by testing `this.$root.nativeView.modal` is not `undefined`. — miker, Sep 24 '20 at 17:01

score 1 · Answer 2 · answered Mar 22 '20 at 10:49

This seems to be an issue with present version of NativeScript-Vue (as of today, v2.5.0). It tries to use the same parent controller every time you try to create modal, using the first modal as parent for second modal will solve the issue. But there is no workaround, either you will have to handle modals completely yourself or do a patch on the nativescript-vue package's source code. Otherwise, you may use v2.3.0 which solves this particular issue (but I'm not sure what are other benefits you have on v2.5.0 you might want to check the change logs).

I would suggest you to raise an issue on Github repo with your Playground sample and link to this SO post, hopefully they fix it in next version.

Open modal within modal in nativescript

2 Answers2