React-Native How to show alert after an async function is complete?

Question

I have the following code which is not working to show an alert after my async function ends.

{
  new BaseService().request(
    serviceURL,
    "POST",
    headerParams,
    bodyParams,
    serverResponse => {
      this.setState({ isLoading: true });

      AuthenticationService.completeAuthentication(
        serverResponse,
        clientResponse => {
          this.setState({ isLoading: false }); // THIS WORKS AND HIDES LOADER
          alert("Authenticated Successfully!"); //THIS DOESN'T SHOW UP AN ALERT
        },
        error => {
          alert(error);
        }
      );
    }
  )
}

Any leads?

Maybe the BaseService request is failing? You don't seem to have an error handler function for that case, only when the AuthenticationService request fails. — Tholle, Mar 20 '19 at 12:20
No, the request gets successful. Because the loader gets hidden after that. — Krupal Ghorpade, Mar 20 '19 at 12:25
Alright. Have you tried using [`Alert.alert`](https://facebook.github.io/react-native/docs/alert) instead? — Tholle, Mar 20 '19 at 12:27
Then maybe you can share codesandbox version of this. Otherwise, you can look at browser compatibility issues. — Sania Khushbakht Jamil, Mar 20 '19 at 12:27
Yes, I tried ```Alert.alert``` as well. I'm running this on Android. can there be anything because of background thread somewhere? — Krupal Ghorpade, Mar 20 '19 at 12:29
I also facing same issue, Tried showing alert and toast but no luck and response block as in question. — Anuj Raghuvanshi, Oct 03 '20 at 20:49

score 0 · Answer 1 · answered Mar 20 '19 at 12:32

0

Remember that not all browser functionalities will work in React Native, and that's the case for the alert API that you are using.

If you want a similar functionality, you should try with React Native's Alert component instead

answered Mar 20 '19 at 12:32

sebbab

847
8
13

Yes, everything you said, is already tried. btw, I'm running it on Android-Pixel 9.0 – Krupal Ghorpade Mar 20 '19 at 12:34

score 0 · Answer 2 · edited Jun 26 '19 at 06:21

0

Move the alert into the callback of setState

like bellow

clientResponse => {
  this.setState({ isLoading: false }, 
                () => alert("Authenticated Successfully!"));
},

edited Jun 26 '19 at 06:21

adiga

34,372
9
61
83

answered Mar 20 '19 at 12:49

AFLAH ALI

451
5
17

Ok, just one more suggestion. Use an Alert.aler with an OK Bytton and move the setstate statement to onClick of the OK Button.. – AFLAH ALI Mar 20 '19 at 14:27

React-Native How to show alert after an async function is complete?

2 Answers2