Never Publish Malarkey

    react-native-flip-timer

    0.0.5 • Public • Published

    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

    Install

    npm i react-native-flip-timer

    DownloadsWeekly Downloads

    77

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    198 kB

    Total Files

    13

    Last publish

    Collaborators

    • pritishvaidya