Skip to content

Harisene/react-native-customizable-countdown

Repository files navigation

npm NPM npm GitHub issues

Preview

1

2

3

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

animate1 animate2

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)

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published