Xử lý Alert Dialog Box trong React Native

Alert là API tích hợp sẵn của React Native để hiển thị hộp thoại (dialog) xác nhận, thông báo với tiêu đề, nội dung và các nút bấm.

Import

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

Cú pháp

Alert.alert(title, message?, buttons?, options?)

Cấu trúc nút bấm (buttons)

Mỗi nút là object:

{
  text: 'OK',           // Nhãn hiển thị
  onPress: () => {},    // Callback khi bấm
  style: 'default' | 'cancel' | 'destructive' // Chỉ iOS
}

Ví dụ 1: Dialog cơ bản 3 nút (iOS: 3 nút, Android: tối đa 3 nút)

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

const App = () => {
  const showAlert = () =>
    Alert.alert(
      'Xác nhận',
      'Bạn có muốn tiếp tục không?',
      [
        { text: 'Sau', onPress: () => console.log('Bấm Sau') },
        { text: 'Hủy', onPress: () => console.log('Bấm Hủy'), style: 'cancel' },
        { text: 'Đồng ý', onPress: () => console.log('Bấm Đồng ý') },
      ],
      { cancelable: false } // Android: không tắt khi bấm ngoài
    );

  return (
    
      
    
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 15 },
});

export default App;

Ví dụ 2: cancelable: true (mặc định Android)

Khi cancelable: true, bấm ra ngoài dialog sẽ đóng nó (chỉ Android). iOS luôn cho phép huỷ bằng cách bấm ra ngoài hoặc swipe xuống.

Lưu ý quan trọng về Android

• Android chỉ hỗ trợ **tối đa 3 nút**: Neutral (thứ 1), Negative (thứ 2), Positive (thứ 3).
• Nếu truyền > 3 nút, chỉ 3 nút đầu hiển thị.
• style: 'cancel' trên Android sẽ đặt nút đó ở vị trí Negative (thứ 2).
• style: 'destructive' (màu đỏ) chỉ hoạt động trên iOS.

Ví dụ 3: Alert đơn giản (chỉ 1 nút)

Alert.alert(
  'Thông báo',
  'Đã lưu thành công!',
  [{ text: 'OK', onPress: () => console.log('Đóng') }]
);

Ví dụ 4: Xử lý huỷ (onDismiss)

Alert.alert(
  'Cảnh báo',
  'Dữ liệu chưa lưu. Thoát ngay?',
  [
    { text: 'Ở lại', style: 'cancel' },
    { text: 'Thoát', style: 'destructive', onPress: () => navigation.goBack() },
  ],
  { 
    cancelable: false,
    onDismiss: () => console.log('Dialog đã đóng') 
  }
);

Tóm tắt

Alert.alert() là API đồng bộ, không trả về Promise. Để dùng async/await, hãy wrap trong Promise hoặc dùng thư viện như react-native-dialog cho UI tùy biến cao hơn.