Alert API in React Native

Alert displays native system dialogs – the mobile counterpart to JavaScript's window.confirm()/window.alert() in the browser, just with several freely configurable buttons.

1. Description

Unlike most React Native building blocks, Alert is NOT a component you place in JSX, but a plain JavaScript function you CALL – Alert.alert(title, message, buttons).

2. Short example

Alert.alert('Title', 'A message.');

3. Complete project: delete confirmation

npx create-expo-app alert-demo
cd alert-demo

App.js

import { useState } from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native';

export default function App() {
  const [items, setItems] = useState(['Item A', 'Item B', 'Item C']);

  function confirmDelete(item) {
    Alert.alert(
      'Really delete?',
      `"${item}" will be permanently removed.`,
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Delete',
          style: 'destructive',
          onPress: () => setItems((i) => i.filter((x) => x !== item)),
        },
      ]
    );
  }

  return (
    <View style={styles.container}>
      {items.map((item) => (
        <View key={item} style={styles.row}>
          <Text>{item}</Text>
          <Button title="Delete" color="#ef4444" onPress={() => confirmDelete(item)} />
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 20, gap: 12 },
  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
});

4. Explanation

Alert.alert(title, message, buttons) – the third argument is an array of button objects; without it, Alert only shows a single "OK" button.
style: 'cancel' – visually marks the cancel button (bold on iOS, usually positioned on the left).
style: 'destructive' – colors the button text red, as a visual warning for an irreversible action.
onPress per button – its own callback function for each individual button, not just one shared handler for the whole dialog.

5. Outputs

Ausgabe

Three rows with items and a red "Delete" button each. Tapping one opens a native dialog "Really delete?" with the message and two buttons ("Cancel", "Delete" in red). "Cancel" closes the dialog with no change, "Delete" removes the item from the list.

Tipp: Alert is well suited for short confirmations and simple choices between a few options. For more complex dialogs (with text input, multiple form fields, custom design), build a Modal instead – its own topic, beyond the scope of this reference series.