title: How can i add a pause functionality in this timer ? React-Native
body: <p>//Importing different files</p>
  
  <pre><code>import * as React from 'react';
  import { Text, View, StyleSheet,Button } from 'react-native';
  import { Constants } from 'expo';
  import AssetExample from './components/AssetExample';
  </code></pre>
  
  <p>//Creating a stylesheet</p>
  
  <pre><code>const styles = StyleSheet.create({
    appContainer : {
      flex :1 ,
      alignItems : 'center',
      justifyContent : 'center',
    },
    text : {
      fontSize : 40 ,
    }
  })
  
  export class App extends React.Component{
  </code></pre>
  
  <p>//Creating a constructor function and setting state here</p>
  
  <pre><code>  constructor(props)
    {
      super(props)
      this.state = ({
        minutes : 0,
        seconds : 4,
        pause : false,
    })
  }
  </code></pre>
  
  <p>//Timer starting function for minutes and if it gets decreased by 1 then automatically set the seconds state.</p>
  
  <pre><code>startTimer = () =&gt; {
    this.setState({
       minutes : this.state.minutes - 1,
      seconds : 4
      })
   }
  </code></pre>
  
  <p>//Timer2 for decreasing seconds by 1 every instant.</p>
  
  <pre><code> startTimer2 = () =&gt; {
    this.setState({
      seconds : this.state.seconds - 1 
  
    })
    console.log(this.props.toggle)
  
   }
  </code></pre>
  
  <p>//Setting interval for both timers here.</p>
  
  <pre><code> componentDidMount = () =&gt; {
   this.interval = setInterval(this.startTimer , 5000)
     this.interval2 = setInterval(this.startTimer2 , 1000) 
   }
  </code></pre>
  
  <p>//Don't update if minutes gets below zero.</p>
  
  <pre><code> shouldComponentUpdate = (nextProps , nextState) =&gt; {
   if(nextState.minutes &gt;= 0 ) 
   {
   return( 
  
  true
   )
   }
  </code></pre>
  
  <p>// JUST clear INterval if it gets below</p>
  
  <pre><code> else {
    clearInterval(this.interval)
    clearInterval(this.interval2)
     }
     }
  </code></pre>
  
  <p>//Component will get unmount </p>
  
  <pre><code>   componentWillUnmount = () =&gt; {
     clearInterval(this.interval)
     clearInterval(this.interval2)
     }
  </code></pre>
  
  <p>//Toggler for pausing the time</p>
  
  <pre><code>   pauseTimer = ()=&gt; {
                    this.setState({
                        pause : !this.state.pause
                                                 })
                                     }
  </code></pre>
  
  <p>//A render function</p>
  
  <pre><code>         render() {
  
                    if(this.state.minutes === 0  &amp;&amp; this.state.seconds === 0)
   {
       return(
        &lt;View style = {styles.appContainer}&gt;
    &lt;Text style ={styles.text}&gt;
    Break is over
    &lt;/Text&gt;
  
    &lt;/View&gt;
      )
  
      }
       else if (this.state.pause === false)
       {
  
       return (
       &lt;View style = {styles.appContainer}&gt;
       &lt;Text style ={styles.text}&gt;
       {this.state.minutes} : {this.state.seconds}
  
        &lt;/Text&gt;
        &lt;Button title = "Pause" onPress = {()=&gt;this.pauseTimer()} 
        /&gt;
  
        &lt;/View&gt;
        )
        }
  
      else {
  
       return (
       &lt;View style = {styles.appContainer}&gt;
       &lt;Text style ={styles.text}&gt;
        {this.state.minutes} : {this.state.seconds}
                  Paused
            &lt;/Text&gt;
        &lt;Button title = "Start again" onPress = {()=&gt;this.pauseTimer()}/&gt;
       &lt;/View&gt;
           )
  
         }
  
        }
  </code></pre>