@logisticinfotech/react-native-timekeeper
v1.0.0
Published
A beutiful timekeeper countdown animated for React Native
Downloads
8
Readme
react-native-timekeeper
Timekeeper is the most complete and lightweight component for React-Native that allows you to create your own animated timer.
Features!
- Custom colors
- Custom borders and size
- Light-weight: No other dependencies besides react-native
- Enable/disable scale bounce animation (also specifies the size of the scales)
- Progressive or regressive counting
- Enable/disable pausable timer
- Apply your own callbacks on pausing, on resuming, or time elapsed
Installation
$ yarn add react-native-timekeeper
or
$ npm install react-native-timekeeper --save
Usage
import Timer from 'react-native-timekeeper';
render() {
return(
<Timer
beat={true}
seconds={120}
radius={100}
borderWidth={6}
color="#C52957"
bgColor="#DE537C"
bgColorSecondary="#E495AC"
bgColorThirt="#EFD6DE"
shadowColor="#DE537C"
textStyle={{ fontSize: 52, color: '#FFF', }}
subTextStyle={{ fontSize: 20, color: '#FFF', }}
onTimeElapsed={() => {console.log('Time elapsed')} }
isPausable={true}
onPause={() => console.log('Pause')}
onResume={() => console.log('Resume')}
minScale={0.9}
maxScale={1.2}
/>
);
}
Props
| Name | Description | Type | Required | Default Value | ----------- | ----------- | ----------- | ----------- | ----------- | | beat | ----------- | ----------- | ----------- | ----------- | | seconds | ----------- | ----------- | ----------- | ----------- | | radius | ----------- | ----------- | ----------- | ----------- | | borderWidth | ----------- | ----------- | ----------- | ----------- | | color | ----------- | ----------- | ----------- | ----------- | | bgColor | ----------- | ----------- | ----------- | ----------- | | bgColorSecondary | ----------- | ----------- | ----------- | ----------- | | bgColorThirt | ----------- | ----------- | ----------- | ----------- | | shadowColor | ----------- | ----------- | ----------- | ----------- | | textStyle | ----------- | ----------- | ----------- | ----------- | | subTextStyle | ----------- | ----------- | ----------- | ----------- | | onTimeElapsed | ----------- | ----------- | ----------- | ----------- | | isPausable | ----------- | ----------- | ----------- | ----------- | | onPause | ----------- | ----------- | ----------- | ----------- | | onResume | ----------- | ----------- | ----------- | ----------- | | minScale | ----------- | ----------- | ----------- | ----------- | | maxScale | ----------- | ----------- | ----------- | ----------- |
Author
Want to contribute? Great!