Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-timekeeper

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-timekeeper

A beutiful timekeeper countdown animated for React Native

  • 1.0.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

NameDescriptionTypeRequiredDefault 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!

FAQs

Package last updated on 19 Sep 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc