React Native Countdown Circle

Features

• Custom colors
• Custom size and border radius
• Light-weight: No other dependencies besides react-native
• Performant and Smooth: Uses React Native's Animated library

Installation

yarn add react-native-countdown-circle

or

npm install --save react-native-countdown-circle

Usage

import CountdownCircle from 'react-native-countdown-circle'

render() {
    return (
        <CountdownCircle
            seconds={10}
            radius={30}
            borderWidth={8}
            color="#ff003f"
            bgColor="#fff"
            textStyle={{ fontSize: 20 }}
            onTimeElapsed={() => console.log('Elapsed!')}
        />
    )
}

Props

Name	Description	Type	Required	Default Value
seconds	The seconds to count down from	Number	✓
radius	The radius in px of the component (including border)	Number	✓
borderWidth	The border width in px	Number	✓
color	The border color	String