clearInterval() won't clear setInterval and Affect navigation

Question

Alright, So I have a Splash screen which uses setInterval but the problem is setInterval now basically affects my whole navigation in my app I tried to use clearInterval but It won't work.

I tried changing from componentWillMount to componentDidMount but it still doesn't work.

componentDidMount(){
  const splashInterval = setInterval(()=>{
      this.props.navigation.navigate('Main');
    },2000);
    this.setState({splashInterval: splashInterval});
}


componenWillUnmount(){
  const splashInterval = this.state.splashInterval;
  const clearSplashInterval = this.props.navigation.clearInterval(splashInterval);
  this.setState(clearSplashInterval);
}

Answer 1

you don't need to clear interval you can just simply

  componentDidMount(){
    setTimeout(() => {
this.props.navigation.navigate("Main")
    }, 100);
  }

when you are navigate to another class you can use this and if you want to reset your stack like you don't want splash screen in stack

  componentDidMount(){
    setTimeout(() => {

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'main' })],
});
this.props.navigation.dispatch(resetAction);
    }, 100);
  }

Answer 2

Why are you getting the clearInterval from the props?????

to clear the setInterval

do this

componentDidMount(){
 this.inter = setInterval(async() => {
            this.props.navigation.navigate('Main');
        }, 2000);
}

componenWillUnmount(){
  clearInterval(this.inter);
}

The clearInterval() function clears the interval which has been set by setInterval() function before that.