node package manager

react-native-countdown-circle

license Version npm Twitter Follow

React Native Countdown Circle

React Native Countdown Circles

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 '#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

Author

Christoph Michel

Implementation Details

React Native Progress Circle

License

MIT