@logisticinfotech/react-native-timekeeper

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

Yamil Diaz Aguirre

Want to contribute? Great!