Skip to content
A Flip Timer implementation in React Native
JavaScript Objective-C Starlark Java
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

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 #17 from pritishvaidya/dependabot/npm_and_yarn/exa… Mar 19, 2020
src Update default play state May 22, 2019
.editorconfig Init 💥 Feb 23, 2019
.eslintrc.json Init 💥 Feb 23, 2019
.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 #18 from pritishvaidya/dependabot/npm_and_yarn/han… Mar 19, 2020

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.