node package manager


license Version npm Twitter Follow

React Native Countdown Circle

React Native Countdown Circles


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


yarn add react-native-countdown-circle


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


import CountdownCircle from 'react-native-countdown-circle'
render() {
    return (
            textStyle={{ fontSize: 20 }}
            onTimeElapsed={() => console.log('Elapsed!')}


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 '#f00'
shadowColor The background color of the border String #999 '#999'
bgColor The inner background color of the component String #e9e9ef '#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.


Christoph Michel

Implementation Details

React Native Progress Circle