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}