Package Exports

react-native-countdown-circle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-countdown-circle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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