Skip to content

Yamilquery/react-native-timekeeper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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!

About

A beutifull timekeeper countdown animated for React Native

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published