rn-countdown-timer

Lightweight React Native countdown timer component with color and progress animation based on SVG.


Keywords
react-native, countdown, timer, circle, clock, SVG
License
MIT
Install
npm install rn-countdown-timer@4.0.4

Documentation

React Native Countdown Timer

A React Native countdown timer component in a circle shape with color and progress animation, originally made by Vasil Dimitrov. This fork updates it to the latest version of React Native.

His version, while outdated, also supports websites with standard React, if that's what you're looking for.

Demo 1 Demo 2 Demo 3

npm npm

Features

⚡ Performance optimized with single requestAnimationFrame loop to animate color and progress
🌈 Transition between colors during the countdown
🏰 Fully customizable content in the center of the circle
🚀 Support iOS and Android

pnpm install rn-countdown-timer

This component has a peer dependency on react-native-svg. Read the full documentation for the installation guide, as well as demos and use cases.