React native interval, Can't make it right way

Question

Hi I'm just trying up setstate a component with interval.I put interval code in componentdidmount and clear it in componentWillUnmount.

It should stops intervalling when user navigates another screen but console logs says it continues. Also i want to works this in every 1 second but when i put interval time as 1000 it works in 3 second

constructor(props) {
    super(props);
    this.state = {
      text:'',
    };

    this._interval = null;
  }
componentDidMount() {
   if (!this._interval) {
  console.log('this._interval',this._interval)

      var endNew = new Date(this.props.end); 

      var distance = endNew.getTime() - newNow.getTime();

      var hour = Math.floor(distance / 1000 / 60 / 60); 
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      if (hour < 1 && minutes < 1 && seconds < 2) {
        this.setState({isClosed: false});
      } else {
        this.setState({
          textt: hour + ' h ' + minutes + ' m ' + seconds + 's',
        });
      }
    }, 1000); 
  }

}

componentWillUnmount() {
    clearInterval(this._interval);
    clearTimeout(this._interval);
  }


if (!this._interval) {
      console.log('this._interval',this._interval)

and console log = this._interval null

Answer 1

In case you are using react-navigation stacknavigator won‘t callcomponentdidmount when pushing a new view on top.

As you can see in docs, you should rather subscribe to focus/blur.