¿Cómo esperar la respuesta del cuadro de diálogo Alerta en React Native?

Haz todo lo posible por comprender el código correctamente previamente a adaptarlo a tu proyecto y si ttienes algo que aportar puedes dejarlo en la sección de comentarios.

Solución:

React-native Alert no detiene la ejecución del código debajo de ella. Al cambiarlo a la función asíncrona que resuelve la promesa de la acción del usuario, funcionará como ASYNC-Alert.

const AsyncAlert = async () => new Promise((resolve) => 
  Alert.alert(
    'info',
    'Message',
    [
      
        text: 'ok',
        onPress: () => 
          resolve('YES');
        ,
      ,
    ],
     cancelable: false ,
  );
);

await AsyncAlert();

Usar react-native-alert-async

Acabo de publicar un paquete que hace exactamente esto y permite esperar la elección del usuario. Es compatible con Expo.

 import AlertAsync from "react-native-alert-async";


 const myAction = async () => 

   const choice = await AlertAsync(
     'Title',
     'Message',
     [
       text: 'Yes', onPress: () => 'yes',
       text: 'No', onPress: () => Promise.resolve('no'),
     ],
     
       cancelable: true,
       onDismiss: () => 'no',
     ,
   );


   if (choice === 'yes') 
     doSomething();
   
   else 
     doSomethingElse();
   

 

---

Respuesta original: Hice un PR a ReactNative para esta característica: https://github.com/facebook/react-native/pull/20312

Aquí hay una solución simple.

El truco que se usa aquí es hacer una función que llame al botón onPress función, luego resuelva la promesa con el índice del botón. Tenga en cuenta que esto requiere que la alerta no se pueda cancelar.

showAsyncAlert = (title, message, buttons, options) => 
  return new Promise((resolve, reject) => 
    // We can't detect a cancellation, so make sure the Alert is not cancellable.
    options.cancellable = false
    buttons.forEach((button, index) => 
      let onPress = button.onPress
      button.onPress = option => 
        if (onPress) 
          onPress(option)
        
        resolve(index)
      
    )
    Alert.alert(title, message, buttons, options)
  )

Uso:

let option = await showAsyncAlert(title, message, buttons options)

if (option === 0) 
    foo()
 else 
    bar()

Comentarios y valoraciones del tutorial

Recuerda que puedes compartir este ensayo si si solucionó tu problema.

---

---

Utiliza Nuestro Buscador