Skip to main content
The Alert API launches an alert dialog with a specified title and message. It works on both iOS and Android, allowing you to show static alerts or prompt users for input (iOS only).

​
Import

import { Alert } from 'react-native';

​
Methods

​
alert()

Displays a native alert dialog with optional buttons. 
Alert.alert(title, message, buttons, options);
​
title
string
required
The dialog’s title. Pass null or empty string for no title.
​
message
string
An optional message that appears below the title.
​
buttons
AlertButton[]
An optional array of buttons. If not provided, a default “OK” button is shown.
  • iOS: Supports any number of buttons
  • Android: Maximum of 3 buttons (neutral, negative, positive)
​
options
AlertOptions
Optional configuration object.Properties:
  • cancelable (boolean, Android only): Whether the alert can be dismissed by tapping outside
  • onDismiss (function, Android only): Callback when alert is dismissed
  • userInterfaceStyle (string): Can be ‘light’, ‘dark’, or ‘unspecified’

​
AlertButton Type

type AlertButton = {
  text?: string;
  onPress?: (value?: string) => void;
  isPreferred?: boolean; // iOS only
  style?: 'default' | 'cancel' | 'destructive'; // iOS only
};

​
prompt() (iOS only)

Displays a native prompt dialog with a text input field. 
Alert.prompt(title, message, callbackOrButtons, type, defaultValue, keyboardType, options);
​
title
string
required
The dialog’s title.
​
message
string
An optional message that appears below the title.
​
callbackOrButtons
function | AlertButton[]
Either a callback function that receives the input text, or an array of buttons.
​
type
AlertType
The type of input field. Options:
  • 'default': Standard text input
  • 'plain-text': Plain text input
  • 'secure-text': Secure text entry (password)
  • 'login-password': Username and password fields
Default: 'plain-text'
​
defaultValue
string
The default text in the input field.
​
keyboardType
string
The keyboard type for the input field (e.g., ‘numeric’, ‘email-address’).
​
options
AlertOptions
Same options as alert() method.

​
Examples

​
Basic Alert

import { Alert, Button } from 'react-native';

const showAlert = () => {
  Alert.alert(
    'Alert Title',
    'This is an alert message',
  );
};

<Button title="Show Alert" onPress={showAlert} />

​
Alert with Buttons

Alert.alert(
  'Delete Item',
  'Are you sure you want to delete this item?',
  [
    {
      text: 'Cancel',
      onPress: () => console.log('Cancel Pressed'),
      style: 'cancel',
    },
    {
      text: 'Delete',
      onPress: () => console.log('Delete Pressed'),
      style: 'destructive',
    },
  ],
);

​
iOS Prompt

Alert.prompt(
  'Enter your name',
  'What is your name?',
  (text) => console.log('You entered:', text),
  'plain-text',
  'Default Name',
);

​
Prompt with Login Fields

Alert.prompt(
  'Login',
  'Enter your credentials',
  [
    {
      text: 'Cancel',
      style: 'cancel',
    },
    {
      text: 'Login',
      onPress: ({ login, password }) => {
        console.log('Login:', login);
        console.log('Password:', password);
      },
    },
  ],
  'login-password',
);

​
Android Cancelable Alert

Alert.alert(
  'Update Available',
  'A new version is available. Update now?',
  [
    { text: 'Later', onPress: () => console.log('Later pressed') },
    { text: 'Cancel', style: 'cancel' },
    { text: 'Update', onPress: () => console.log('Update pressed') },
  ],
  {
    cancelable: true,
    onDismiss: () => console.log('Alert dismissed'),
  },
);

​
Platform Differences

The prompt() method is iOS only. On Android, calling prompt() will have no effect.

​
Button Handling

iOS:
  • Supports unlimited number of buttons
  • Buttons can have style property: 'default', 'cancel', or 'destructive'
  • The isPreferred property highlights a specific button
Android:
  • Maximum of 3 buttons
  • Button order matters: [neutral, negative, positive]
  • The last button in the array is displayed as the positive action

​
Button Positioning

// iOS: All buttons displayed vertically
// Android: 2 buttons side-by-side, 3rd button on new line

Alert.alert(
  'Three Button Alert',
  'Button positioning varies by platform',
  [
    { text: 'Ask me later' },  // Android: Neutral
    { text: 'Cancel' },         // Android: Negative  
    { text: 'OK' },             // Android: Positive
  ],
);

​
Best Practices

Always provide a cancel option for destructive actions to prevent accidental data loss.
On Android, alerts are dismissed when the app goes to the background. Consider this when implementing critical user flows.

Build docs developers (and LLMs) love

Get started for freeTalk to us