iOS: UI will be blocked when show Alert while closing Modal

[nihgwu]

When show Alert while closing Modal, the Alert dialog will disappear and the Modal will block the UI entirely even after reload, only on iOS.

'use strict';

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  Text,
  Modal,
  Alert,
} from 'react-native';

class demo extends Component {
  state = {
    showModal: false,
  }

  onShowModal = () => {
    this.setState({ showModal: true });
  }
  onCloseModal1 = () => {
    this.setState({ showModal: false }, () => {
      Alert.alert('Alert', 'UI will be blocked by the modal');
    });
  }
  onCloseModal2 = () => {
    this.setState({ showModal: false }, () => {
      setTimeout(() => {
        Alert.alert('Alert', 'Alert won\'t show');
      }, 200);
    });
  }
  onCloseModal3 = () => {
    this.setState({ showModal: false }, () => {
      setTimeout(() => {
        Alert.alert('Alert', 'Works fine');
      }, 510);
    });
  }
  render() {
    const { showModal } = this.state;
    return (
      <View style={styles.container}>
        <Text onPress={this.onShowModal}>Show modal</Text>
        <Modal animationType='slide' visible={showModal} onRequestClose={this.onCloseModal3} >
          <View style={styles.container}>
            <Text onPress={this.onCloseModal1}>Close modal immediately</Text>
            <Text onPress={this.onCloseModal2}>Close modal after 200ms</Text>
            <Text onPress={this.onCloseModal3}>Close modal after more then 500ms</Text>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
});


export default demo;

[leeight]

+1

[alma-socar]

InteractionManager.runAfterInteractions also doesn't work in this case.

This is really frustrating.

[ganmor]

The opposite is also true, showing an alert in the same loop just before showing a modal will prevent the modal from being displayed

[nihgwu]

Yes, I guess they are the some issue, so I just make it simple to demonstrate

? 2016?10?20??20:07?Morgan Laupies <notifications@github.hscsec.cnmailto:notifications@github.com> ???

The opposite is also true, showing an alert in the same loop just before showing a modal will prevent the modal from being displayed

You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com//issues/10471#issuecomment-255087481, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ACeY8qW8mq4UpMUPScI2sI6Uhu6dFTOlks5q11mNgaJpZM4Kbxlp.

[K-Leon]

I noticed same issue with experimental navigator. An Error while transitioning kills the animation and freezes UI.

[ericvicenti]

Looks like we need <Modal> animations to tie into InteractionManager. A PR would be appreciated for this!

Any issues with NavigationExperimental should be filed separately.

[nihgwu]

@ericvicenti I didn't use NE or Navigator in demo at all, and I don't think this issue is related to InteractionManager, my guess is that Modal and Alert are using the same controller or view, so there will be a conflict when trying to control them simultaneously, I know nothing about iOS or I would be glad to make a PR, because it's really annoying but has a quite common use case

In my demo, I've show the different results when waiting for a certain milliseconds. I guess the Modal need 500ms to dismiss, so it's safe to show the Alert after 500ms. Perhaps you are right to tie Modal animations into InteractionManager, but what if I show the Alert first as @ganmor mentioned above, I can't close the Alert manually, or if I could, would there be the same occasion that we need to wait for the InteractionManager before showing the Modal?

Would someone expert in iOS take a look at this issue?

[nihgwu]

ping @grabbou

[DevBkIL]

do someone have a fix for it?

[jasonmerino]

@DevBkIL my not great solution is to set a timeout, enough for the presented view controller to be the one under the Modal, and then present the Alert. Like I said, not great, but it's working until this can be properly resolved.

[nihgwu]

UPDATE: UI will be blocked when show Share/ActionSheet while closing Modal too
And if we are showing the Alert/Share/ActionSheet, then show a Modal, the UI will be froze too
ping @javache @mkonicek

[joegoodall1]

Any update/resolution to this? We're still having problems with this a month after this issue was first reported.

[mjamiesoncs]

+1

[sibelius]

I can confirm this using https://github.com/jaysoo/react-native-prompt

any workaround?

[baurine]

today I met the similar problem after I upgraded the react-native from 0.33 to 0.37. I want to show an Alert dialog after close the Modal, but Modal doesn't disappear, even after I close the Alert dialog and use cmd + R to reload the app. only in iOS, and it works fine by react-native 0.33.

the code likes following:

  renderModal() {
    return (
      <Modal
        animationType = 'fade'
        transparent={true}
        visible={this.state.isProcessing}
        onRequestClose={()=>{}}>
        <View style={styles.modalContainer}>
          <LoadingSpiner size='large' color='white' styleAttr='Normal'/>
        </View>
      </Modal>
    )
  }

  _pressNext() {
    // display a Modal with a spinner
    this.setState({isProcessing: true}}

    // network request
    // ...
  }

