# react-native-flip-timer

> A Flip timer implementation in React Native

Latest version **0.0.5** (published 2020-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-flip-timer
pnpm add react-native-flip-timer
yarn add react-native-flip-timer
bun add react-native-flip-timer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2020-09-04 |
| First published | 2019-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 193.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pritish Vaidya |
| Maintainers | pritishvaidya |
| Keywords | react-native, flip, flip-timer, react-native-flip, react-native-flip-timer |

## Links

- npm: https://www.npmjs.com/package/react-native-flip-timer
- Repository: https://github.com/pritishvaidya/react-native-flip-timer
- Homepage: https://github.com/pritishvaidya/react-native-flip-timer#readme
- Issues: https://github.com/pritishvaidya/react-native-flip-timer/issues
- npm.io page: https://npm.io/package/react-native-flip-timer

## Recent versions

- 0.0.5 (latest) — 2020-09-04
- 0.0.4 — 2019-05-22
- 0.0.3 — 2019-02-28
- 0.0.2 — 2019-02-28
- 0.0.1 — 2019-02-27

## README

# react-native-flip-timer [![Build Status](https://travis-ci.com/pritishvaidya/react-native-flip-timer.svg?branch=master)](https://travis-ci.com/pritishvaidya/react-native-flip-timer) [![CodeFactor](https://www.codefactor.io/repository/github/pritishvaidya/react-native-flip-timer/badge)](https://www.codefactor.io/repository/github/pritishvaidya/react-native-flip-timer) [![Maintainability](https://api.codeclimate.com/v1/badges/997a75c022750058ad6a/maintainability)](https://codeclimate.com/github/pritishvaidya/react-native-flip-timer/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/997a75c022750058ad6a/test_coverage)](https://codeclimate.com/github/pritishvaidya/react-native-flip-timer/test_coverage) [![npm version](https://badge.fury.io/js/react-native-flip-timer.svg)](https://badge.fury.io/js/react-native-flip-timer) [![npm downloads](https://img.shields.io/npm/dt/react-native-flip-timer.svg)](https://npm-stat.com/charts.html?package=react-native-flip-timer&from=2018-02-17&to=2018-12-28) <a href="https://github.com/pritishvaidya/react-native-flip-timer/blob/master/README.md"><img src="https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg" alt="module formats: umd, cjs, esm"></a>
> A Flip timer implementation in React Native

For Countdown Timer application you can checkout [react-native-flip-countdown-timer](https://github.com/pritishvaidya/react-native-flip-countdown-timer) repository.

## Show Cases
IOS            |  Android
:-------------------------:|:-------------------------:
![IOS](https://media.giphy.com/media/BLs443ghS1AYHZwqc2/giphy.gif)  |  ![Android](https://media.giphy.com/media/vNpcUecdRzYazzhnK1/giphy.gif)

## Getting Started

- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Properties](#properties)
- [Defaults](#defaults)
- [Contribution](#contribution)
- [Questions](#questions)

### Installation

```bash
$ 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 | [`{...}`](#flip-number-props) | `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

- [@pritishvaidya](mailto:pritishvaidya94@gmail.com) The main author.

## Questions

Feel free to [contact me](mailto:pritishvaidya94@gmail.com) or [create an issue](https://github.com/pritishvaidya/react-native-flip-timer/issues/new)

---
_Source: https://npm.io/package/react-native-flip-timer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._