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!