App.js

import { StatusBar } from 'expo-status-bar';
import React,  { useState,useEffect } from "react";
import { StyleSheet, Text, View,TouchableOpacity , Dimensions} from 'react-native';

const screen = Dimensions.get('window');

const formatNumber = number => `0${number}`.slice(-2)

const getRemaining = (time) => {
  const mins = Math.floor(time / 60);
  const secs = time - mins * 60 ;
  return{mins : formatNumber(mins), secs : formatNumber(secs)};
}

export default function App() {

  const [remainingSecs, setRemainingSecs] = useState(0);
  const [isActive, setIsActive] = useState(false);

  const {mins, secs} = getRemaining(remainingSecs);

  toggle = () => {
    setIsActive(!isActive);
  }
  reset = () => {
    setRemainingSecs(0);
    setIsActive(false);
  }
  useEffect(() => {
    let interval = null;

    if(isActive){
      interval = setInterval(() => {
        setRemainingSecs(remainingSecs => remainingSecs +1);
      }, 1000);
    } else if(!isActive && remainingSecs !== 0){
      clearInterval(interval);
    }
  
    return () => {
      clearInterval(interval);
    }
  }, [isActive,remainingSecs])
  

  return (
    <View style={styles.container}>
      <StatusBar style="light-content" />
      <Text style={styles.timerText}>{`${mins} : ${secs}`}</Text>
      <TouchableOpacity onPress={this.toggle} style={styles.button}>
        <Text style={styles.buttonText}>{isActive ? 'Pause' : 'Start'}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={this.reset} style={[styles.button, styles.resetButton]}>
        <Text style={[styles.buttonText, styles.resetText]}>Reset</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#07121B',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button:{
    borderWidth : 10,
    borderColor : '#B9AAFF',
    width  : screen.width/2,
    height : screen.width/2,
    borderRadius : screen.width/2,
    alignItems : 'center',
    justifyContent : 'center'
  },
  buttonText : {
    fontSize : 45,
    color : '#B9AAFF',
  },
  timerText :{
    color : '#FFF',
    fontSize : 90,
    marginBottom : 20,

  },
  resetButton :{
    marginTop : 20,
    borderColor : '#FF851B',
  },
  resetText :{
    color : '#FF851B',
  }

});