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
{ return <CountdownCircle seconds=10 radius=30 borderWidth=8 color="#ff003f" bgColor="#fff" textStyle= fontSize: 20 onTimeElapsed= console /> }
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
Implementation Details
License
MIT