react-native-countdown-circle-timer

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

Usage no npm install needed!

<script type="module">
  import reactNativeCountdownCircleTimer from 'https://cdn.skypack.dev/react-native-countdown-circle-timer';
</script>

README

React Native Countdown Circle Timer

npm Codecov npm GitHub Workflow Status npm bundle size

React Native countdown timer component for iOS and Android in a circle shape with color and progress animation.

  • Single react-native's Animated loop to animate color and progress
  • Support iOS and Android
  • Transition between colors during the countdown
  • Fully customizable content in the center of the circle
  • a11y support
  • Built-in and ready-to-use TypeScript type definitions.

Installation

yarn add react-native-countdown-circle-timer

Prerequisites

This component has a peer dependency on react-native-svg to draw the countdown circle. react-native-svg has to be installed and linked into your project

Demo

Check the Expo Snack demo to get started

Basic usage

import { CountdownCircleTimer } from 'react-native-countdown-circle-timer'

const UrgeWithPleasureComponent = () => (
  <CountdownCircleTimer
    isPlaying
    duration={10}
    colors={[
      ['#004777', 0.4],
      ['#F7B801', 0.4],
      ['#A30000', 0.2],
    ]}
  >
    {({ remainingTime, animatedColor }) => (
      <Animated.Text style={{ color: animatedColor }}>
        {remainingTime}
      </Animated.Text>
    )}
  </CountdownCircleTimer>
)

Props

Refer to the list of props

Road Map

  • Add liner gradient support for iOS
  • Support useNativeDriver