How to await for the response of Alert dialog in React Native?












4














From my observation, the Alert dialog seems built on top of the React Native app.
So it pops out everytime you call it, and doesn't to be in the render function.

The catch is it is not an async task so the code after Alert will continue to execute regardless the callback function.



The code below demonstrates a situation where the Alert dialog keeps popping out because it reads the same barcode over and over again.

(It is written in TypeScript. Just take my word, this is a valid snippet.)



 import * as React from "react";
import Camera from "react-native-camera";
import { Alert } from "react-native";

export default class BarcodeScanSreen extends React.Component<any ,any> {
private _camera;
private _onBarCodeRead = e => {
if (e.type === "QR_CODE") {
Alert.alert(
"QRCode detected",
"Do you like to run the QRCode?",
[
{ text: "No", onPress: this._onNoPress },
{ text: "Yes", onPress: this._onYesPress }
],
{ cancelable: false }
);
}
};

private _onYesPress = () => { /* process the QRCode */ }

private _onNoPress = () => { /* close the alert dialog. */ }

render() {
return (
<Camera
onBarCodeRead={this._onBarCodeRead}
aspect={Camera.constants.Aspect.fill}
ref={ref => (this._camera = ref)}
>
{/* Some another somponents which on top of the camera preview... */}
</Camera>
);
}
}


Is there a way to pause the JS code and await the response from Alert?










share|improve this question
























  • The simplest way would be to store a flag if the Alert is showing, and reset it to false when it is dismissed.
    – yedidyak
    Feb 15 '18 at 14:54










  • I had similar idea in mind. But onBarCodeRead function still runs constantly in background to check the flag. I wonder if there is better way to handle this.
    – FisNaN
    Feb 15 '18 at 15:01










  • Hey, I just edited my answer because I published github.com/slorber/react-native-alert-async
    – Sebastien Lorber
    Nov 19 '18 at 18:47
















4














From my observation, the Alert dialog seems built on top of the React Native app.
So it pops out everytime you call it, and doesn't to be in the render function.

The catch is it is not an async task so the code after Alert will continue to execute regardless the callback function.



The code below demonstrates a situation where the Alert dialog keeps popping out because it reads the same barcode over and over again.

(It is written in TypeScript. Just take my word, this is a valid snippet.)



 import * as React from "react";
import Camera from "react-native-camera";
import { Alert } from "react-native";

export default class BarcodeScanSreen extends React.Component<any ,any> {
private _camera;
private _onBarCodeRead = e => {
if (e.type === "QR_CODE") {
Alert.alert(
"QRCode detected",
"Do you like to run the QRCode?",
[
{ text: "No", onPress: this._onNoPress },
{ text: "Yes", onPress: this._onYesPress }
],
{ cancelable: false }
);
}
};

private _onYesPress = () => { /* process the QRCode */ }

private _onNoPress = () => { /* close the alert dialog. */ }

render() {
return (
<Camera
onBarCodeRead={this._onBarCodeRead}
aspect={Camera.constants.Aspect.fill}
ref={ref => (this._camera = ref)}
>
{/* Some another somponents which on top of the camera preview... */}
</Camera>
);
}
}


Is there a way to pause the JS code and await the response from Alert?










share|improve this question
























  • The simplest way would be to store a flag if the Alert is showing, and reset it to false when it is dismissed.
    – yedidyak
    Feb 15 '18 at 14:54










  • I had similar idea in mind. But onBarCodeRead function still runs constantly in background to check the flag. I wonder if there is better way to handle this.
    – FisNaN
    Feb 15 '18 at 15:01










  • Hey, I just edited my answer because I published github.com/slorber/react-native-alert-async
    – Sebastien Lorber
    Nov 19 '18 at 18:47














4












4








4


1





From my observation, the Alert dialog seems built on top of the React Native app.
So it pops out everytime you call it, and doesn't to be in the render function.

The catch is it is not an async task so the code after Alert will continue to execute regardless the callback function.



The code below demonstrates a situation where the Alert dialog keeps popping out because it reads the same barcode over and over again.

(It is written in TypeScript. Just take my word, this is a valid snippet.)



 import * as React from "react";
import Camera from "react-native-camera";
import { Alert } from "react-native";