  componentWillReceiveProps(nextProps) {
      // ...

      // to hide the Modal with a spinner
      this.setState({isProcessing: false})
      Alert.alert('title', 'Something has done!', [
        { text: 'Got it', onPress: () => {} }
      ])
    }
  }

then I try to use setTimeout to work around it, the code likes following:

  componentWillReceiveProps(nextProps) {
      // ...

      // to hide the Modal with a spinner
      this.setState({isProcessing: false})
      setTimeout( () => {
        // this log will output
        console.log("show alert")
        // but Alert doesn't display
        // sometimes it will display occasionally
        Alert.alert("title", "msg")   
      }, 200)
  }

then the Modal will disappear, but, the Alert dialog can't display!!!

I also tried run setTimeout in setState callback, like this:

  this.setState({isProcessing: false}, () => {
    setTimeout( () => {
      Alert.alert("title", "msg")
    }, 200)
  }

but the same result, Alert dialog doesn't pop up yet.

finally, I decide to hide Modal after I close the Alert dialog, and that works! code likes following:

Alert.alert("title", "msg", [
  { text: "OK", onPress: () => { this.setState({ isProcessing: false } }    
])

[vicmpen]

@baurine
Had the same problem with RN 35, a little higher timeout worked for me (600), but ultimately i also did what you did, hide the modal on OK Pressed in Alert

return Alert.alert('Σφάλμα','Η υπηρεσία δεν είναι διαθέσιμη αυτή τη στιγμή. Παρακαλούμε δοκιμάστε σε λίγο.', [ {text: 'OK', onPress: () =>this.setState ({spinnerIsVisible:false})} ])

[b8ne]

We are having a similar issue in niftylettuce/react-native-loading-spinner-overlay. Could it be that this is a more general issue relating to UI updating on state change rather than just a modal issue?

[ericvicenti]

cc @javache

[AlimovSV]

+1

[mattotodd]

+1

[susan-github]

+1, anyone has found solutions?

[deepas96]

Still having this issue. I am showing a loader on screen which is a Modal and then I need to show popup after API response. It works on Android to hide loader on Ok button action of Alert popup, but not working on iOS. Loader gets stuck on screen and popup never appears.
Getting this error on Xcode :
Warning: Attempt to present <RCTModalHostViewController: 0x7fda01a0d970> on <UIViewController: 0x7fd9fe447fd0> which is already presenting <RCTModalHostViewController: 0x7fda01a0d2d0>
Need to kill the app and restart it. Can anyone have solution?

[deepas96]

oh, sorry for my misunderstanding... Unfortunately I wasn't able to test on master branch because ios build failed for me:(
For now I fixed the issue with work-around by hiding modal on Alert OK press. Anyway thanks a lot!

It worked on android but not on iOS. Please suggest some solution.

[zhongwuzw]

Hi guys, I think we may fixed it on latest master branch, if you guys tried it which not worked, please file a new issue.

[TechSatya]

Using of "AlertIOS" component for iOS helped me to avoid this issue.

The workaround is as below;

AlertIOS.alert(
  'Alert Title', 'Alert message',
    [
      {
        text: 'OK', onPress: () => this.setState({ loading: false})
      }
    ]
);

[cristianoccazinsp]

@TechSatya are you confident about this? One would guess that Alert uses AlertIOS behind the scenes.

[TechSatya]

Yes, @cristianoccazinsp I think this is the only possible solution as of now because the other availed solution didn't help me in any way. As from the last 2 days I was stuck in this issue, I started giving a try to the "AlertIOS" component and fortunately found it successful.

Yes, Alerts uses AlertIOS behind it, but don't know how it got successful? Maybe something lacks in implementing of AlertIOS in Alert behind the scenes.

To be more specific to the code for both platforms;

(Platform.OS === 'android' ? Alert : AlertIOS).alert(
  'Alert Title', 'Alert message',
    [
      {
        text: 'OK', onPress: () => this.setState({ loading: false})
      }
    ]
);

[fengyouchao]

Using setTimeout is NOT a safe way to avoid this problem. I recommend using onDismiss props in iOS to do something after the modal closed (including Alert some messages). I created a class named ModalView to replace RN Modal class.

class ModalView extends React.Component {

    state = {
        visible: false
    };

    close({then} = {}) {
        if (Platform.OS === 'ios') {
            this.setState({visible: false, onDismiss: then});
        } else {
            this.setState({visible: false});
            if (then !== undefined) {
                then();
            }
        }
    }

    show() {
        this.setState({visible: true});
    }

    render() {
        return (
            <Modal
                visible={this.state.visible}
                onDismiss={this.state.onDismiss}
                {...this.props}>
                {this.props.children}
            </Modal>
        )
    }
}

Using

Just replace your Modal with ModalView and add ref props.

<ModalView ref={ref=>this.modalView=ref} 
   //other Modal props
>
//your components
<ModalView>

Show Modal

this.modalView.show();

Close Modal

this.modalView.close();

Alert some messages after the modal closed.

this.modalView.close({
      then: () => {
          Alert.alert('Hello World');
          //your code
      }
});

[hinodi]

I have same issue here when i use "react-native": "0.59.9" and "react-native-modal": "^11.3.1"

And my solution is show the alert in Modal onDismiss props

[giautm]

Agree with @fengyouchao, your solution was working well. Thank you.

[hoanglm4]

I think facebook engineering need fix this bug.

[adimshev]

You can use my solution (prevent opening Modal when Alert is opened, and open it after Alert was closed, using redux and hooks).

My solution is not full, later I will send solution that prevents opening many Modals at same time and prevents opening Alert while Modal is closing (based on queue and store subscribe).

In any case, you can refine my idea.

Modal + Alert.zip

[teledemic]

FWIW a modification to @fengyouchao's workaround if you are using async/await is

async Close() {
	return new Promise((resolve, _reject) => {
		this.setState({ visible: false, onDismiss: resolve });
	});
}

Then you can just await this.modalView.Close();

[jbenzshawel]

Still an issue with RN 0.61.2 - does anyone if this is fixed in any later 0.61 patch releases?

[yogesh1490]

When show Alert while closing Modal, the Alert dialog will disappear and the Modal will block the UI entirely even after reload, only on iOS.

'use strict';

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  Text,
  Modal,
  Alert,
} from 'react-native';

class demo extends Component {
  state = {
    showModal: false,
  }

  onShowModal = () => {
    this.setState({ showModal: true });
  }
  onCloseModal1 = () => {
    this.setState({ showModal: false }, () => {
      Alert.alert('Alert', 'UI will be blocked by the modal');
    });
  }
  onCloseModal2 = () => {
    this.setState({ showModal: false }, () => {
      setTimeout(() => {
        Alert.alert('Alert', 'Alert won\'t show');
      }, 200);
    });
  }
  onCloseModal3 = () => {
    this.setState({ showModal: false }, () => {
      setTimeout(() => {
        Alert.alert('Alert', 'Works fine');
      }, 510);
    });
  }
  render() {
    const { showModal } = this.state;
    return (
      <View style={styles.container}>
        <Text onPress={this.onShowModal}>Show modal</Text>
        <Modal animationType='slide' visible={showModal} onRequestClose={this.onCloseModal3} >
          <View style={styles.container}>
            <Text onPress={this.onCloseModal1}>Close modal immediately</Text>
            <Text onPress={this.onCloseModal2}>Close modal after 200ms</Text>
            <Text onPress={this.onCloseModal3}>Close modal after more then 500ms</Text>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
});


export default demo;

I have same issue.
Has anyone done this using hooks as useState in functional component ?

[revich2]

@yogesh1490

I have a similar problem, but the alert may appear at an undetermined point in time and is not logically dependent on Modal component.

My workaround looks like this:

  const OldAlert = Alert.alert;

  Alert.alert = (...args) => {
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        OldAlert(...args);
      });
    });
  };

