rnf

react-native-flip-timer

A Flip Timer implementation in React Native

Showing:

Popularity

Downloads/wk

111

GitHub Stars

67

Maintenance

Last Commit

1yr ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

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

IOSAndroid
IOSAndroid

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

PropDefaultTypeDescription
timerequiredstring / numberTime (in seconds)
playtrueboolPlay the timer
wrapperStyle{}objectWrapper for the Timer
flipNumberProps{...}defaultsFlip Number Props

Flip Number Props

PropDefaultTypeDescription
numberrequiredstring / numberNumber Input
unitsecondshours / minutes / secondsNumber Input Unit
sizenumberdeviceWidth / 6Size of the card
perspective250numberPerspective
numberWrapperStyle{}objectWrapper Style
cardStyle{}objectCard Style
flipCardStyle{}objectFlip Card Style
numberStyle{}objectNumber Style

Todos

  • Full Coverage Tests for the Components
  • Support for Labels

Contribution

Questions

Feel free to contact me or create an issue

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial