CODEWITHSUNDEEP
javascriptreactjsreact-native
Arvindh
Arvindh

Reputation: 620

How to stop untill setstate exectues in react native?

I am creating an logout functionality. By which when user clicks on logout button, they will be prompted a dialog asking "Are you sure that you want to logout ? ". For Dialog , i have used a package named react-native-popup-dialog.

Actually, whats happening is as this app is clubbed with redux. I used action for logout functionality. And for dialog , i have used component level state.

My Dialog Code: 

<Dialog
              visible={this.state.showDialog}
              dialogTitle={
              <DialogTitle 
              title="Confirm Logging Out"
              textStyle={{ fontSize: 15 }} 
              />}
              width={0.8}
              footer={
                  <DialogFooter>
                    <DialogButton
                      text="CANCEL"
                      textStyle={{ fontSize: 14 }}
                      onPress={() => {
                        this.setState({ showDialog: false });
                      }}
                    />
                    <DialogButton
                      text="CONFIRM"
                      textStyle={{ fontSize: 14 }}
                      onPress={() => {
                          this.onLogoutPress();
                      }}
                    />
                  </DialogFooter>
                }
              onTouchOutside={() => {
              this.setState({ showDialog: false });
              }}
          >
              <DialogContent>
                  <Text style={{ fontSize: 14, top: 10 }}>Are you sure you want to logout ?</Text>
              </DialogContent>
          </Dialog>

And my Logout Button Code:

         <TouchableOpacity
                        onPress={() => this.setState({ showDialog: true})}
                        >
                        <CardItem>
                            <Icon name="log-out"
                            style={{ color: '#03A9F4' }}
                            />
                            <Body>
                                <Text>
                                    Logout
                                </Text>
                            </Body>
                            <Right>
                                <Icon name="arrow-forward" />
                            </Right>
                        </CardItem>
                  </TouchableOpacity>

So my onLogoutPress() code:

onLogoutPress() {
    this.setState({ showDialog: false });

    this.props.logOut(() => {
        this.props.navigation.dispatch(resetActionToWelcome);
    })
}

The issue , i am facing is that. When i click on confirm button the "onLogoutPress()" shoots up, and the dialog is not closing instead of that the resetAction of react navigation shoots up. As setstate is async function i think it took time to get back, within that the logout action is shoots up and app gets start from splash screen. But till the dialog is kept open.

How to deal with this ?

Upvotes: 0

Views: 100

Answers (2)

Mohit Mutha
Mohit Mutha

Reputation: 3001

setState has a callback which you can use to perform action after the state change is complete 

setState({myvar: "updateval"}, () => {
  //Do something after the state is changed
})

Upvotes: 1

Ravi
Ravi

Reputation: 35579

You can use 2nd argument of setState

onLogoutPress() {
    this.setState({ showDialog: false },() => {
        this.props.logOut(() => {
            this.props.navigation.dispatch(resetActionToWelcome);
        })
    })
}

Upvotes: 1

Related Questions