Alert

React Native · Reference cheat sheet

📋 Overview

Alert.alert shows a native system dialog with a title, message, and buttons. Use for confirmations and simple errors. For custom UI, use a modal—not Alert. On web/unsupported platforms behavior differs.

🔧 Core concepts

Buttons dismiss the alert when pressed; keep handlers light.

💡 Examples

import { Alert, Pressable, Text } from "react-native";

export function DeleteButton({ onConfirm }: { onConfirm: () => void }) {
  return (
    <Pressable
      onPress={() =>
        Alert.alert("Delete item?", "This cannot be undone.", [
          { text: "Cancel", style: "cancel" },
          { text: "Delete", style: "destructive", onPress: onConfirm },
        ])
      }
    >
      <Text>Delete</Text>
    </Pressable>
  );
}

function showError(err: Error) {
  Alert.alert("Something went wrong", err.message);
}

⚠️ Pitfalls

• Relying on Alert.prompt on Android—not available.
• Stacking multiple alerts.
• Putting long forms inside Alert—use a screen/modal.
• Forgetting a cancel action on destructive flows.

🔗 Related

• modal.md — custom dialogs
• pressable.md — triggers
• vibration.md — haptic emphasis
• accesebility.md — announcements
• share.md — system sheets