CODEWITHSUNDEEP
react-nativealert
vaibhav chaturvedy
vaibhav chaturvedy

Reputation: 126

React Native : Modal does not hide when Alert appears on top of it

I noticed a strange behavior that if Modal would present itself and then on top of it, if an Alert appears, the Alert disappears very soon without user clicking anything on it and the Modal, even if removed programmatically, doesn't remove from the screen. I consider is a bug. Is there a workaround?

Upvotes: 11

Views: 11352

Answers (3)

Ville Miekk-oja
Ville Miekk-oja

Reputation: 20955

What worked for me was applying the callback in setState:

this.setState({
  modalShouldBeOpen: false,
},
() => {
  this.props.navigation.replace('NextPageToNavigateTo');
},
);

I think the problem was that without the callback, the navigation happened too soon, and the modal got stuck in weird state.

Upvotes: 1

Spark.Bao
Spark.Bao

Reputation: 5743

yes, I do think so it should be a react-native's bug, My code works fine by react-native 0.33, after upgrade to 0.37, then met the same problem.

following content is my comment in react-native GitHub issue: https://github.com/facebook/react-native/issues/10471#issuecomment-262450975 , hope that can help you:

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

Upvotes: 8

Slowyn
Slowyn

Reputation: 8843

It seems to be a trouble in React Native. I've met this issue too. The easiest way to fix it is to call alert with timeout after modal is hidden: ... setTimeout(() => Alert.alert(msg), 10); ...

Upvotes: 11

Related Questions