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

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;

[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 } }    
])

[leeight]

+1