Skip to content
A Flip Timer implementation in React Native
JavaScript Objective-C Python Java
Branch: master
Clone or download
pritishvaidya Merge pull request #6 from pritishvaidya/dependabot/npm_and_yarn/exam…
…ple/handlebars-4.1.2

Bump handlebars from 4.1.0 to 4.1.2 in /example
Latest commit 1e7f867 Jul 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_tests_ Updating the component Feb 28, 2019
example Merge pull request #6 from pritishvaidya/dependabot/npm_and_yarn/exam… Jul 21, 2019
src Update default play state May 22, 2019
.editorconfig Init 💥 Feb 23, 2019
.eslintrc.json
.gitignore Init 💥 Feb 23, 2019
.npmignore Update package status 🚀 Feb 27, 2019
.travis.yml Update code-climate token ⭐️ Feb 28, 2019
.yalcignore Init yalcignore 💥 Feb 23, 2019
LICENSE Initial commit Feb 22, 2019
README.md Update README.md Apr 6, 2019
package.json Update default play state May 22, 2019
rollup.config.js Init 💥 Feb 23, 2019
yarn.lock Merge pull request #7 from pritishvaidya/dependabot/npm_and_yarn/hand… Jul 21, 2019

README.md

react-native-flip-timer Build Status CodeFactor Maintainability Test Coverage npm version npm downloads module formats: umd, cjs, esm

A Flip timer implementation in React Native

For Countdown Timer application you can checkout react-native-flip-countdown-timer repository.

Show Cases

IOS Android
IOS Android

Getting Started

Installation

$ npm i react-native-flip-timer --save

Basic Usage

import React, { Component } from 'react';
import {
  StyleSheet, View, TouchableOpacity, Text,
} from 'react-native';
import { Timer, FlipNumber } from 'react-native-flip-timer';

export default class App extends Component {
  state = {
    play: true,
  }

  play = () => {
    this.setState(({ play }) => ({ play: !play }));
  }

  render() {
    const { play } = this.state;
    return (
      <View style={styles.container}>
        <Timer time={500} play={play} />
        <TouchableOpacity style={styles.button} onPress={this.play}>
          <Text style={styles.text}>{play ? 'Pause' : 'Play'}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    height: 40,
    backgroundColor: '#333333',
    width: 120,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#cccccc',
  },
});

Properties

Timer Props

Prop Default Type Description
time required string / number Time (in seconds)
play true bool Play the timer
wrapperStyle {} object Wrapper for the Timer
flipNumberProps {...} defaults Flip Number Props

Flip Number Props

Prop Default Type Description
number required string / number Number Input
unit seconds hours / minutes / seconds Number Input Unit
size number deviceWidth / 6 Size of the card
perspective 250 number Perspective
numberWrapperStyle {} object Wrapper Style
cardStyle {} object Card Style
flipCardStyle {} object Flip Card Style
numberStyle {} object Number Style

Todos

  • Full Coverage Tests for the Components
  • Support for Labels

Contribution

Questions

Feel free to contact me or create an issue

You can’t perform that action at this time.