export default class BarcodeScanSreen extends React.Component<any ,any> {
private _camera;
private _onBarCodeRead = e => {
if (e.type === "QR_CODE") {
Alert.alert(
"QRCode detected",
"Do you like to run the QRCode?",
[
{ text: "No", onPress: this._onNoPress },
{ text: "Yes", onPress: this._onYesPress }
],
{ cancelable: false }
);
}
};

private _onYesPress = () => { /* process the QRCode */ }

private _onNoPress = () => { /* close the alert dialog. */ }

render() {
return (
<Camera
onBarCodeRead={this._onBarCodeRead}
aspect={Camera.constants.Aspect.fill}
ref={ref => (this._camera = ref)}
>
{/* Some another somponents which on top of the camera preview... */}
</Camera>
);
}
}


Is there a way to pause the JS code and await the response from Alert?










share|improve this question















From my observation, the Alert dialog seems built on top of the React Native app.
So it pops out everytime you call it, and doesn't to be in the render function.

The catch is it is not an async task so the code after Alert will continue to execute regardless the callback function.



The code below demonstrates a situation where the Alert dialog keeps popping out because it reads the same barcode over and over again.

(It is written in TypeScript. Just take my word, this is a valid snippet.)



 import * as React from "react";
import Camera from "react-native-camera";
import { Alert } from "react-native";

export default class BarcodeScanSreen extends React.Component<any ,any> {
private _camera;
private _onBarCodeRead = e => {
if (e.type === "QR_CODE") {
Alert.alert(
"QRCode detected",
"Do you like to run the QRCode?",
[
{ text: "No", onPress: this._onNoPress },
{ text: "Yes", onPress: this._onYesPress }
],
{ cancelable: false }
);
}
};

private _onYesPress = () => { /* process the QRCode */ }

private _onNoPress = () => { /* close the alert dialog. */ }

render() {
return (
<Camera
onBarCodeRead={this._onBarCodeRead}
aspect={Camera.constants.Aspect.fill}
ref={ref => (this._camera = ref)}
>
{/* Some another somponents which on top of the camera preview... */}
</Camera>
);
}
}


Is there a way to pause the JS code and await the response from Alert?







react-native






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Sep 11 '18 at 22:42









Mojtaba Moshfeghi far

4681314




4681314










asked Feb 15 '18 at 14:37









FisNaNFisNaN

1,0991022




1,0991022












  • The simplest way would be to store a flag if the Alert is showing, and reset it to false when it is dismissed.
    – yedidyak
    Feb 15 '18 at 14:54










  • I had similar idea in mind. But onBarCodeRead function still runs constantly in background to check the flag. I wonder if there is better way to handle this.
    – FisNaN
    Feb 15 '18 at 15:01










  • Hey, I just edited my answer because I published github.com/slorber/react-native-alert-async
    – Sebastien Lorber
    Nov 19 '18 at 18:47


















  • The simplest way would be to store a flag if the Alert is showing, and reset it to false when it is dismissed.
    – yedidyak
    Feb 15 '18 at 14:54










  • I had similar idea in mind. But onBarCodeRead function still runs constantly in background to check the flag. I wonder if there is better way to handle this.
    – FisNaN
    Feb 15 '18 at 15:01










  • Hey, I just edited my answer because I published github.com/slorber/react-native-alert-async
    – Sebastien Lorber
    Nov 19 '18 at 18:47
















The simplest way would be to store a flag if the Alert is showing, and reset it to false when it is dismissed.
– yedidyak
Feb 15 '18 at 14:54




The simplest way would be to store a flag if the Alert is showing, and reset it to false when it is dismissed.
– yedidyak
Feb 15 '18 at 14:54












I had similar idea in mind. But onBarCodeRead function still runs constantly in background to check the flag. I wonder if there is better way to handle this.
– FisNaN
Feb 15 '18 at 15:01




I had similar idea in mind. But onBarCodeRead function still runs constantly in background to check the flag. I wonder if there is better way to handle this.
– FisNaN
Feb 15 '18 at 15:01












Hey, I just edited my answer because I published github.com/slorber/react-native-alert-async
– Sebastien Lorber
Nov 19 '18 at 18:47




Hey, I just edited my answer because I published github.com/slorber/react-native-alert-async
– Sebastien Lorber
Nov 19 '18 at 18:47












3 Answers
3






active

oldest

votes


















