'Alert.alert not working in React native iOS, but perfectly fine in Android

Please check the code ,

import { 
  Alert,
} from 'react-native';

 checkForSendingOtp = () => {
    let hash = 'aBcDeGgd';
    Platform.OS === 'android'
     ? RNOtpVerify.getHash()
        .then(text => {
          hash = text + ''.replace('[', '');
          hash = hash + ''.replace(']', '');
        })
        .then(() => {
          this.sendDataForOtp(hash);
        })
        .catch(console.log)
    : this.sendDataForOtp(hash);
  };

sendDataForOtp(hash) {

axios.post(url,{hash:hash}).then(response=>{
  Alert.alert(
    'Login Failed',
    'Multiple Logins Are Found. \n Logout From All Other Devices to Continue.',
    [
      {
        text: 'Proceed ?',
        onPress: () => {}                       
      },
      {
        text: 'No',
        onPress: () => {},
      },
    ],
    {cancelable: false},
   );
  });
}


render() {
   return (
    <Ripple
        style={{
           position: 'absolute',
           top: 0,
           bottom: 0,
           left: 0,
           right: 0,
              }}
        onPress={this.checkForSendingOtp}
    />
)}

This snippet will work fine in android but not showing in iOS. why ?

Nb :- this is the most of the code that I can share right now , Edited the code please check it now and let me know if you have any questions.

Solution 1:^[1]

I don't exactly know what happened, There were also a model component which I used for showing custom loading, after removing the model component the alerts starts working.

Solution 2:^[2]

Replace alert code with below

Alert.alert(
        'Login Failed',
        'Multiple Logins Are Found. \n Logout From All Other Devices to Continue.',
        [
          {
            text: 'Proceed ?',
            onPress: () => {}
          },
          {
            text: 'No',
            onPress: () => {},
            style: 'cancel'
          }
        ],
        { cancelable: false }
      );

Solution 3:^[3]

It's probably related to this issue: https://github.com/facebook/react-native/issues/10471

For some weird reasons, having the Alert called in a "setTimeout" function make it work. But it’s clearly NOT a safe way to avoid this problem. You can also try this solution: https://github.com/facebook/react-native/issues/10471#issuecomment-513641325

 setTimeout(() => {
    Alert.alert(
      "title",
      "content",
      [
        {
          text: "ok",
          onPress: () => {

          },
        },
      ],
    )
  }, 10)

Solution 4:^[4]

    setTimeout(() => {      
        //TODO  use return and setTimeout           
        return Alert.alert(
        i18n.t('notAtYard.alertTitle'),
        'Invalid username or password',
        [
            {
                text: 'Ok',
                onPress: () => {
                    setUserPassword('');
                    setUsername('');
                },
            }
        ],
        {cancelable: false},
    );

    }, 100);

Solution 5:^[5]

So in my case, I was not using any custom Modal because for custom Modal the solution is simple to wait until the Modal is closed but, I was using the react-native Spinner component, and I was hiding it properly using the visible={loading} prop and yes, the issue was also not resolved after setting cancelable: false in the Alert.alert config and when I increased the timeout to 5000 it worked even without defining cancelable: false in the Alert.alert config but this a lot of timeout was not good for UX so I quickly checked out the Spinner component props and I came to know that it does have cancelable?: boolean | undefined prop so now when I used Spinner component like below it worked even without timeout.

<Spinner
    visible={loading}
    cancelable={true}
/>

TLDR: use cancelable={true} prop with Spinner component.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ajith Madhu
Solution 2	Brijesh Shiroya
Solution 3	Romuald
Solution 4	Keshav Gera
Solution 5	Ali Hussnain

'Alert.alert not working in React native iOS, but perfectly fine in Android

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]