A Flip countdown timer implementation in React Native
npm install react-native-flip-countdown-timer- Installation
- Basic Usage
- Properties
- Defaults
- Contribution
- Questions
``bash`
$ npm i react-native-flip-countdown-timer --save
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 |- @pritishvaidya The main author.
Feel free to contact me or create an issue