1














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 native and it will trigger the onBarCodeRead listener, regardless if the Alert is present or not.



You could try to stop the camera at the beginning on _onBarCodeRead with the stopPreview() method mentioned in the docs.



Also note that react-native-camera is currently in a migration process from Camera (RCTCamera) to RNCamera and in the new RNCamera I don't see a stopPreview() method. Anyhow, a simple flag would also do the job.






share|improve this answer





















  • Yes, I had the same problem. stopPreview() is deprecated in RNCamera module. I noticed that, sometimes Alert interrupts with the _onObjectDetected in RNCamera, so the barcode scanning feature completely stops after dismissing the dialog.
    – FisNaN
    Feb 15 '18 at 23:57



















1














Use react-native-alert-async



I've just published a package that does exactly this and permit to await for the choice of the user. It is compatible with 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();
}

}




Original answer: I've made a PR to ReactNative for this feature: https://github.com/facebook/react-native/pull/20312






share|improve this answer























  • tripped into this problem again when I try to build a custom dropdown menu for react-naviagtion navbar. I will give it a try, thanks a lot
    – FisNaN
    Nov 13 '18 at 20:56



















0














React-native Alert doesn't stop the execution of code below it. By changing it to async function which resolves the promise on user action will work as ASYNC-Alert.






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

await AsyncAlert();








