react-native-countdown-circle-timer

React Native Countdown Circle Timer

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

Changelog

2.5.3 (2021-05-13)

Bug Fixes

• web: upgrade use-elapsed-time to 2.1.8 (9eb0166)