README
react-native-animated-timer ⏰
Simple animated timer implementing react-native-reanimated and react-native-svg libraries.
Examples
Installation
npm install react-native-animated-timer
Usage
import {Timer} from 'react-native-animated-timer';
<Timer
radius={350}
time={10000}
checkPoints={[{time: 1210.23, callback: () => alert('First Check Point')},
{time: 5310, callback: () => alert('Second Check Point')}]}
backgrounds={['blue', 'red', 'http://myimage.com/img1.png']}
showTime={true}
onTimeFinished={() => alert('AnimatedTimer has finished')}
loop={true}
pause={pauseFlag}
textStyle={{
color: 'red',
fontWeight: 'bold',
}}
showMilli={2}
/>
Properties
| Prop |Type|Default |Required |Description |
|----------------|-------------------------------|-----------------------------|--|--|
|radius|number
|100
|true
|radius of the circle
|time|number
|5000
|true
|time of one lap in milliseconds
|backgrounds|array
|none
|false
|array of colors or images that will appear in sequence (left-right). Example: backgrounds={['blue',require('./img/image1'), 'red','https://myimage.com/img2.png']}
|checkPoints|array
|none
|false
|array of objects containing a callback to be executed at a particular time (precision ~65ms). Example:checkPoints={[{ time: 1120, callback: () => myfunc1()}, { time: 5120, callback: () => myfunc2()}]}
|onTimeFinished|function
|none
|false
|Executes function when the timer finishes.
|pause|boolean
|false
|false
|Stops the timer
|showTime|boolean
|false
|false
|Shows the elapsed time
|showMilli|number
|false
|false
|Shows number
of milliseconds after the comma.
|loop|boolean
|true
|false
|An endless loop of timer.
|textStyle|object
|none
|false
|style the text showed showTime={true}
License
react-native-animated-timer is licensed under The MIT License.