CODEWITHSUNDEEP
javascriptreact-nativereact-native-popup-dialog
Reez0
Reez0

Reputation: 2689

Dialog not closing react native

I am using the React native popup dialog package. I'm trying to close the dialog onPress and then navigate away from the screen. The navigation is happening, but the dialog remains open. And a warning Can't perform a react state update on an unmounted component is shown.

    <Dialog
    dialogStyle = {{textAlign:'center'}}
    visible={this.state.dialogVisible}
    height = {150}
    dialogAnimation={new SlideAnimation({
    slideFrom: 'bottom',
    })}
    >
      <DialogTitle
      title = {"Information"}
      textStyle = {{textAlign:'center',fontFamily:'raleway-regular',color:'#4abce3'}}
      />
      <DialogContent style = {{justifyContent:'center',alignContent:'center'}}>
        <Text>{this.state.requestResult}</Text>
        <Button
          title = "Okay!"
          onPress = {()=>{ this.navigate() }}
          type = "outline"
          buttonStyle = {styles.dialogButton}
          titleStyle = {styles.choiceButtonTitle}
        />
      </DialogContent>
  </Dialog>

The navigate()function

    navigate = () => {
      const { navigation } = this.props;
      this.setState({dialogVisible:false})
      navigation.navigate('Home'); 
}

Upvotes: 1

Views: 643

Answers (1)

ravibagul91
ravibagul91

Reputation: 20755

setState is async, which does not block the execution. When setState gets called next line executes (setState is yet to complete) and you got navigated to Home.

You can you callback in setState for navigation.

navigate = () => {
      const { navigation } = this.props;
      this.setState({dialogVisible:false}, () => navigation.navigate('Home')) 
}

Upvotes: 1

Related Questions