Package Exports
- @logisticinfotech/react-native-timekeeper
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@logisticinfotech/react-native-timekeeper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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-timekeeperor
$ npm install react-native-timekeeper --saveUsage
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!