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

<Button text="View details" tap="onTap" />

onTap(args: EventData) {
  const button = args.object as Button
  button.showModal("details-page")
}

To close a modal, call the closeModal method of any View from the modal. Optionally pass it data you want to access in the parent page:

xml

<Button text="Close" tap="onTap" />

onTap(args: EventData) {
  const button = args.object as Button
  button.closeModal({
    name: 'John Doe - EDITED',
  })
}

Passing data can be done by passing a context in the showModal options parameter.

const options: ShowModalOptions = {
  context: { name: 'John Doe' },
  closeCallback(args: { name: string }) {
    console.log('Modal closed', args.name)
  },
}
// ...
button.showModal('details-page', options)

To access the data in the modal, handle the shownModally event, and access it via args.context.

xml

<Page shownModally="onShownModally">
  <StackLayout>
    <TextField text="{{ name }}" />
    <Button text="Close" tap="onClose"/>
  </StackLayout>
</Page>

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

export function onShownModally(args: ShownModallyData) {
  const page = args.object as Page
  const context = fromObject({
    ...args.context,
    onClose(args: EventData) {
      const button = args.object as Button
      button.closeModal({
        name: context.name, // 'John Doe - EDITED'
      })
    },
  })
  page.bindingContext = context
}

Showing a modal ​

Closing a modal ​

Passing data to and from a modal ​

Contributors

Showing a modal

Closing a modal

Passing data to and from a modal