react-native-time-countdown

![npm]()

react-native-time-countdown is a small library built with TypeScript that provides a custom countdown timer
component created using a custom hook. All you have to do is pass a timestamp(as total number of seconds) to it and it will calculate the total number of days, hours, minutes and seconds automatically.

It also supports a callback function which you can utilize to let the user know when the timer is over. You can also give an option to the user to reset the timer using this function refTimer.current.resetTimer().

Contents

- The package
- Installation
- Usage
- License
- Pull Requests

Installation

from npm

``bash
npm install react-native-time-countdown
`

from yarn

`bash
yarn add react-native-time-countdown
`

Note: Linking and Pod install not needed.

Usage

`javascript
/**
* CountdownTimerApp Functional Component
*/

import React, { useRef, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import CountDownTimer from 'react-native-time-countdown';

function CountdownTimerApp() {
// Timer References
const refTimer = useRef();

// For keeping track of the timer
const [timerEnd, setTimerEnd] = useState(false);

const timerOnProgressFunc = (remainingTimeInSecs) => {
console.log('On Progress tracker :', remainingTimeInSecs);
};

const timerCallbackFunc = (timerFlag) => {
// Setting timer flag to false once complete
setTimerEnd(timerFlag);
console.warn('Alert the user when timer runs out...');
};

return (


ref={refTimer}
timestamp={120}
format="DHMS"
showDoubleZero
timerOnProgress={timerOnProgressFunc}
timerCallback={timerCallbackFunc}
containerStyle={styles.timerContainerStyle}
textStyle={styles.timerTextStyle}
/>

style={[
{
display: timerEnd ? 'flex' : 'none',
},
styles.touchableOpacityStyle,
]}
onPress={() => {
setTimerEnd(false);
refTimer.current.resetTimer();
}}
>
Resend


);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
timerContainerStyle: {
height: 56,
width: 120,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 35,
backgroundColor: '#2196f3',
},
timerTextStyle: {
fontSize: 25,
color: '#FFFFFF',
fontWeight: '500',
letterSpacing: 0.25,
},
touchableOpacityStyle: {
height: 56,
width: 120,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 35,
backgroundColor: '#512da8',
},
touchableOpacityTextStyle: {
fontSize: 18,
color: '#FFFFFF',
fontWeight: 'bold',
},
});

export default CountdownTimerApp;
`

$3

| Name | Type | Default | Description |
| --------------- | ------------------------------------------------ | --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| timestamp | number | required | Total number of seconds to be passed to the timer component. Example:- passing {60} seconds will give timestamp of 01:00 minutes to the timer |
| format | DHMS \| DHM \| DH \| HMS \| HM \| MS | Default | Specify the format in you want to see your timer otherwise it will show in Default format |
| showDoubleZero | boolean | Default is false | If showDoubleZero is true, ensures that the first level of time units (days, hours, or minutes). displays as '00' when their value is less than 10. This prop does not affect seconds display. |
| timerCallback | function | void | Callback when the timer countdown ends. This is a function where you can alert the user that the timer has ended. |
| timerOnProgress | function | void | Callback for the timer countdown progress. You can keep track of the progress of the timer countdown by remaining seconds. |
| containerStyle | style | { backgroundColor: 'rgba(0, 0, 0, .2)' } | Style of Timer Component Container dots |
| textStyle | style | { fontSize: 15, fontWeight: '600', color: 'rgba(0, 0, 0, .2)' } | Style of Timer Component Text dots |

License

MIT

Pull

Pull requests are welcome! Please make the PR to dev branch though and not master`. Thanks.