Reaccionar API de alerta nativa

En este artículo, vamos a ver cómo crear una alerta en react-native . Para esto, vamos a utilizar React Native Alert API. Es básicamente una pequeña ventana que aparece para obtener la elección del usuario.

Es una API que utiliza el método de alerta para mostrar el cuadro de diálogo de alerta. Este cuadro de diálogo puede tener tres botones que son positivo, negativo y neutral para realizar diferentes acciones.

Sintaxis: 

Alert.alert(
      "Alert Title",
      "Alert Msg",
      [
        {
          text: "Cancel"
        },
        { 
          text: "OK"
        }
      ]
);

La API de alerta de React Native acepta dos métodos, como se menciona y describe a continuación.

• alert(): este método se utiliza para crear y mostrar un mensaje mediante una ventana emergente.
• prompt(): este método se utiliza para crear y mostrar un aviso para ingresar algún texto en forma de alerta.

Parámetros para el método de alerta: 

• Título: es un parámetro obligatorio que se muestra como título del cuadro de diálogo.
• Mensaje: Es un parámetro opcional que muestra un mensaje del cuadro de diálogo.
• Botones: también es un parámetro opcional que muestra botones en el cuadro de diálogo.
• Opciones: también es un parámetro opcional y solo está disponible en android.

Parámetros para el método rápido: 

• Título: es un parámetro obligatorio que se muestra como título del cuadro de diálogo.
• Mensaje: Es un parámetro opcional que muestra un mensaje del cuadro de diálogo.
• callbackOrButtons: este parámetro se puede pasar como una función o como un botón, si se pasa como una función, se llamará con el valor de la solicitud cuando el usuario esté de acuerdo con la condición. Y si pasó como un botón, se configurará según el contenido de la array.
• tipo: Este parámetro configura la entrada de texto.
• defaultValue: este parámetro es una string que define el texto predeterminado en la entrada de texto.
• keyboardType: este parámetro es una string que define el tipo de teclado del primer campo de texto, si existe.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

Estructura del proyecto:

Ejemplo: Ahora implementemos la funcionalidad de alerta. Aquí creamos un botón y cuando alguien haga clic en ese botón, aparecerá una alerta.

import React from 'react';
import { StyleSheet,
         Text, 
          View,
          Button,
          Alert
        } from 'react-native';
  
export default function App() {
   
  // Alert function
  const alert = ()=>{
    Alert.alert(
      "GeeksforGeeks",
      "How are you!",
      [
        {
          text: "Cancel",
        },
        {
          text: "OK",
        }
      ]
    );
  }
  
  return (
    <View style={styles.container}>
      <Button title={"Click me"} onPress={alert}/>
    </View>
  );
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

Referencia: https://reactnative.dev/docs/alert