Alert

Learn to show alerts with Alert.alert.

What is Alert?

In React Native the simplest way to show a quick warning to the user is Alert.alert. This function opens a modal dialog box in the center of the screen. It blocks interaction with other screen elements until the user presses a button.

Alert.alert takes three parameters: title, message and a buttons array. In the simplest usage you provide only the title: Alert.alert('Saved'). Message and buttons are optional; you add them as needed.

Alert.alert syntax

The full form of the Alert.alert call is: Alert.alert(title, message, buttons). The title is a string, the message is a string, and the buttons is an array of objects. If no buttons are provided a single OK button appears by default.

Alert.alert(
  'Delete file?',
  'This action cannot be undone.'
);

This example has only title and message; the default OK button is added automatically. You must import Alert from the react-native package.

Exercise Your turn: show an alert

Import Alert from react-native. When a button is pressed call Alert.alert('Record deleted', 'Cannot be undone').

Show example solution

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

function Screen() {
  return (
    <Button
      title="Delete"
      onPress={() => Alert.alert('Record deleted', 'Cannot be undone')}
    />
  );
}

Test yourself

What is the minimum number of parameters for Alert.alert?
```
Alert.alert('Saved')
```
- Only one: title
- At least two: title and message
- With no parameters at all
- At least three: title, message, buttons
Show answer

Only one: title — Only the title is required; message and buttons are optional.

Fill in the blank: Alert call

Alert.____('Warning', 'File saved');

Show answer

Alert.alert('Warning', 'File saved');

Match: Alert parameters

title

first parameter
message

second parameter
buttons

third parameter

Next lesson: Alert buttons

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies