How to build a background timer in Expo/React Native

Photo by Djim Loic on Unsplash

Insight #1: use AsyncStorage to store starting time

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);
}
};

Insight #2: use AppState to adjust timer

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);
}
};

Warning: a background task this is not

--

--

--

Co-founder & CTO @ AgentRisk. Former infra-tech guy (storage, networks). Startup nerd. Always building cool side-projects. #LongLA

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Rest Services | Rest-API

React Native Push Notifications with Firebase Cloud Functions

Tauri 0 to 100

Understand React.createRef in 3 Minutes

React Weekly Issue 22

Basic Algorithm with Typescript (Part 3)

Illustration of iteration / looping

Getting Started with Waves Signer

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
Alex Loukissas

Alex Loukissas

Co-founder & CTO @ AgentRisk. Former infra-tech guy (storage, networks). Startup nerd. Always building cool side-projects. #LongLA

More from Medium

Why React Native For Your Mobile Application?

Introducing ACRN: An Accessibility Component Library for React Native

Tutorial: UI Testing in React Native with testing-library

A user interface for a website side-by-side with it’s code

Archiving iOS React Native app in an NRWL monorepo: debugging guide