react-native-timekeeper

KO | EN

gitlite — search

#javascript #hacktoberfest #machine-learning #rust #deep-learning #linux #macos #nodejs #awesome #kubernetes #vue #security #mcp #ios

react-native-timekeeper

(★ 10)

A beutifull timekeeper countdown animated for React Native

react-native-timekeeper 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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

```sh
$ yarn add react-native-timekeeper
```

or

```sh
$ npm install react-native-timekeeper --save
```

### Usage

```javascript
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](https://github.com/Yamilquery)

Want to contribute? Great!

react-native-timekeeper

react-native-timekeeper 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-native-timekeeper

react-native-timekeeper 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README