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
-```xml
+
+
+
+::: code-group
+
+```xml [main-page.xml]
```
-```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) {
}
```
+:::
+
+
+
+
+
+```ts
+import { Component, inject } from '@angular/core'
+import {
+ NativeDialog,
+ NATIVE_DIALOG_DATA,
+ DialogRef,
+} from '@nativescript/angular'
+
+@Component({
+ standalone: true,
+ template: ``,
+})
+export class MyComponent {
+ dialog = inject(NativeDialog)
+
+ open() {
+ this.dialog.open(ModalComponent, {
+ data: {
+ name: 'Hello!',
+ },
+ })
+ }
+}
+
+@Component({
+ standalone: true,
+ template: ``,
+})
+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()
+ }
+}
+```
+
+
+
+
+
+```ts
+import { $showModal } from 'nativescript-vue'
+import Detail from './Detail.vue'
+
+$showModal(Detail, {
+ props: { name: 'Hello!' },
+ closeCallback(result) {
+ console.log('Modal result:', result)
+ },
+})
+```
+
+```xml
+
+
+```
+
+See the full Vue modal guide: https://nativescript-vue.org/docs/essentials/routing#showing-a-modal
+
+
+
+
+
+```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
+
+
+
+
+
+```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((resolve) => {
+ const modalPage = new Page()
+
+ const dispose = render(() => {
+ const close = (result?: ModalResult) => modalPage.closeModal(result)
+ return (
+
+
+
+ )
+ }, 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 }) => (
+ <>
+
+
+
+
+
+```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,
+ portalRef: React.RefObject,
+) {
+ 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
+
+
+
+
:::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).
+
+
+
+::: code-group
+
```xml
```
@@ -51,13 +239,82 @@ export function onCloseModal(args: EventData) {
}
```
+:::
+
+
+
+
+
+```ts
+import { Component, inject } from '@angular/core'
+import { DialogRef } from '@nativescript/angular'
+
+@Component({})
+export class ModalComponent {
+ dialogRef = inject(DialogRef)
+
+ close() {
+ this.dialogRef.close()
+ }
+}
+```
+
+
+
+
+
+```xml
+
+
+```
+
+
+
+
+
+```ts
+import { closeModal } from 'svelte-native'
+
+function close() {
+ closeModal()
+}
+```
+
+
+
+
+
+```ts
+function Modal(props: { close: () => void }) {
+ return
+}
+```
+
+
+
+
+
+```ts
+function handleCloseModal() {
+ const portalView = portalRef.current?.nativeView
+ portalView.closeModal()
+}
+```
+
+
+
+
## 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(...)`.
+
+
+
```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`:
+
+
+
+
+```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!
+ }
+}
+```
+
+
+
+
+
+```ts
+import { $showModal } from 'nativescript-vue'
+import Detail from './Detail.vue'
+
+$showModal(Detail, {
+ props: {
+ name: 'Hello!',
+ },
+})
+```
+
+
+
+
+
+```ts
+import ModalPage from './ModalPage.svelte'
+import { showModal } from 'svelte-native'
+
+showModal({
+ page: ModalPage,
+ props: {
+ name: 'Hello!',
+ },
+})
+```
+
+
+
+
+
+```ts
+const result = await openSolidModal(launcher, ({ close }) => (
+
+))
+```
+
+
+
+
+
+```ts
+containerView.showModal(portalView, {
+ context: {
+ name: 'Hello!',
+ },
+})
+```
+
+
+
+
+In the core TypeScript modal page, listen to the `shownModally` event to access the `context`:
```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)`.
+
+
+
```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`.
+
+
+
+
+```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!')
+ }
+}
+```
+
+
+
+
+
+```ts
+import { $showModal } from 'nativescript-vue'
+import Detail from './Detail.vue'
+
+$showModal(Detail, {
+ props: { name: 'Hello!' },
+ closeCallback(result) {
+ console.log(result) // Hello!
+ },
+})
+```
+
+```xml
+
+
+```
+
+
+
+
+
+```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!')
+```
+
+
+
+
+
+```ts
+const result = await openSolidModal(launcher, ({ close }) => (
+ <>
+ close({ ok: true, value: 'Hello!' })} />
+ >
+))
+
+console.log(result?.value) // Hello!
+```
+
+
+
+
+
+```ts
+containerView.showModal(portalView, {
+ context: {},
+ closeCallback: (result) => {
+ console.log(result) // Hello!
+ },
+})
+```
+
+```ts
+portalView.closeModal('Hello!')
+```
+
+
+
+
+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'