Guías Técnicas

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.