share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48809762%2fhow-to-await-for-the-response-of-alert-dialog-in-react-native%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    3 Answers
    3






    active

    oldest

    votes








    3 Answers
    3






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    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 native and it will trigger the onBarCodeRead listener, regardless if the Alert is present or not.



    You could try to stop the camera at the beginning on _onBarCodeRead with the stopPreview() method mentioned in the docs.



    Also note that react-native-camera is currently in a migration process from Camera (RCTCamera) to RNCamera and in the new RNCamera I don't see a stopPreview() method. Anyhow, a simple flag would also do the job.






    share|improve this answer





















    • Yes, I had the same problem. stopPreview() is deprecated in RNCamera module. I noticed that, sometimes Alert interrupts with the _onObjectDetected in RNCamera, so the barcode scanning feature completely stops after dismissing the dialog.
      – FisNaN
      Feb 15 '18 at 23:57
















    1














    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 native and it will trigger the onBarCodeRead listener, regardless if the Alert is present or not.



    You could try to stop the camera at the beginning on _onBarCodeRead with the stopPreview() method mentioned in the docs.



    Also note that react-native-camera is currently in a migration process from Camera (RCTCamera) to RNCamera and in the new RNCamera I don't see a stopPreview() method. Anyhow, a simple flag would also do the job.






    share|improve this answer





















    • Yes, I had the same problem. stopPreview() is deprecated in RNCamera module. I noticed that, sometimes Alert interrupts with the _onObjectDetected in RNCamera, so the barcode scanning feature completely stops after dismissing the dialog.
      – FisNaN
      Feb 15 '18 at 23:57














    1












    1








    1






    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 native and it will trigger the onBarCodeRead listener, regardless if the Alert is present or not.



    You could try to stop the camera at the beginning on _onBarCodeRead with the stopPreview() method mentioned in the docs.



    Also note that react-native-camera is currently in a migration process from Camera (RCTCamera) to RNCamera and in the new RNCamera I don't see a stopPreview() method. Anyhow, a simple flag would also do the job.






    share|improve this answer












    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 native and it will trigger the onBarCodeRead listener, regardless if the Alert is present or not.



    You could try to stop the camera at the beginning on _onBarCodeRead with the stopPreview() method mentioned in the docs.



    Also note that react-native-camera is currently in a migration process from Camera (RCTCamera) to RNCamera and in the new RNCamera I don't see a stopPreview() method. Anyhow, a simple flag would also do the job.







    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Feb 15 '18 at 15:47









    nicemanniceman

    88111




    88111












    • Yes, I had the same problem. stopPreview() is deprecated in RNCamera module. I noticed that, sometimes Alert interrupts with the _onObjectDetected in RNCamera, so the barcode scanning feature completely stops after dismissing the dialog.
      – FisNaN
      Feb 15 '18 at 23:57


















    • Yes, I had the same problem. stopPreview() is deprecated in RNCamera module. I noticed that, sometimes Alert interrupts with the _onObjectDetected in RNCamera, so the barcode scanning feature completely stops after dismissing the dialog.
      – FisNaN
      Feb 15 '18 at 23:57
















    Yes, I had the same problem. stopPreview() is deprecated in RNCamera module. I noticed that, sometimes Alert interrupts with the _onObjectDetected in RNCamera, so the barcode scanning feature completely stops after dismissing the dialog.
    – FisNaN
    Feb 15 '18 at 23:57




    Yes, I had the same problem. stopPreview() is deprecated in RNCamera module. I noticed that, sometimes Alert interrupts with the _onObjectDetected in RNCamera, so the barcode scanning feature completely stops after dismissing the dialog.
    – FisNaN
    Feb 15 '18 at 23:57













    1














    Use react-native-alert-async



    I've just published a package that does exactly this and permit to await for the choice of the user. It is compatible with 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();
    }

    }




    Original answer: I've made a PR to ReactNative for this feature: https://github.com/facebook/react-native/pull/20312






    share|improve this answer























    • tripped into this problem again when I try to build a custom dropdown menu for react-naviagtion navbar. I will give it a try, thanks a lot
      – FisNaN
      Nov 13 '18 at 20:56
















    1














    Use react-native-alert-async



    I've just published a package that does exactly this and permit to await for the choice of the user. It is compatible with 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();
    }

    }




    Original answer: I've made a PR to ReactNative for this feature: https://github.com/facebook/react-native/pull/20312






    share|improve this answer























    • tripped into this problem again when I try to build a custom dropdown menu for react-naviagtion navbar. I will give it a try, thanks a lot
      – FisNaN
      Nov 13 '18 at 20:56














    1












    1








    1






    Use react-native-alert-async



    I've just published a package that does exactly this and permit to await for the choice of the user. It is compatible with 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();
    }

    }




    Original answer: I've made a PR to ReactNative for this feature: https://github.com/facebook/react-native/pull/20312






    share|improve this answer














    Use react-native-alert-async



    I've just published a package that does exactly this and permit to await for the choice of the user. It is compatible with 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();
    }

    }




    Original answer: I've made a PR to ReactNative for this feature: https://github.com/facebook/react-native/pull/20312







    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 19 '18 at 18:47

























    answered Nov 13 '18 at 14:56









    Sebastien LorberSebastien Lorber

    51.9k37205333




    51.9k37205333












    • tripped into this problem again when I try to build a custom dropdown menu for react-naviagtion navbar. I will give it a try, thanks a lot
      – FisNaN
      Nov 13 '18 at 20:56


















    • tripped into this problem again when I try to build a custom dropdown menu for react-naviagtion navbar. I will give it a try, thanks a lot
      – FisNaN
      Nov 13 '18 at 20:56
















    tripped into this problem again when I try to build a custom dropdown menu for react-naviagtion navbar. I will give it a try, thanks a lot
    – FisNaN
    Nov 13 '18 at 20:56




    tripped into this problem again when I try to build a custom dropdown menu for react-naviagtion navbar. I will give it a try, thanks a lot
    – FisNaN
    Nov 13 '18 at 20:56











    0














    React-native Alert doesn't stop the execution of code below it. By changing it to async function which resolves the promise on user action will work as ASYNC-Alert.






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

    await AsyncAlert();








    share|improve this answer


























      0














      React-native Alert doesn't stop the execution of code below it. By changing it to async function which resolves the promise on user action will work as ASYNC-Alert.






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

      await AsyncAlert();








      share|improve this answer
























        0












        0








        0






        React-native Alert doesn't stop the execution of code below it. By changing it to async function which resolves the promise on user action will work as ASYNC-Alert.






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

        await AsyncAlert();








        share|improve this answer












        React-native Alert doesn't stop the execution of code below it. By changing it to async function which resolves the promise on user action will work as ASYNC-Alert.






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

        await AsyncAlert();








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

        await AsyncAlert();





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

        await AsyncAlert();






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Oct 25 '18 at 20:20









        nanda kishore reddynanda kishore reddy

        1696




        1696






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f48809762%2fhow-to-await-for-the-response-of-alert-dialog-in-react-native%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            The term 'EXEC' is not recognized as the name of a cmdlet Powershell

            NPM command prompt closes immediately [closed]

            Error binding properties and functions in emscripten