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