Navigation using Modals

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()
  }
}

import { $showModal } from 'nativescript-vue'
import Detail from './Detail.vue'

$showModal(Detail, {
  props: { name: 'Hello!' },
  closeCallback(result) {
    console.log('Modal result:', result)
  },
})

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')
}

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)
}

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),
  })
}

import { Component, inject } from '@angular/core'
import { DialogRef } from '@nativescript/angular'

@Component({})
export class ModalComponent {
  dialogRef = inject(DialogRef)

  close() {
    this.dialogRef.close()
  }
}

import { closeModal } from 'svelte-native'

function close() {
  closeModal()
}

function Modal(props: { close: () => void }) {
  return <button text="Close" on:tap={props.close} />
}

function handleCloseModal() {
  const portalView = portalRef.current?.nativeView
  portalView.closeModal()
}

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

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

const options: ShowModalOptions = {
  context: {
    name: 'John Doe',
  } as ExampleModalContext,
}

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

const ref = this.dialog.open(ModalComponent, {
  data: {
    name: 'Hello!',
  },
})

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!
  }
}

import { $showModal } from 'nativescript-vue'
import Detail from './Detail.vue'

$showModal(Detail, {
  props: {
    name: 'Hello!',
  },
})

import ModalPage from './ModalPage.svelte'
import { showModal } from 'svelte-native'

showModal({
  page: ModalPage,
  props: {
    name: 'Hello!',
  },
})

const result = await openSolidModal(launcher, ({ close }) => (
  <MyModal name="Hello!" close={close} />
))

containerView.showModal(portalView, {
  context: {
    name: 'Hello!',
  },
})

// main-page.ts

import { ShowModalOptions } from '@nativescript/core'

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

const options: ShowModalOptions = {
  context: {
    name: 'John Doe',
  } as ExampleModalContext,
  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)

const ref = this.dialog.open(ModalComponent, {
  data: {
    name: 'Hello!',
  },
})

ref.afterClosed().subscribe((data) => {
  console.log(data) // Hello!
})

import { Component, inject } from '@angular/core'
import { DialogRef } from '@nativescript/angular'

@Component({})
export class ModalComponent {
  dialogRef = inject(DialogRef)

  closeWithData() {
    this.dialogRef.close('Hello!')
  }
}

import { $showModal } from 'nativescript-vue'
import Detail from './Detail.vue'

$showModal(Detail, {
  props: { name: 'Hello!' },
  closeCallback(result) {
    console.log(result) // Hello!
  },
})

import ModalPage from './ModalPage.svelte'
import { showModal } from 'svelte-native'

const result = await showModal({
  page: ModalPage,
  props: { name: 'Hello!' },
})

console.log(result) // Hello!

import { closeModal } from 'svelte-native'

closeModal('Hello!')

const result = await openSolidModal(launcher, ({ close }) => (
  <>
    <button text="Close" on:tap={() => close({ ok: true, value: 'Hello!' })} />
  </>
))

console.log(result?.value) // Hello!

containerView.showModal(portalView, {
  context: {},
  closeCallback: (result) => {
    console.log(result) // Hello!
  },
})

portalView.closeModal('Hello!')