React Native Splash Screen Navigation

Question

The below code is my splash screen, this screen has to be displayed if the location is set otherwise I need to navigate to AuthSplashScreen.

componentDidUpdate () {
        debugger;
        if(this.props.location){
                    return this.props.navigation.dispatch(NavigationActions.reset(
                    {
                        index: 0,
                        actions: [
                          NavigationActions.navigate({ routeName: 'Home'})
                        ]
                    }));
                }else{
                     setTimeout(function(){
                        return this.props.navigation.dispatch(NavigationActions.reset(
                        {
                            index: 0,
                            actions: [
                            NavigationActions.navigate({ routeName: 'AuthSplashScreen'})
                            ]
                        }));
                     }, 1000)
                }
    }

Here, the issues are : 1) If I am using settimeout, the output cannot read the property 'naviagtion' of undefined. 2) If I remove the settimeout it will work perfectly and navigate AuthSplashScreen(when location is not set)/Home(when location is set) as required. But, it gives a blinking like a display at the time of changing the screen from SplashScreen to AuthSplashScreen.

So how can I solve this blinking effect? Or do I need to change the logic of managing the screens?

Answer 1

Just need to keep a reference of the object of this.

componentDidUpdate () {
        debugger;
        if(this.props.location){
                    return this.props.navigation.dispatch(NavigationActions.reset(
                    {
                        index: 0,
                        actions: [
                          NavigationActions.navigate({ routeName: 'Home'})
                        ]
                    }));
                }else{
                     var thisObj = this;
                     setTimeout(function(){
                        return thisObj.props.navigation.dispatch(NavigationActions.reset(
                        {
                            index: 0,
                            actions: [
                            NavigationActions.navigate({ routeName: 'AuthSplashScreen'})
                            ]
                        }));
                     }, 1000)
                }
    }