Can React native Alert wait for user response?

react native alert with input
react native dismiss alert
alert alert react-native not working
custom alert react native
await alert response react native
alert cancel react native
react native change alert title
react native-sweet-alert

Can React native Alert wait for user's response (just like pausing the app) instead of just popup and proceed the following logic?

I think js alert will just pause the application.

Here's what you can do with Alert:

You can set cancelable with false, so the user can't close the alert without pressing a button

You can set a callback with each button.

Also you can wrap the Alert with Promise so you can use async

const AsyncAlert = () => {
    return new Promise((resolve, reject) => {
        Alert.alert(
            'Title',
            'Message',
            [
                {text: 'YES', onPress: () => resolve('YES') },
                {text: 'NO', onPress: () => resolve('NO') }
            ],
            { cancelable: false }
        )
    })
}    

// Then to use the method
const userResponse = await AsyncAlert()
// ...the rest of your code

Alert does not pause the code. In this case JS is not the only problem - the Camera component also keeps running in the background which is  How To Use Async Await in React: an example with Promises Before starting off make sure to have a React development environment. To make one you can follow this tutorial of mine: How to set up React, webpack, and babel or you can also use create-react-app .

I have taken the @Tareq El-Masri code and edited it. changing it to a async function will work.

const AsyncAlert = (title, msg) => new Promise((resolve) => {
  Alert.alert(
    title,
    msg,
    [
      {
        text: 'ok',
        onPress: () => {
          resolve('YES');
        },
      },
    ],
    { cancelable: false },
  );
});

await AsyncAlert();

Can React native Alert wait for user's response (just like pausing the app) instead of just popup and proceed the following logic? I think js alert will just pause the  Unlike the alert method the confirm method returns either true or false based on the user's response. The last native prompt dialog you can display is the input dialog. This is where you can ask a question or just state something where you need an actual response from the user.

While the other answers are pretty much correct, they still require the reader to manipulate the functions to use in their own code (eg. to change buttons, etc). Here is a nice exportable version that allows you to pass in a function to create any button setup you need:

import { Alert as NativeAlert } from 'react-native';

const defaultButtons = (resolve, reject) => [
  {
    text: 'OK',
    onPress: () => {
      resolve();
    },
  },
];

const AsyncAlert = (title, msg, getButtons = defaultButtons) =>
  new Promise((resolve, reject) => {
    NativeAlert.alert(title, msg, getButtons(resolve, reject), { cancelable: false });
  });

export default AsyncAlert;

Use like this:

await AsyncAlert('Some Title', 'Some message.')

If you want custom buttons, just pass a function in as the third argument (which gets resolve and reject, should you need either.

import AlertAsync from "react-native-alert-async"; const myAction = async () => { const choice = await AlertAsync( 'Title', 'Message', [ {text: 'Yes', onPress:  React Native Modal The container of my loader is going to be a full screen modal because I don’t want users to be able to perform any actions on the screen while my data is loading. So I can go

This is an API that works both on Android and iOS and can show static alerts. To show an alert that prompts the user to enter some information, see AlertIOS  In React Native, we currently have a limitation that there is only a single JS execution thread, but you can use InteractionManager to make sure long-running work is scheduled to start after any interactions/animations have completed. Applications can schedule tasks to run after interactions with the following: InteractionManager.runAfterInteractions(() => { // long-running synchronous task

Alert. A quick search with Google, and you can easily find react native's Alert API: Launches an alert dialog with the specified title and message. 14. The code after the alert()call won't be executed until the user clicks ok to the alert, so just put the code you need afterthe alert()call. If you want a nicer floating dialog than the default javascript confirm()popup, see jQuery UI: floating window. share|improve this answer|follow ||||.

This step is not required, but it's a good idea to make sure the input doesn't have anything from previous tests. We need to wait 1 second because the alert takes a few milliseconds to show By waiting we make sure the alert will be there. It will not wait until after the timeout fires in the stateChange () function. You cannot just pause javascript execution for a predetermined amount of time. Instead, any code that you want to run delays must be inside the setTimeout () callback function (or called from that function).

Comments
  • I set cancelable as false, but if I add a console log below the Alert, even if I haven't clicked on "YES" or "No", then console message still show up, which means the app is still running the following code instead of pausing on Alert dialog to wait for user response.
  • What do you mean by pausing?
  • Taking my above case as example, the console log message under Alert code should not be shown before user click "YES" or "No".
  • Alert isn't async, so you need to put your code inside those callbacks, after console.log('YES pressed') and the other one
  • Yep, I understand this part. I'm updating an existing code package which will make things easier if we can make Alert async and await for the user response. Do you have any idea if we can achieve this?