A simple animated timer implementing react-native-reanimated and react-native-svg libraries.
npm install react-native-animated-timer
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}
/>
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} |
react-native-animated-timer is licensed under The MIT License.