Alert-API in React Native

Alert zeigt native System-Dialoge an – das mobile Gegenstück zu JavaScripts window.confirm()/window.alert() im Browser, nur mit mehreren frei gestaltbaren Knöpfen.

1. Beschreibung

Anders als die meisten React-Native-Bausteine ist Alert KEINE Komponente, die Sie in JSX einbauen, sondern eine reine JavaScript-Funktion, die Sie AUFRUFEN – Alert.alert(titel, nachricht, knoepfe).

2. Kurzes Beispiel

Alert.alert('Titel', 'Eine Nachricht.');

3. Komplettes Projekt: Löschbestätigung

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 [eintraege, setEintraege] = useState(['Eintrag A', 'Eintrag B', 'Eintrag C']);

  function loeschenBestaetigen(eintrag) {
    Alert.alert(
      'Wirklich löschen?',
      `"${eintrag}" wird unwiderruflich entfernt.`,
      [
        { text: 'Abbrechen', style: 'cancel' },
        {
          text: 'Löschen',
          style: 'destructive',
          onPress: () => setEintraege((e) => e.filter((x) => x !== eintrag)),
        },
      ]
    );
  }

  return (
    <View style={styles.container}>
      {eintraege.map((eintrag) => (
        <View key={eintrag} style={styles.zeile}>
          <Text>{eintrag}</Text>
          <Button title="Löschen" color="#ef4444" onPress={() => loeschenBestaetigen(eintrag)} />
        </View>
      ))}
    </View>
  );
}

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

4. Erklärung

Alert.alert(titel, nachricht, knoepfe) – drittes Argument ist ein Array von Knopf-Objekten; ohne dieses Argument zeigt Alert nur einen einzelnen "OK"-Knopf.
style: 'cancel' – kennzeichnet den Abbrechen-Knopf optisch (unter iOS fett dargestellt, meist links positioniert).
style: 'destructive' – färbt den Knopf-Text rot, als visuelle Warnung vor einer unumkehrbaren Aktion.
onPress pro Knopf – eigene Callback-Funktion für jeden einzelnen Knopf, nicht nur einen gemeinsamen Handler für den ganzen Dialog.

5. Ausgaben

Ausgabe

Drei Zeilen mit Einträgen und je einem roten "Löschen"-Knopf. Antippen öffnet einen nativen Dialog "Wirklich löschen?" mit der Nachricht und zwei Knöpfen ("Abbrechen", "Löschen" in Rot). "Abbrechen" schließt den Dialog ohne Änderung, "Löschen" entfernt den Eintrag aus der Liste.

Tipp: Alert eignet sich für kurze Bestätigungen und einfache Auswahl aus wenigen Optionen. Für komplexere Dialoge (mit Texteingabe, mehreren Formularfeldern, individuellem Design) bauen Sie stattdessen ein Modal – ein eigenes Thema, das über diese Referenz-Serie hinausgeht.