react-native-customizable-countdown

Preview

Installation

from npm:
npm install react-native-customizable-countdown --save

or from yarn:
yarn add react-native-customizable-countdown

What's new in v1.1.3

new Prop

endingAlert: {
        initiateAt: number (seconds),
        animate:bool, 
        backgroundColor: string,
        digitColor: string,
        labelColor: string
        }

changed Prop names

Previous Prop Name	New Prop Name
textColor	labelColor
textFontWeight	labelFontSize
textFontWeight	labelFontWeight
hoursTextFontStyle	hoursLabelFontStyle
minutesTextFontStyle	minutesLabelFontStyle
secondsTextFontStyle	secondsLabelFontStyle
textPosition	labelPosition
enableText	enableLabel
hoursText	hoursLabel
minutesText	minutesLabel
secondsText	secondsLabel

Props

Name	Description	Required	Type	default
initialSeconds	seconds to start the countdown	no	number	0
ref	use to handle reset, addSeconds and deductSeconds methods. (usage shown below)	no	func	none
onTimeOut	triggers after finishing the countdown	yes	func	none
onChange	get seconds, minutes and hours	no	func	none
gap	gaps between each digit containers	no	string or number	5
width	width of the countdown component	no	string or number	200
height	height of the countdown component	no	string or number	80
borderRadius	borderRadius of all digit containers	no	string or number	5
backgroundColor	background color of each digit container	no	string	'white'
hoursBackgroundStyle	styling hours digit container	no	object	none
minutesBackgroundStyle	styling minutes digit container	no	object	none
secondsBackgroundStyle	styling seconds digit container	no	object	none
digitColor	change all digits' color	no	string	'black'
digitFontSize	change all digits' font sizes	no	number or string	18
digitFontWeight	change all digits' color	no	string	none
hoursDigitFontStyle	styling hours digits	no	object	none
minutesDigitFontStyle	styling minutes digits	no	object	none
secondsDigitFontStyle	styling seconds digits	no	object	none
labelColor	change all texts' color	no	string	'black'
labelFontSize	change all texts' font sizes	no	number or string	10
labelFontWeight	change all texts' font weight	no	string	none
hoursLabelFontStyle	styling hours text	no	object	none
minutesLabelFontStyle	styling minutes text	no	object	none
secondsLabelFontStyle	styling seconds text	no	object	none
enableLabel	hide or show text with digits	no	bool	none
labelPostion	position of the texts in each container. 'top' or 'bottom'	no	string	'bottom'
hoursLabel	text which should display in hours container	no	string	'Hours'
minutesLabel	text which should display in minutes container	no	string	'Minutes'
secondsLabel	text which should display in seconds container	no	string	'Seconds'
showHours	show or hide hours container if necessory (can hide only if hours digit is zero)	no	bool	true
showMinutes	show or hide minutes container if necessory (can hide only if minutes digit is zero)	no	bool	true
showSeparator	show or hide separator between containers	no	bool	false
animateSeparator	only works when showSeparator is true	no	bool	false
separatorStyle	style the separator	no	object	none
pause	pause the countdown	no	bool	false
activeInBackground	countdown works even if the app is in background	no	bool	true
endingAlert	change UI colors when countdown hits a certian seconds (initiateAt is required). Allows animation aswell.	no	obj	none

Usage

import {CountDown} from 'react-native-customizable-countdown'

<CountDown
    ref = {(ref) => this.myRef=ref}
    initialSeconds = {4500}
    onTimeOut = {()=>{}}
    digitFontSize={30}
    labelFontSize = {15}
    width={300}
    height={100}
    hoursLabel={'hrs'}
    minutesLabel={'min'}
    enableLabel = {true}
    backgroundColor={'yellow'}
    hoursBackgroundStyle={{borderWidth:2, backgroundColor:null, borderColor: 'blue'}}
    secondsBackgroundStyle={{borderWidth:0, backgroundColor:null, borderColor: 'blue'}}
    secondsDigitFontStyle={{color:'pink'}}
    secondsLabelFontStyle={{color:'green'}}
    labelColor='red'
    labelFontWeight='bold'
    labelPosition = 'top'/> 

<CountDown
        initialSeconds = {50}
        onTimeOut = {()=>{}}        
        showSeparator = {true}
        animateSeparator = {true}   
        separatorStyle={{color:'red', fontSize: 50}}
        pause = {this.state.pause}
        activeInBackground = {false}
        endingAlert={{
          backgroundColor:'red',
          initiateAt:120, 
          animate:true, 
          digitColor:'blue',
          labelColor:'yellow'
        }}     
        />

onChange

onChange = (hours, minutes, seconds) => {
  console.log('hours: '+hours+' minutes: '+minutes+' seconds: '+seconds);
}

  render() {   
    return ( 
    <CountDown
        ref = {(ref) => this.myRef=ref}
        initialSeconds = {4500}
        onTimeOut = {()=>{alert('time out!')}}
        onChange = {this.onChange}
        digitFontSize={30}
        labelFontSize = {15}
        width={300}
        height={100}/>

Methods

using ref property you can access below mentioned all methods.

resetCountDown

this.myRef.resetCountDown()

addSeconds

this.myRef.addSeconds(number)

deductSeconds

this.myRef.deductSeconds(number)