Alert buttons

Learn alert buttons and callbacks.

Alert buttons

By default Alert.alert shows a single OK button. To add your own buttons you pass an array as the third parameter. Each button is an object with text and onPress properties.

Alert.alert('Save', 'Save changes?', [
  { text: 'Cancel', onPress: () => {} },
  { text: 'Save', onPress: () => save() }
]);

Buttons are laid out left to right in array order. On iOS at most three buttons are shown; on Android the limit is more flexible.

The onPress callback

The onPress property of each button object is a function called when the user presses that button. Inside this function you do whatever you want: save data, change navigation or update state.

For a cancel button you usually provide an empty function: onPress: () => {}. For a confirm button you provide the function that does the actual work. After a button is pressed the Alert closes automatically; you do not need to write closing code.

Exercise Your turn: Alert with two buttons

Call Alert.alert with title 'Exit' and message 'Do you want to exit?'. Add two buttons: Cancel and Exit. Give each an onPress.

Show example solution

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

function Screen() {
  return (
    <Button
      title="Exit"
      onPress={() =>
        Alert.alert('Exit', 'Do you want to exit?', [
          { text: 'Cancel', onPress: () => {} },
          { text: 'Exit', onPress: () => doExit() }
        ])
      }
    />
  );
}

Test yourself

Fill in the blank: button object

{ text: 'OK', ____: () => save() }

Show answer

{ text: 'OK', onPress: () => save() }

Which property is required in an Alert button object?
```
{ text: 'Save', onPress: () => save() }
```
- color
- text
- style
- icon
Show answer

text — text sets the button label and is required.
Match: button property and role

text

button label
onPress

press handler function
style

button appearance

Next lesson: Toast

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies