Negating Past Mistakes

    ezebecke-react-native-flip-timer

    1.0.0 • Public • Published

    react-native-flip-timer

    A Flip timer implementation in React Native. Fork from: https://github.com/pritishvaidya/react-native-flip-timer.

    This version adds "Reset" option and adds days to the timer

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

    Show Cases

    IOS Android
    IOS Android

    Getting Started

    Installation

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

    Basic Usage

    import React, { Component } from 'react';
    import {
      StyleSheet, View, TouchableOpacity, Text,
    } from 'react-native';
    import { Timer, FlipNumber } from 'ezebecke-react-native-flip-timer';
    
    export default class App extends Component {
      state = {
        play: true,
        reset: false
      }
    
      play = () => {
        this.setState(({ play }) => ({ play: !play }));
      }
      reset = () => {
        this.setState(({ reset }) => ({ reset: !reset }));
      };
    
      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>
            <TouchableOpacity style={styles.button} onPress={this.reset}>
              <Text style={styles.text}>Reset</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
    reset false bool Reset 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 days / 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 ezebecke-react-native-flip-timer

    DownloadsWeekly Downloads

    9

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    206 kB

    Total Files

    11

    Last publish

    Collaborators

    • anonymousant