Alert en React Native: Mensajes Emergentes

¿Qué es Alert en React Native?

El componente Alert en React Native se utiliza para mostrar mensajes emergentes con información, advertencias o solicitudes de confirmación. Son útiles para proporcionar retroalimentación al usuario en diversas situaciones, como cuando el usuario realiza una acción importante o se necesita confirmación para continuar.

🧱 Estructura básica de Alert

El componente Alert no requiere ser añadido al árbol de componentes, ya que es un componente global para mostrar alertas. Se usa llamando a su método estático Alert.alert().

jsx

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

const App = () => {
const showAlert = () => {
  Alert.alert(
    'Confirmación',
    '¿Estás seguro de continuar?',
    [
      {
        text: 'Cancelar',
        onPress: () => console.log('Cancelado'),
        style: 'cancel',
      },
      {
        text: 'Aceptar',
        onPress: () => console.log('Aceptado'),
      },
    ],
    { cancelable: false }
  );
};

return (
  <View style={styles.container}>
    <Button title="Mostrar Alerta" onPress={showAlert} />
  </View>
);
};

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

export default App;

Propiedades y métodos de `Alert`

Alert.alert(title, message, buttons, options): Muestra la alerta con un título, mensaje, botones y opciones personalizadas.
- title: El título de la alerta.
- message: El mensaje que se mostrará en la alerta.
- buttons: Un arreglo de objetos que representan los botones de la alerta. Cada botón tiene un texto, una función que se ejecuta al presionar el botón y un estilo (opcional).
- options: Opciones adicionales como cancelable (si la alerta se puede cerrar tocando fuera de ella).

🛑 Alerta de Confirmación

En este ejemplo, mostramos una alerta de confirmación para que el usuario confirme antes de continuar con una acción.

jsx

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

const App = () => {
const confirmAction = () => {
  Alert.alert(
    'Confirmación',
    '¿Estás seguro de que deseas continuar?',
    [
      {
        text: 'Cancelar',
        style: 'cancel',
      },
      {
        text: 'Aceptar',
        onPress: () => console.log('Acción confirmada'),
      },
    ],
    { cancelable: false }
  );
};

return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Confirmar Acción" onPress={confirmAction} />
    </View>
  );
};

export default App;

📜 Alerta con múltiples botones

En este ejemplo, mostramos una alerta con varios botones para proporcionar diferentes opciones al usuario.

jsx

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

const App = () => {
const showMultipleButtonsAlert = () => {
  Alert.alert(
    'Elige una opción',
    '¿Qué deseas hacer?',
    [
      {
        text: 'Cancelar',
        style: 'cancel',
      },
      {
        text: 'Opción 1',
        onPress: () => console.log('Opción 1 seleccionada'),
      },
      {
        text: 'Opción 2',
        onPress: () => console.log('Opción 2 seleccionada'),
      },
    ],
    { cancelable: true }
  );
};

return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Mostrar múltiples opciones" onPress={showMultipleButtonsAlert} />
    </View>
  );
};

export default App;

Alert

El componente Alert en React Native es una herramienta simple pero poderosa para mostrar mensajes emergentes que ayudan a proporcionar retroalimentación o solicitar confirmación al usuario. Con Alert.alert(), puedes crear alertas con múltiples botones y opciones personalizadas. Asegúrate de usar las alertas de manera efectiva para mantener una experiencia de usuario fluida y no interrumpir innecesariamente.