React Native Flip Clock

Component implementation for 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) or like it's described here.

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' />