A light-weight countdown circle indicator for React Native.
npm install react-native-countdown-circle![license]()



!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
or
npm install --save react-native-countdown-circle
``javascript
import CountdownCircle from 'react-native-countdown-circle'
render() {
return (
radius={30}
borderWidth={8}
color="#ff003f"
bgColor="#fff"
textStyle={{ fontSize: 20 }}
onTimeElapsed={() => console.log('Elapsed!')}
/>
)
}
`
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.MIT