React-native-time-countdown NPM

react-native-time-countdown

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().

Installation

from npm

npm install react-native-time-countdown

from yarn

yarn add react-native-time-countdown

Note: Linking and Pod install not needed.

Usage

/**
 * 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 (
    <View style={styles.container}>
      <View style={{ display: timerEnd ? 'none' : 'flex' }}>
        <CountDownTimer
          ref={refTimer}
          timestamp={120}
          format="DHMS"
          showDoubleZero
          timerOnProgress={timerOnProgressFunc}
          timerCallback={timerCallbackFunc}
          containerStyle={styles.timerContainerStyle}
          textStyle={styles.timerTextStyle}
        />
      </View>
      <TouchableOpacity
        style={[
          {
            display: timerEnd ? 'flex' : 'none',
          },
          styles.touchableOpacityStyle,
        ]}
        onPress={() => {
          setTimerEnd(false);
          refTimer.current.resetTimer();
        }}
      >
        <Text style={styles.touchableOpacityTextStyle}>Resend</Text>
      </TouchableOpacity>
    </View>
  );
}

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;

Props

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