Countdown Timer

A minutes and seconds countdown with a bar that drains underneath. Pausing holds both the digits and the bar and resuming carries on from there. When the time is up the digits turn to the done colour and onComplete fires once. The remaining time is not announced every second, only "Time is up", so a screen reader is not flooded. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add countdown-timer

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/countdown-timer.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { CountdownTimer } from "@/components/ui/countdown-timer";

export default function Example() {
  return <CountdownTimer seconds={90} onComplete={() => console.log("done")} />;
}

Props