Skip to main content
Version: Next

Alert

Launches an alert dialog with the specified title and message.

Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.

This is an API that works both on Android and iOS and can show static alerts. Alert that prompts the user to enter some information is available on iOS only.

Example​

iOS​

On iOS you can specify any number of buttons. Each button can optionally specify a style or be emphasized, available options are represented by the AlertButtonStyle enum and the isPreferred field on AlertButton.

Android​

On Android at most three buttons can be specified. Android has a concept of a neutral, negative and a positive button:

  • If you specify one button, it will be the 'positive' one (such as 'OK')
  • Two buttons mean 'negative', 'positive' (such as 'Cancel', 'OK')
  • Three buttons mean 'neutral', 'negative', 'positive' (such as 'Later', 'Cancel', 'OK')

Alerts on Android can be dismissed by tapping outside of the alert box. It is disabled by default and can be enabled by providing an optional AlertOptions parameter with the cancelable property set to true i.e.
{cancelable: true}.

The cancel event can be handled by providing an onDismiss callback property inside the options parameter.

Example
Android
​


Reference

Methods​

alert()​

static alert (
title: string,
message?: string,
buttons?: AlertButton[],
options?: AlertOptions,
);

Parameters:

NameTypeDescription
title
Required
stringThe dialog's title. Passing null or empty string will hide the title.
messagestringAn optional message that appears below the dialog's title.
buttonsAlertButton[]An optional array containing buttons configuration.
optionsAlertOptionsAn optional Alert configuration.

prompt()
iOS
​

static prompt: (
title: string,
message?: string,
callbackOrButtons?: ((text: string) => void) | AlertButton[],
type?: AlertType,
defaultValue?: string,
keyboardType?: string,
);

Create and display a prompt to enter some text in form of Alert.

Parameters:

NameTypeDescription
title
Required
stringThe dialog's title.
messagestringAn optional message that appears above the text input.
callbackOrButtonsfunction
AlertButton[]
If passed a function, it will be called with the prompt's value
(text: string) => void, when the user taps 'OK'.
If passed an array, buttons will be configured based on the array content.
typeAlertTypeThis configures the text input.
defaultValuestringThe default text in text input.
keyboardTypestringThe keyboard type of first text field (if exists). One of TextInput keyboardTypes.
optionsAlertOptionsAn optional Alert configuration.

Type Definitions​

AlertButtonStyle
iOS
​

An iOS Alert button style.

Type
enum

Constants:

ValueDescription
'default'Default button style.
'cancel'Cancel button style.
'destructive'Destructive button style.

AlertType
iOS
​

An iOS Alert type.

Type
enum

Constants:

ValueDescription
'default'Default alert with no inputs
'plain-text'Plain text input alert
'secure-text'Secure text input alert
'login-password'Login and password alert

AlertButton​

An object describing the configuration of a button in the alert.

Type
array of objects

Objects properties:

NameTypeDescription
textstringButton label.
onPressfunctionCallback function when button is pressed.
style
iOS
AlertButtonStyleButton style, on Android this property will be ignored.
isPreferred
iOS
booleanWhether button should be emphasized, on Android this property will be ignored.

AlertOptions​

Type
object

Properties:

NameTypeDescription
cancelable
Android
booleanDefines if alert can be dismissed by tapping outside of the alert box.
userInterfaceStyle
iOS
stringThe interface style used for the alert, can be set to light or dark, otherwise the default system style will be used.
onDismiss
Android
functionCallback function fired when alert has been dismissed.