react-native-flip-countdown-timer      

> A Flip timer implementation in React Native

Show Cases

IOS | Android
:-------------------------:|:-------------------------:
!IOS | !Android

Getting Started

- Installation
- Basic Usage
- Properties
- Defaults
- Contribution
- Questions

$3

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

$3


`
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 (



{play ? 'Pause' : 'Play'}


);
}
}

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',
},
});
`

$3


#### CountdownTimer Props
| Prop | Default | Type | Description |
| :------------ |---------------:| :---------------| :-----|
| time | required | string / number | Time (in seconds) |
| play | true | bool | Play the timer |
| wrapperStyle | {} | object | Wrapper for the CountdownTimer |
| 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 |
| 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 The main author.

Questions

Feel free to contact me or create an issue