How to build a background timer in Expo/React Native

Photo by Djim Loic on Unsplash
const recordStartTime = async () => {
try {
const now = new Date();
await AsyncStorage.setItem("@start_time", now.toISOString());
} catch (err) {
// TODO: handle errors from setItem properly
console.warn(err);
}
};
import { useEffect } from "react";
import { AppState } from "react-native"
import AsyncStorage from "@react-native-community/async-storage";
import { differenceInSeconds } from "date-fns";
const appState = useRef(AppState.currentState);
const [elapsed, setElapsed] = useState(0);
useEffect(() => {
AppState.addEventListener("change", handleAppStateChange);
return () => AppState.removeEventListener("change", handleAppStateChange);
}, []);
const handleAppStateChange = async (nextAppState) => {
if (appState.current.match(/inactive|background/) &&
nextAppState === "active") {
// We just became active again: recalculate elapsed time based
// on what we stored in AsyncStorage when we started.
const elapsed = await getElapsedTime();
// Update the elapsed seconds state
setElapsed(elapsed);
}
appState.current = nextAppState;
};
const getElapsedTime = async () => {
try {
const startTime = await AsyncStorage.getItem("@start_time");
const now = new Date();
return differenceInSeconds(now, Date.parse(startTime));
} catch (err) {
// TODO: handle errors from setItem properly
console.warn(err);
}
};

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store