This is “magic,” but it works for me.

[cristianoccazinsp]

@revich2 interesting... Why do you need 2 requestAnimationFrame ? Would it be the same with runAfterInteractions ?

@react-native-bot can we re open this?

[revich2]

@cristianoccazinsp The first thing I used was InteractionManager.runAfterInteractions, but for some reason, this did not work for me, so I had to make 2 requestAnimationFrame to defer the call to Alert.alert to the next iteration in the event loop.

[phamlap228]

in my case im change others Modal and resolved :D

[thanhluantl2304]

I still face that problem when close one modal and open other modal immediately. My current solution is using setTimeout but that's inconvenient. Have Facebook staff fixed it yet? Or someone has another solution?

[mangBert]

Same here. any update on this?

[scarlac]

Cause:
Rendering a modal is a polite request. It does not guarantee it will show. The root cause is that the native iOS implementation assumes it's a guarantee.
This is a native bug that needs to be fixed in the Modal component on iOS. The root cause is that modals are imperative in iOS and you may request to open one, but it may not succeed. iOS implementation does not consider that the modal potentially never opens, so it still triggers the underlying lock-up mechanism. This leaves the app half locked up with no modal.

Related bugs:
This bug will also happen if you try to use pageSheet presentation style and user swipes down on the sheet. This user action causes the modal to disappear, yet React Native thinks it's still visible, leaving your app in a locked state. Same cause.

Workaround:
If you are okay with the modal not showing but want to fix the lock up, wrap your <Modal> in a View with 0 height, like this:

function BrokenModal() {
  alert('this alert will show, modal wont');
  return (
    <View style={{height: 0}}>
      <Modal animated>
        <Text>This text will never appear</Text>
      </Modal>
    </View>
  );
}