react navigation does't work when access another stack navigator

Question

I have a problem with react navigation. here are my navigation codes.

Navigation.js

const StartStack = createStackNavigator({
    First: EmptyScreen,
    Splash: SplashScreen 
},
{
    transitionConfig: () => fromBottom(),
});
const AppStack = createStackNavigator({
    Home: TabSet
},
{
   transitionConfig: () => fromRight(),
});
const AuthStack = createStackNavigator({ 
   SignIn: SignInScreen,
   SignUp: SignUpScreen,
   ForgotPassword: ForgotPasswordScreen
},
{
    transitionConfig: () => fromTop(),
});

export default createAppContainer(createSwitchNavigator({
   Start: StartStack,
   Auth: AuthStack,
   App: AppStack,
},
{
  initialRouteName: 'Start',
}));

Tabset.js

import React , { Component } from 'react';
import { View } from 'react-native';
import * as navOptions from '../../navigate/navigationOptions';
import BackgroundImage from '../../components/BackgroundImage';

class TabSet extends Component{

    static navigationOptions = { headerStyle: navOptions.headerStyle};

    render(){
        return(
            <View>
                <BackgroundImage>
                </BackgroundImage>
            </View>
        );
    }
}

export default TabSet;

NavigationOptions.js

export const headerStyle = {
    display:'none'
}

BackgroundImage.js

import React , { Component } from 'react';
import { View , ImageBackground , StyleSheet } from 'react-native';
import backgroundImage from '../../assets/images/backgroundImage.png';

class BackgroundImage extends Component{
    render(){
        return(
            <View>
                <ImageBackground 
                    source={backgroundImage} 
                    style = {styles.bgImg}
                    imageStyle = {{resizeMode : 'stretch'}}>
                        {this.props.children}
                 </ImageBackground>
            </View>
        )
     }
 }
 const styles = StyleSheet.create({
  bgImg : {
    width: '100%',
    height: '100%'
  }
 })
 export default BackgroundImage;

I create three stacks such as AppStack, StartStack, and AuthStack. Those are used in createAppContainer() function and hope to access those are as

this.props.navigation.navigate('App')

... I am able to access

this.props.navigation.navigate('Start')

and

this.props.navigation.navigate('Auth')

. These two stacks are works well. Then I route from SignIn screen of AuthStack to AppStack using,

this.props.navigation.navigate('App')

I see the first page of AppStack, the Home Screen is rendered and suddenly come back to the AuthStack's SignIn Screen. Then I try to navigate it again, the same thing happens again. I use redux and make the redux integrated navigation. Because i think this is a redux issue. But the issue still exists. All are works well but every time when I navigate to AppStack it came back to AuthStack . anyone can solve that please help me!

Answer 1

After spending some hours, I can understand what is the problem!

setInterval(()=>{
  ***...some process***
  }else{
    clearInterval(this);
    this.props.navigation.navigate('Auth');
  }
},500);

this code is written in the splash screen. I think the interval is cleared. but really it doesn't clear and I try to go to AppStack it returned to Auth after every 500ms. Above code is an old one and I can't remember that!