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)