Dialogs

Dialogs wraps the platform's own alert, confirmation, prompt, action sheet and toast. Every one of React Native's dialog APIs is a callback, and a dialog is fundamentally a question, so every method here resolves to the answer instead.

Import
import { Dialogs } from '@ng-native/device';
Inject
inject(Dialogs)
import { Component, inject } from '@angular/core';
import { Pressable, Text } from '@ng-native/components';
import { Dialogs } from '@ng-native/device';

@Component({
  selector: 'app-note-row',
  imports: [Pressable, Text],
  template: `<pressable (press)="remove()"><text>Delete</text></pressable>`,
})
export class NoteRow {
  private readonly dialogs = inject(Dialogs);

  protected async remove(): Promise<void> {
    const sure = await this.dialogs.confirm('Delete this note?', { destructive: true });
    if (sure) this.deleteNote();
  }

  private deleteNote(): void {}
}

tell(title, message?, dismiss?) says something and waits until it has been read, resolving when the dialog is dismissed. confirm(title, options?) asks something with two answers and resolves to whether they agreed; destructive paints the confirm button red, as the platform paints a delete. The buttons keep the platform's own order: on iOS, Cancel on the left and the confirming button on the right.

ask(title, options?) asks for a line of text and resolves to null if cancelled. It is iOS only: Alert.prompt has no Android equivalent, and inventing one out of a modal and a text input would be a dialog that looks nothing like the platform's, so on Android this resolves to null and a caller falls back to a screen of its own.

choose(title, choices) offers a short list of Choices ({ label, style? }, with style one of 'default' | 'cancel' | 'destructive') and resolves to the index chosen, or null if dismissed. It picks the platform's own idiom - an action sheet on iOS, a dialog on Android - so the call site writes the intent once. It appends a Cancel choice on both platforms if the list does not already have one, because neither an action sheet nor an Android alert should be a dead end. Android's own dialog holds at most three buttons, cancel included; past that the platform silently drops the rest, so choose() logs a console error naming the fix rather than showing a list some of whose choices nobody could ever reach - reach for a select built on your own control or an action-sheet-shaped list instead for anything longer.

notify(message, options?) says something small and transient: a toast on Android. iOS has no such affordance and this does nothing there, rather than putting up a modal alert for something that did not warrant interrupting anyone - an app that needs to be seen on both platforms wants tell() instead.

Off a device and on the web

Off a device tell() and confirm() resolve immediately (confirm() to false), ask() and choose() resolve to null, and notify() does nothing, because there is no platform dialog underneath any of them. There is no equivalent to a native action sheet or Android toast on the web; tell() and confirm() are the two most likely to want a web fallback of their own.

Reference

Dialogsservice@ng-native/device
import { Dialogs } from '@ng-native/device';

inject(Dialogs).confirm('Delete this?', { destructive: true }) .

Methods

tell(title: string, message?: string, dismiss = 'OK'): Promise<void>

Say something, and wait until it has been read. Resolves when the dialog is dismissed.

confirm(title: string, options: { message?: string; confirm?: string; cancel?: string; destructive?: boolean } = {}): Promise<boolean>

Ask something with two answers. Resolves to whether they agreed.

ask(title: string, options: { message?: string; value?: string } = {}): Promise<string | null>

Ask for a line of text. Resolves to null if they cancelled.

choose(title: string, choices: readonly Choice[]): Promise<number | null>

Offer a short list of choices. Resolves to the index chosen, or null if dismissed.

notify(message: string, options: { long?: boolean } = {}): void

Say something small and transient.

Angular components as native iOS and Android views, built and shipped with Expo.

An alpha. MIT licensed. Sponsor its development.

An independent project, not affiliated with or endorsed by Google, the Angular team or Expo. Angular is a trademark of Google LLC.