CODEWITHSUNDEEP
javascriptreactjsreact-native
Arvindh
Arvindh

Reputation: 620

How to stop till progress bar finishes in react native

I have created a splash screen with progress bar ( using react-native-progress for progress bar). My goal is check user availability in this splash screen and redirect the user accordingly. I am using redux, so created a action to check if there is login token available.

My Redux action for logincheck: 

export const loginCheck = (callback) => {

return async (dispatch) => {
    let token = await AsyncStorage.getItem(LOGIN_TOKEN);
    let userUid = await AsyncStorage.getItem(USER_UID);
    if(token && userUid) {
        dispatch({ type: VALID_LOGIN_AVAILABLE, payload: token });
        dispatch({ type: VALID_UID_AVAILABLE, payload: userUid });
        callback();
    }
    else {
        dispatch({ type: NO_VALID_LOGIN_AVAILABLE, payload: token });
    }
 }
};

So, I am storing token and uid from firebase to async when user login's. And used callback when user details available. So in the splash screen, when i receive a callback, i set state "isUserAvailable" as true else default false.

My goal is to, wait for progress bar to finish, and then redirect to Dashboard if isUserAvailable is true && progress bar === 1. Else user will be redirected to Signup screen.

My progress Bar Action Code: 

export const progressBarLevel = () => {
return (dispatch) => {
    this.progress = 0;
    dispatch({ type: PROGRESS, payload: 0 });
    setTimeout(() => {
        this.indeterminate = false;
       const interval = setInterval(() => {
            this.progress += Math.random()/5;
            if(this.progress > 1){
                this.progress = 1;
                clearInterval(interval);
            }
            return dispatch({ type: PROGRESS, payload: this.progress });
        },250)
    },500)
  }
}

And using props to get this progress data. So when it reaches to 1, the bar finished. And when bar finishes, the login check is performed and redirected. this is the whole process.

My ComponentDidMount code:

componentDidMount() {
    this.props.loginCheck(() => {
        this.setState({ isUserAvailble: true})
    })

   this.props.progressBarLevel();
}

My componentDidUpdate code: 

 componentDidUpdate() {
   if(this.props.progressed === 1 && this.state.isUserAvailble === true) {
        this.props.navigation.navigate('Dashboard')
   }
   else {
        this.props.navigation.navigate('SignUpForm')
   }

}

Now whats happening is, the pages get redirected to SignUpForm even without finishing the progress bar, How to make componentDidUpdate to wait untill progress bar finishes ?

Kindly Help

Upvotes: 0

Views: 1375

Answers (1)

Jitesh Manglani
Jitesh Manglani

Reputation: 485

Below code would solve your problem. Here the assumption is you have isUserAvailable with you when progress bar finishes.

componentDidUpdate() {
   if(this.props.progressed === 1) {
       if(this.state.isUserAvailble === true) {
        this.props.navigation.navigate('Dashboard')
       }
       else {
          this.props.navigation.navigate('SignUpForm')
       }
   }
}

One more observation you should not set State through a callback. You can use the userId state to check it.

One more point you should dispatch progress from login action and clear it when you finish check of user available with you. It is a cleaner approach to take.

Upvotes: 1

Related Questions