Navigation using Modals

To show a modal, call the showModal method on a View instance and pass it the path to the modal view file:

xml

<Buttontext="Show a Modal"tap="onShowModal" />

import { EventData, View, ShowModalOptions } from'@nativescript/core'

exportfunctiononShowModal(args:EventData) {
constview= args.object asView
constoptions:ShowModalOptions= {
// ...
 }
 view.showModal('details-page', options)
}

Note

If your modal does not appear when tapping the button, confirm you set the correct path and the modal page exists. showModal does not throw an error when the provided path doesn't exist.

To close a modal, call the closeModal method of any View from the modal.

For passing data back to the parent, see Passing Data.

xml

<Buttontext="Close a Modal"tap="onCloseModal"/>

exportfunctiononCloseModal(args:EventData) {
constview= args.object asView
 view.closeModal()
}

Passing data

Modals are often used for prompting the user for input, this requires passing data between the parent and the modal.

To pass data to the modal, provide it in the context field of the ShowModalOptions:

// main-page.ts
import { ShowModalOptions } from'@nativescript/core'

// optionally use strong types
import { ExampleModalContext } from'./details-page'

constoptions:ShowModalOptions= {
 context: {
 name: 'John Doe',
 } asExampleModalContext,
}

button.showModal('details-page', options)

In the modal page, listen to the shownModally event to access the context:

xml

<!-- details-page.xml -->
<PageshownModally="onShownModally"/>

// details-page.ts
import { ShownModallyData } from'@nativescript/core'

// optional strong type for the context
exporttypeExampleModalContext= {
name:string
}

exportfunctiononShownModally(args:ShownModallyData) {
constcontext= args.context asExampleModalContext
 console.log(context.name) // 'John Doe'
}

When closing a modal, you can optionally pass data back to the parent. To do so, provide a closeCallback option in the ShowModalOptions:

// main-page.ts

import { ShowModalOptions } from'@nativescript/core'

// optionally use strong types
import { ExampleModalContext, ExampleModalResult } from'./details-page'

constoptions:ShowModalOptions= {
 context: {
 name: 'John Doe',
 } asExampleModalContext,
closeCallback(result?:ExampleModalResult) {
if (result) {
 console.log(`Modal returned: ${result.newName}`) // 'Modal returned: Jane Doe'
return
 }
 console.log('Modal was cancelled.')
 },
}

button.showModal('details-page', options)

In the modal page, listen to the shownModally event to access the context.

details-page.xmldetails-page.ts

xml

<PageshownModally="onShownModally">
 <StackLayout>
<!-- ... -->
 <TextFieldtext="{{ name }}" />
 <Buttontext="Change Name"tap="onChangeName"></Button>
 <Buttontext="Cancel"tap="onCancel"></Button>
 </StackLayout>
</Page>

import {
 fromObject,
 Page,
 Button,
 ShownModallyData,
 EventData,
} from'@nativescript/core'

// optional strong type for the context
exporttypeExampleModalContext= {
name:string
}

exporttypeExampleModalResult= {
newName:string
}

exportfunctiononShownModally(args:ShownModallyData) {
constpage= args.object asPage
constincomingContext= args.context asExampleModalContext

constbindingContext=fromObject({
...incomingContext,
onChangeName(args:EventData) {
constbutton= args.object asButton
 button.closeModal({
 newName: bindingContext.name, // 'Jane Doe'
 } asExampleModalResult)
 },
onCancel(args:EventData) {
constview= args.object asView
 view.closeModal()
 },
 })
 page.bindingContext = bindingContext
}