# react-native-flip-clock

> React Native Flip Clock

Latest version **1.0.1** (published 2016-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-flip-clock
pnpm add react-native-flip-clock
yarn add react-native-flip-clock
bun add react-native-flip-clock
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2016-09-28 |
| First published | 2016-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Author | Jakub Martyčák |
| Maintainers | rusel1989 |
| Keywords | react-native, ios, react-component, flipclock |

## Links

- npm: https://www.npmjs.com/package/react-native-flip-clock
- Repository: https://github.com/rusel1989/react-native-flip-clock
- Issues: https://github.com/rusel1989/react-native-flip-clock/issues
- npm.io page: https://npm.io/package/react-native-flip-clock

## Recent versions

- 1.0.1 (latest) — 2016-09-28
- 1.0.0 — 2016-09-21
- 0.3.2 — 2016-04-14
- 0.3.1 — 2016-04-14
- 0.3.0 — 2016-04-14
- 0.2.0 — 2016-04-14

## README

## React Native Flip Clock

Component implementation for [JDFlipNumberView](https://github.com/jaydee3/JDFlipNumberView), it is in
very beginning definately not production ready :-)

For react-native < 0.25.1 use version 0.3.x for recent versions use version 1.0.x

## Installation
1. Install package via npm:
  ```
  npm i -S react-native-flip-clock
  ```
2. Link your library by one of those ways: either by using `rnpm link` (see more about rnpm [here](https://github.com/rnpm/rnpm)) or like it's [described here](http://facebook.github.io/react-native/docs/linking-libraries-ios.html).

3. In Xcode go to targets > build phases and drag over JDFlipNumberView.bundle to copy bundle resources section

## Custom clock number bundle
In design directory you can find .psd file just edit it to your liking and create one .png file for all
digits from 0 - 9, then create .bundle file and drag it over to copy bundle resources. Then set `bundleName`
property on component to bundle name

## FlipClockView
Display Flip clock with current time, doesn't display seconds by default, you have to set showSeconds prop to true
if you want to display them

```
const { FlipClockView } = require('react-native-flip-clock');

<FlipClockView
  bundleName='BundleName'
  showSeconds />
```

## DateCounterView
When mode property set to countdown flip clock counts down from given date, if mode set to countup it counts up form given date to infinity 

```
const { DateCounterView } = require('react-native-flip-clock');

<DateCounterView
  dayDigitCount={1}
  date={Date.now() + (24 * 60 * 60 * 1000)}
  mode='countdown'
  bundleName='BundleName' />
```
![DateCounterView](https://i.giphy.com/l3V0D4WT3rSaIHUB2.gif)

---
_Source: https://npm.io/package/react-native-flip-clock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._