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		'#f00'
shadowColor	The background color of the border	String		'#999'
bgColor	The inner background color of the component	String		'#e9e9ef'
containerStyle	The custom styling which will be applied to the container of the Text component	Style		null
textStyle	The custom styling which will be applied to the Text component	Style		null
updateText	A function used to display a different text inside this component. Is called after every second, with the number of elapsed seconds, and the total seconds	func		(elapsedSecs, totalSecs) => (totalSecs - elapsedSecs).toString()
onTimeElapsed	A function being called when the countdown is over	func		() => null

Note: Setting the seconds prop to a different value restarts the timer with that new value.

Author

Christoph Michel

Implementation Details

React Native Progress Circle

License

MIT