From 047b582ee9f0c53b671be7f2be954878d2162541 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Tue, 3 Mar 2026 20:12:15 -0800
Subject: [PATCH] feat: modal framework examples

---
 content/guide/navigation/modals.md | 464 ++++++++++++++++++++++++++++-
 1 file changed, 458 insertions(+), 6 deletions(-)

diff --git a/content/guide/navigation/modals.md b/content/guide/navigation/modals.md
index 10e53973..3755ff8d 100644
--- a/content/guide/navigation/modals.md
+++ b/content/guide/navigation/modals.md
@@ -14,11 +14,16 @@ To show a modal, call the [showModal](https://docs.nativescript.org/api/class/Vi
 <!-- note: we need a "Open In StackBlitz" button, and also put these in an official NativeScript collection to link on the docs. -->
 <!-- A strongly typed, working, Typescript application can be [found here](https://stackblitz.com/edit/nativescript-stackblitz-templates-3bvo1g?file=app%2Fdetails-page.ts,app%2Fdetails-page.xml,app%2Fmain-page.ts).  -->
 
-```xml
+<Tabs>
+<Tab flavor="typescript">
+
+::: code-group
+
+```xml [main-page.xml]
 <Button text="Show a Modal" tap="onShowModal" />
 ```
 
-```ts
+```ts [main-page.ts]
 import { EventData, View, ShowModalOptions } from '@nativescript/core'
 
 export function onShowModal(args: EventData) {
@@ -30,6 +35,184 @@ export function onShowModal(args: EventData) {
 }
 ```
 
+:::
+
+</Tab>
+
+<Tab flavor="angular">
+
+```ts
+import { Component, inject } from '@angular/core'
+import {
+  NativeDialog,
+  NATIVE_DIALOG_DATA,
+  DialogRef,
+} from '@nativescript/angular'
+
+@Component({
+  standalone: true,
+  template: `<Button text="Open Modal" (tap)="open()" />`,
+})
+export class MyComponent {
+  dialog = inject(NativeDialog)
+
+  open() {
+    this.dialog.open(ModalComponent, {
+      data: {
+        name: 'Hello!',
+      },
+    })
+  }
+}
+
+@Component({
+  standalone: true,
+  template: `<Label [text]="data?.name"></Label>`,
+})
+export class ModalComponent {
+  dialogRef = inject(DialogRef)
+  data = inject(NATIVE_DIALOG_DATA) as { name?: string }
+
+  constructor() {
+    console.log(this.data?.name) // Hello!
+  }
+
+  close() {
+    this.dialogRef.close()
+  }
+}
+```
+
+</Tab>
+
+<Tab flavor="vue">
+
+```ts
+import { $showModal } from 'nativescript-vue'
+import Detail from './Detail.vue'
+
+$showModal(Detail, {
+  props: { name: 'Hello!' },
+  closeCallback(result) {
+    console.log('Modal result:', result)
+  },
+})
+```
+
+```xml
+<!-- Detail.vue -->
+<Button @tap="$modal.close('done')" text="Close" />
+```
+
+See the full Vue modal guide: https://nativescript-vue.org/docs/essentials/routing#showing-a-modal
+
+</Tab>
+
+<Tab flavor="svelte">
+
+```ts
+import ModalPage from './ModalPage.svelte'
+import { showModal, closeModal } from 'svelte-native'
+
+async function openModal() {
+  const result = await showModal({
+    page: ModalPage,
+    props: { name: 'Hello!' },
+  })
+  console.log('Modal result:', result)
+}
+
+function close() {
+  closeModal('done')
+}
+```
+
+See the full Svelte modal guide: https://svelte.nativescript.org/docs#showmodal
+
+</Tab>
+
+<Tab flavor="solid">
+
+```ts
+import { Frame, Page, ShowModalOptions, View } from '@nativescript/core'
+import { render } from '@nativescript-community/solid-js'
+import type { JSX } from 'solid-js'
+
+type ModalResult = { ok: boolean; value?: string }
+
+function openSolidModal(
+  launcher: View,
+  Modal: (props: { close: (r?: ModalResult) => void }) => JSX.Element,
+) {
+  return new Promise<ModalResult | undefined>((resolve) => {
+    const modalPage = new Page()
+
+    const dispose = render(() => {
+      const close = (result?: ModalResult) => modalPage.closeModal(result)
+      return (
+        <stacklayout padding="16">
+          <Modal close={close} />
+        </stacklayout>
+      )
+    }, modalPage as any)
+
+    const options: ShowModalOptions = {
+      context: {},
+      fullscreen: true,
+      closeCallback: (result?: ModalResult) => {
+        dispose?.()
+        resolve(result)
+      },
+    }
+
+    launcher.showModal(modalPage, options)
+  })
+}
+
+async function onOpen() {
+  const launcher = Frame.topmost().currentPage
+  const result = await openSolidModal(launcher, ({ close }) => (
+    <>
+      <label text="Hello from a Solid modal!" />
+      <button text="OK" on:tap={() => close({ ok: true, value: 'done' })} />
+      <button text="Cancel" on:tap={() => close({ ok: false })} />
+    </>
+  ))
+
+  console.log('Modal result:', result)
+}
+```
+
+</Tab>
+
+<Tab flavor="react">
+
+```ts
+import { StackLayout, AbsoluteLayout } from '@nativescript/core'
+import * as React from 'react'
+import * as RNS from 'react-nativescript'
+
+const portalRoot = new RNS.NSVRoot()
+
+function openModal(
+  containerRef: React.RefObject<any>,
+  portalRef: React.RefObject<any>,
+) {
+  const containerView = containerRef.current?.nativeView as StackLayout
+  const portalView = portalRef.current?.nativeView as AbsoluteLayout
+
+  containerView.showModal(portalView, {
+    context: { name: 'Hello!' },
+    closeCallback: (result) => console.log('Modal result:', result),
+  })
+}
+```
+
+See the full React NativeScript modal guide: https://react-nativescript.netlify.app/docs/core-concepts/modals
+
+</Tab>
+</Tabs>
+
 :::warning 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.
 :::
@@ -40,6 +223,11 @@ To close a modal, call the `closeModal` method of any `View` from the modal.
 
 For passing data back to the parent, see [Passing Data](#passing-data).
 
+<Tabs>
+<Tab flavor="typescript">
+
+::: code-group
+
 ```xml
 <Button text="Close a Modal" tap="onCloseModal"/>
 ```
@@ -51,13 +239,82 @@ export function onCloseModal(args: EventData) {
 }
 ```
 
+:::
+
+</Tab>
+
+<Tab flavor="angular">
+
+```ts
+import { Component, inject } from '@angular/core'
+import { DialogRef } from '@nativescript/angular'
+
+@Component({})
+export class ModalComponent {
+  dialogRef = inject(DialogRef)
+
+  close() {
+    this.dialogRef.close()
+  }
+}
+```
+
+</Tab>
+
+<Tab flavor="vue">
+
+```xml
+<!-- inside Detail.vue -->
+<Button @tap="$modal.close()" text="Close" />
+```
+
+</Tab>
+
+<Tab flavor="svelte">
+
+```ts
+import { closeModal } from 'svelte-native'
+
+function close() {
+  closeModal()
+}
+```
+
+</Tab>
+
+<Tab flavor="solid">
+
+```ts
+function Modal(props: { close: () => void }) {
+  return <button text="Close" on:tap={props.close} />
+}
+```
+
+</Tab>
+
+<Tab flavor="react">
+
+```ts
+function handleCloseModal() {
+  const portalView = portalRef.current?.nativeView
+  portalView.closeModal()
+}
+```
+
+</Tab>
+</Tabs>
+
 ## Passing data {#passing-data}
 
 Modals are often used for prompting the user for input, this requires passing data between the parent and the modal.
 
 ### From parent to modal
 
-To pass data to the modal, provide it in the `context` field of the ShowModalOptions:
+To pass data to the modal in core TypeScript, provide it in the `context` field of `ShowModalOptions`.
+In Angular, pass data in the `data` option of `NativeDialog.open(...)`.
+
+<Tabs>
+<Tab flavor="typescript">
 
 ```ts
 // main-page.ts
@@ -75,7 +332,89 @@ const options: ShowModalOptions = {
 button.showModal('details-page', options)
 ```
 
-In the modal page, listen to the `shownModally` event to access the `context`:
+</Tab>
+
+<Tab flavor="angular">
+
+```ts
+const ref = this.dialog.open(ModalComponent, {
+  data: {
+    name: 'Hello!',
+  },
+})
+```
+
+```ts
+import { Component, inject } from '@angular/core'
+import { NATIVE_DIALOG_DATA } from '@nativescript/angular'
+
+@Component({})
+export class ModalComponent {
+  data = inject(NATIVE_DIALOG_DATA) as { name?: string }
+
+  constructor() {
+    console.log(this.data?.name) // Hello!
+  }
+}
+```
+
+</Tab>
+
+<Tab flavor="vue">
+
+```ts
+import { $showModal } from 'nativescript-vue'
+import Detail from './Detail.vue'
+
+$showModal(Detail, {
+  props: {
+    name: 'Hello!',
+  },
+})
+```
+
+</Tab>
+
+<Tab flavor="svelte">
+
+```ts
+import ModalPage from './ModalPage.svelte'
+import { showModal } from 'svelte-native'
+
+showModal({
+  page: ModalPage,
+  props: {
+    name: 'Hello!',
+  },
+})
+```
+
+</Tab>
+
+<Tab flavor="solid">
+
+```ts
+const result = await openSolidModal(launcher, ({ close }) => (
+  <MyModal name="Hello!" close={close} />
+))
+```
+
+</Tab>
+
+<Tab flavor="react">
+
+```ts
+containerView.showModal(portalView, {
+  context: {
+    name: 'Hello!',
+  },
+})
+```
+
+</Tab>
+</Tabs>
+
+In the core TypeScript modal page, listen to the `shownModally` event to access the `context`:
 
 ```xml
 <!-- details-page.xml -->
@@ -99,7 +438,12 @@ export function onShownModally(args: ShownModallyData) {
 
 ### From modal to parent
 
-When closing a modal, you can optionally pass data back to the parent. To do so, provide a `closeCallback` option in the ShowModalOptions:
+When closing a modal, you can optionally pass data back to the parent.
+In core TypeScript, use `closeCallback` in `ShowModalOptions`.
+In Angular, subscribe to `ref.afterClosed()` and close with `dialogRef.close(data)`.
+
+<Tabs>
+<Tab flavor="typescript">
 
 ```ts
 // main-page.ts
@@ -125,7 +469,114 @@ const options: ShowModalOptions = {
 button.showModal('details-page', options)
 ```
 
-In the modal page, listen to the `shownModally` event to access the `context`.
+</Tab>
+
+<Tab flavor="angular">
+
+```ts
+const ref = this.dialog.open(ModalComponent, {
+  data: {
+    name: 'Hello!',
+  },
+})
+
+ref.afterClosed().subscribe((data) => {
+  console.log(data) // Hello!
+})
+```
+
+```ts
+import { Component, inject } from '@angular/core'
+import { DialogRef } from '@nativescript/angular'
+
+@Component({})
+export class ModalComponent {
+  dialogRef = inject(DialogRef)
+
+  closeWithData() {
+    this.dialogRef.close('Hello!')
+  }
+}
+```
+
+</Tab>
+
+<Tab flavor="vue">
+
+```ts
+import { $showModal } from 'nativescript-vue'
+import Detail from './Detail.vue'
+
+$showModal(Detail, {
+  props: { name: 'Hello!' },
+  closeCallback(result) {
+    console.log(result) // Hello!
+  },
+})
+```
+
+```xml
+<!-- inside Detail.vue -->
+<Button @tap="$modal.close('Hello!')" text="Close" />
+```
+
+</Tab>
+
+<Tab flavor="svelte">
+
+```ts
+import ModalPage from './ModalPage.svelte'
+import { showModal } from 'svelte-native'
+
+const result = await showModal({
+  page: ModalPage,
+  props: { name: 'Hello!' },
+})
+
+console.log(result) // Hello!
+```
+
+```ts
+import { closeModal } from 'svelte-native'
+
+closeModal('Hello!')
+```
+
+</Tab>
+
+<Tab flavor="solid">
+
+```ts
+const result = await openSolidModal(launcher, ({ close }) => (
+  <>
+    <button text="Close" on:tap={() => close({ ok: true, value: 'Hello!' })} />
+  </>
+))
+
+console.log(result?.value) // Hello!
+```
+
+</Tab>
+
+<Tab flavor="react">
+
+```ts
+containerView.showModal(portalView, {
+  context: {},
+  closeCallback: (result) => {
+    console.log(result) // Hello!
+  },
+})
+```
+
+```ts
+portalView.closeModal('Hello!')
+```
+
+</Tab>
+</Tabs>
+
+In the core TypeScript modal page, listen to the `shownModally` event to access the `context`.
 
 ::: code-group
 
@@ -145,6 +596,7 @@ import {
   fromObject,
   Page,
   Button,
+  View,
   ShownModallyData,
   EventData,
 } from '@nativescript/core'