rn-countdown-timer/README.md

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

<!--markdownlint-disable md033 -->
# React Native Countdown Timer

A React Native countdown timer component in a circle shape with color and progress animation, **originally made by [Vasil Dimitrov](https://github.com/vydimitrov)**. This fork updates it to the latest version of React Native.

*[His version](https://github.com/vydimitrov/react-countdown-circle-timer/tree/master), while outdated, also supports websites with standard React, if that's what you're looking for*.

<div align="center">
<img src="https://raw.githubusercontent.com/ZakaHaceCosas/rn-countdown-timer/refs/heads/master/img/demo1.gif" alt="Demo 1" width="200">
<img src="https://raw.githubusercontent.com/ZakaHaceCosas/rn-countdown-timer/refs/heads/master/img/demo2.gif" alt="Demo 2" width="200">
<img src="https://raw.githubusercontent.com/ZakaHaceCosas/rn-countdown-timer/refs/heads/master/img/demo3.gif" alt="Demo 3" width="200">
</div>

[![npm](https://img.shields.io/npm/v/rn-countdown-timer?style=for-the-badge)](https://www.npmjs.com/package/rn-countdown-timer)
[![npm](https://img.shields.io/npm/dw/rn-countdown-timer?style=for-the-badge)](https://www.npmtrends.com/rn-countdown-timer)

## Features

:zap: Performance optimized with single `requestAnimationFrame` loop to animate color and progress  
:rainbow: Transition between colors during the countdown  
:european_castle: Fully customizable content in the center of the circle  
:rocket: Support iOS and Android

```bash
pnpm install rn-countdown-timer
```

This component has a peer dependency on `react-native-svg`. Read the [full documentation](https://github.com/ZakaHaceCosas/rn-countdown-timer/blob/master/src/README.md) for the installation guide, as well as demos and use cases.