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
; { 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} isPausable=true onPause= console onResume= console minScale=09 maxScale=12 /> ;}
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!