title: How to clear interval when app in background state react-native?
body: <p>I have a component which fetch a request in every 30 seconds interval, it's working fine as expected. But I want when app goes in background state the request will stop and when app in foreground the request will start and vise-versa. Is there is any solution to do this. </p>
  
  <p>Here is my component file.</p>
  
  <p><strong>Notifications.js</strong></p>
  
  <pre><code>/**
   * Notification Button
   */
  import React from "react";
  import { View, TouchableWithoutFeedback, Text } from "react-native";
  import { connect } from "react-redux";
  import Icon from 'react-native-vector-icons/MaterialIcons';
  // styles
  import styles from "./Styles";
  // global styles
  import globalStyles from "BkProvider/src/styles/global";
  import { colors } from "BkProvider/src/styles/base";
  // root navigator
  import { rootNavigator } from "BkProvider/src/screens/DashboardGroup";
  // strings
  import strings from "BkProvider/src/strings";
  // actions
  import { getSystemAlerts, seeAllSystemAlertLogs, stopNotificationTick } from "BkProvider/src/actions";
  // Navigation constants
  import NavigationConstants from "BkProvider/src/constants/NavigationConstants";
  
  const { posRelative } = globalStyles;
  
  class NotificationButton extends React.Component {
  
      componentDidMount() {
          this.props.getSystemAlerts();
      }
  
      componentWillUnmount() {
          stopNotificationTick();
      }
  
      /**
       * Function to open system alerts popup
       */
      openSystemAlerts() {
          this.props.seeAllSystemAlertLogs(this.props.unseenAlertLogIdsArray);
          rootNavigator.push({
              screen: NavigationConstants.SYSTEM_ALERTS_LISTING,
              title: strings.allNotifications,
              backButtonTitle: ''
          });
      }
  
      render() {
          const { unseenAlertLogIdsArray } = this.props;
          return (
              &lt;TouchableWithoutFeedback onPress={this.openSystemAlerts.bind(this)}&gt;
                  &lt;View style={styles.button}&gt;
                      &lt;View style={[posRelative]}&gt;
                          &lt;Icon
                              name="notifications-none"
                              size={27}
                              color={colors.white}
                          /&gt;
                          {(unseenAlertLogIdsArray &amp;&amp; unseenAlertLogIdsArray.length &gt; 0) &amp;&amp;
                              &lt;Text style={styles.badge}&gt;{unseenAlertLogIdsArray.length}&lt;/Text&gt;
                          }
                      &lt;/View&gt;
                  &lt;/View&gt;
              &lt;/TouchableWithoutFeedback&gt;
          );
      }
  }
  
  const mapStateToProps = ({ systemAlerts }) =&gt; {
      const { unseenAlertLogIdsArray } = systemAlerts;
      return { unseenAlertLogIdsArray }
  }
  
  export default connect(mapStateToProps, {
      getSystemAlerts,
      seeAllSystemAlertLogs
  })(NotificationButton);
  </code></pre>
  
  <p><strong>Actions.js</strong></p>
  
  <pre><code>/**
   * System Alerts Actions
   */
  import Toast from "react-native-simple-toast";
  import { NetInfo } from "react-native";
  // action types
  import {
      GET_SYSTEM_ALERTS,
      SEE_ALL_SYSTEM_ALERT_LOGS
  } from "BkProvider/src/actions/actionTypes";
  // helpers methods
  import { getUserId } from "./AppInitializer";
  // webservice config
  import WebServiceConfig, { APITypes } from "../webservice/WebServiceConfig";
  import WebService from "../webservice/WebService";
  import APINames from "../webservice/APINames";
  
  let timer = null;
  let globalDispatch;
  let webServiceObject
  
  /**
   * Function To Get System Alerts
   */
  export const getSystemAlerts = () =&gt; (dispatch) =&gt; {
      clearInterval(timer);
      globalDispatch = dispatch;
      let apiConfig = new WebServiceConfig(APINames.LoadSystemAlertLogs),
          httpParams = {
              'page': "",
              'limit': "",
              'role': 'provider',
              'uid': getUserId()
          }
  
      webServiceObject = new WebService(onResultCallback)
          .addPostParameterObject(httpParams)
          .addServiceConfiguration(apiConfig)
  
      timer = setInterval(() =&gt; notificationsTick(), 15000);
      notificationsTick();
  }
  
  /**
   * API Response Callback Handler
   */
  const onResultCallback = (webServiceResultObj) =&gt; {
      if (webServiceResultObj.isSuccess &amp;&amp; webServiceResultObj.response != null) {
          if (webServiceResultObj.response.api_status === 1) {
              if (globalDispatch) {
                  globalDispatch({ type: GET_SYSTEM_ALERTS, payload: webServiceResultObj.response.data });
              }
          }
      } else {
          if (webServiceResultObj.shouldShowErrorMessage)
              Toast.show(webServiceResultObj.errorMessage)
      }
  }
  
  /**
   * System Alerts Notification Ticks
   */
  const notificationsTick = () =&gt; {
      NetInfo.isConnected.fetch().then(isConnected =&gt; {
          if (isConnected) {
              if (webServiceObject)
                  webServiceObject.execute();
          }
      })
  }
  
  /**
   * Function To Clear The Interval Of System Alerts Api
   */
  export const stopNotificationTick = () =&gt; {
      clearInterval(timer);
  }
  
  /**
   * Function To See All System Alerts Logs
   */
  export const seeAllSystemAlertLogs = (unseenAlertLogIdsArray) =&gt; (dispatch) =&gt; {
      if (unseenAlertLogIdsArray) {
          let apiConfig = new WebServiceConfig(APINames.SeeAllSystemAlertLogs)
              .setAPIType(APITypes.POST);
  
          // params
          let params = {
              role: "provider",
              uid: getUserId(),
              unseen_log_ids: unseenAlertLogIdsArray
          }
  
          dispatch({ type: SEE_ALL_SYSTEM_ALERT_LOGS }); // dispatch an action to see all system alert logs
  
          new WebService()
              .addPostParameterObject(JSON.stringify(params))
              .addServiceConfiguration(apiConfig)
              .execute()
  
      }
  }
  </code></pre>