Skip to content

Latest commit

 

History

History
71 lines (52 loc) · 2.83 KB

README.md

File metadata and controls

71 lines (52 loc) · 2.83 KB
Raw

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

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