useCountdownTimer.ts

import { useEffect } from 'react';
import { AppState, AppStateStatus, Alert } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const useCountdownTimer = () => {
  let time = 600; // this time is the initial time, you can change based on your need.
  let intervalId: any; // used any :) but the correct use is Nodejs.TimeOut

  const saveBackgroundTimestamp = async () => {
    const timestamp = new Date().getTime();
    await AsyncStorage.setItem('backgroundTimestamp', timestamp.toString());
  };

  const getBackgroundTimestamp = async () => {
    const timestampString = await AsyncStorage.getItem('backgroundTimestamp');
    return timestampString ? parseInt(timestampString, 10) : null;
  };

  const resetTimer = (activetime: number) => {
    time = activetime;
    if (intervalId) {
      clearInterval(intervalId);
    }
    startInterval();
  };

  const startInterval = () => {
    clearInterval(intervalId);

    intervalId = setInterval(() => {
      if (time > 0) {
        console.log(time - 1); //remove the console, this added for test purpose
        time = time - 1;       // we sub 1 each time when the interval completed
      } else {
        console.log('time finished');
        Alert.alert(
          'Session Expired',
          'Your session has timed out. Please login again.',
          [{ text: 'OK', onPress: () => console.log('Session expired alert closed') }],
          { cancelable: false }
        );
        clearInterval(intervalId);
        intervalId = 0;
      }
    }, 1000);
  };

  const handleAppStateChange = async (state: AppStateStatus) => {  //when the app on background, we save the timestamp, and when the user come back we find the diff and sub it from the time left for session
    if (state === 'active') {
      console.log('App is in the foreground');
      if (!intervalId) {
        startInterval();
      }
      const backgroundTime = await getBackgroundTimestamp();
      if (backgroundTime) {
        const currentTime = new Date().getTime();
        const differenceInSeconds = Math.round((currentTime - backgroundTime) / 1000);
        console.log(`App was in the background for ${differenceInSeconds} seconds`);
        time = time - differenceInSeconds;  //when the app on background, we save the timestamp, and when the user come back we find the diff and sub it from the time left for session
        resetTimer(time);  //reset timer
      }
    } else if (state === 'inactive') {
      console.log('App is transitioning from foreground to background');
    } else if (state === 'background') {
      await saveBackgroundTimestamp();
      console.log('App is in the background');
    }
  };

  useEffect(() => {
    (AppState as any).addEventListener('change', handleAppStateChange);

    startInterval();

    return () => {
      (AppState as any).removeEventListener('change', handleAppStateChange);
      if (intervalId) {
        clearInterval(intervalId);
      }
    };
  }, []);

  return {
    resetTimer,
  };
};

export default useCountdownTimer;