Is it possible to create a modal dialog with navigation (manual or otherwise)


#1

Hi Guys,

We would like to use Nativescript for a project but I see that navigation within a modal is not supported.

I would like to create the following UI in a modal dialog. This is a quite common UX paradigm on IOS

Clicking on people will show a page with a list of people.

This is pretty much a show stopper for us. So I am hoping it is possible or I am mistaken :slight_smile:

Regards,
Tarek


#2

You’re right, it’s currently not supported, so please give https://github.com/NativeScript/NativeScript/issues/3753 a thumbs up.

I worked around this limitation in a project to use custom transitions in a modal (just like swapping a div in a spa website really). I know it’s not perfect nor fancy, but it gets the job done.


#3

It’s supposed to be one of the highlights of the February release, so be a bit patient, and you may be rewarded :smiley:


#4

When you look in the docs under User Interface > Theme > ActionBar (link below), if you scroll down just a tad, there’s a green hilited section with code example that says you can fake an ActionBar in a modal dialog by using ActionBar class/theme styles. I know it’s not the best, but at the moment maybe it is :slight_smile:


(URL: https://docs.nativescript.org/ui/theme#actionbar)

TIP: You can use the various ActionBar class names to create an ActionBar-like look without actually using the ActionBar UI components. You may find this approach useful for using in modal pages, for instance.

<GridLayout rows="auto" columns="75,*,75" class="action-bar p-10">
    <Button text="Close" class="text-left action-item" row="0" col="0" />
    <Label text="My Modal" class="text-center action-bar-title" row="0" col="1" />
</GridLayout>


#5

Hi Guys,

Thanks for the reply. I will try this approach.

Regards,
Tarek


#6

Tarek, early in January we plan to release an improved approach to handle navigation scenarios like yours in NativeScript Core (JS/TS only, no Angular). It will make it very easy to achieve what you are looking for. This will be available as part of our @next version.
The Angular version will come later, around March as part of our next major release.
In the mean time, use the workarounds that people already suggested.


#7

Hi Emil,

Thanks for your response.

Are you saying that the JS/TS version cannot be used inside an Angular app even its ugly?

Regards,
Tarek


#8

If you use NativeScript Core you will be able to take advantage early January. If you use NativeScript with Angular, then you will need to wait, since the implementation hasn’t started yet.