I have created a splash screen with progress bar. The whole function of the splash screen is to check whether user is available and if yes, it will redirect to Dashboard else Signup form. I am using redux action to calculate progress bar value and login check.
Here is my Progress Bar Action Code :
export const progressBarLevel = () => {
return (dispatch) => {
this.progress = 0;
dispatch({ type: PROGRESS, payload: 0 });
setTimeout(() => {
dispatch({ type: INDETERMINATE, payload: 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 my login Check Action :
export const loginCheck = () => {
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 });
}
else {
dispatch({ type: NO_VALID_LOGIN_AVAILABLE, payload: token });
}
}
};
So, by using these i am populating the needs. And i am using componentDidMount and willUpdate to perfom actions.
My componentDidMount():
componentDidMount() {
this.props.loginCheck();
this.props.progressBarLevel();
}
My componentDidUpdate():
componentDidUpdate() {
this.mounted = true;
if(this.props.progressed === 1) {
if(this.props.token === null) {
this.props.navigation.navigate('WelcomeAuth')
}
else {
this.props.navigation.navigate('Dashboard')
}
}
}.
So, over all everything is working correctly, but when there is no user availble. The pages get redirect to "WelcomeAuth" ( actually its correct) But, when i enter something , it again redirects to "Beginning of the page", As a welcome page. So then, i should be clicking on signup button and enter next word, the again it goes back to Welcome page.
How to stop the splashscreen component ? As its work is to redirect thats it, after redirect, the splash screen should be unmounted so that, it wont work on background ?
How to achieve this ?
First create a action to reset the navigation stact
const homeAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'HomeScreen' })],
});
then navigate using dispatch
this.props.navigation.dispatch(homeAction);
here all other components will be removed and only HomeScreen will be in the navigation stack
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.