rnf

react-native-flip-countdown-timer

A Flip Countdown Timer implementation in React Native

Showing:

Popularity

Downloads/wk

50

GitHub Stars

21

Maintenance

Last Commit

2yrs ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

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

A Flip timer implementation in React Native

For a Normal Timer application you can checkout react-native-flip-timer repository.

Show Cases

IOSAndroid
IOSAndroid

Getting Started

Installation

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

Basic Usage

import React, { Component } from 'react';
import {
  StyleSheet, View, TouchableOpacity, Text,
} from 'react-native';
import { CountdownTimer, FlipNumber } from 'react-native-flip-countdown-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}>
        <CountdownTimer 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

CountdownTimer Props

PropDefaultTypeDescription
timerequiredstring / numberTime (in seconds)
playtrueboolPlay the timer
wrapperStyle{}objectWrapper for the CountdownTimer
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