Alert

Alert.alert shows the platform’s alert dialog: UIAlertController on iOS and AlertDialog on Android. It returns a promise that resolves with the index of the button the user pressed. Unlike the other components in this set, an alert has the platform’s own look.

import { Alert } from "nsh/ui/mobile";

#Usage

import { mount, signal, Text, View } from "nsh";
import { Alert, Button } from "nsh/ui/mobile";

function App() {
  const answer = signal("–");
  const confirm = async () => {
    const i = await Alert.alert("Delete the photo?", "This cannot be undone.", [
      { text: "Cancel", style: "cancel" },
      { text: "Delete", style: "destructive" },
    ]);
    answer.set(i === 1 ? "deleted" : "kept");
  };
  return (
    <View style={{ flex: 1, padding: 16, paddingTop: 48, gap: 12 }}>
      <Button title="Delete…" variant="danger" onPress={confirm} />
      <Text>{answer()}</Text>
    </View>
  );
}

mount(App);

With no buttons, the alert has one “OK” button:

await Alert.alert("Saved", "Your changes were saved.");

#API

Alert.alert(
  title: string,
  message?: string | null,
  buttons?: AlertButton[] | null,
  options?: AlertOptions | null,
): Promise<number>

The promise resolves with the index of the pressed button in buttons, or -1 when the alert was dismissed without a button (Android, with cancelable). It does not reject.

#AlertButton

Field	Type	Default	Description
text	string | null	"OK"	The button’s label.
style	"default" | "cancel" | "destructive"	"default"	cancel marks the cancel button; destructive marks a destructive action (red on iOS).

#AlertOptions

Field	Type	Default	Description
cancelable	boolean	false	Android: a tap outside the dialog or the back button dismisses it, and the promise resolves with -1.

#Platform notes

• iOS: the buttons are laid out by UIAlertController. A button with style: "cancel" is placed where iOS puts cancel buttons, which may differ from its position in your array; the index you get back is always its index in buttons.
• Android: an AlertDialog shows at most three buttons. They are mapped by position: the last button is the positive button, the one before it the negative button, and the one before that the neutral button. Further buttons at the start of the array are not shown. Button styles do not change the look.

#Related

• ActionSheet: a list of actions.
• Sheet: a bottom sheet with your own content.
• nsh/android: Toast.show for short messages on Android.