Skip to content
React Native CountDown
JavaScript
Branch: master
Clone or download
Latest commit fd17ffe Aug 1, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore initial commit Dec 2, 2017
README.md Update README.md Jun 8, 2019
index.js bump version Jul 31, 2019
package.json bump version Jul 31, 2019
yarn.lock initial commit Dec 2, 2017

README.md

react-native-countdown

React Native CountDown

Installation

Run npm install react-native-countdown-component --save OR yarn add react-native-countdown-component --save

Props

Name Description Type Default Value
id Counter id, to determine whether to reset the counter or not string null
style Override the component style object {}
digitStyle Digit style object {backgroundColor: #FAB913 '#FAB913'}
digitTxtStyle Digit Text style object {color: #FAB913 '#000'}
timeLabelStyle Time Label style object {color: #FAB913 '#000'}
separatorStyle Separator style object {color: #FAB913 '#000'}
size Size of the countdown component number 15
until Number of seconds to countdown number 0
onFinish What function should be invoked when the time is 0 func null
onChange What function should be invoked when the timer is changing func null
onPress What function should be invoked when clicking on the timer func null
timeToShow What Digits to show array ['D', 'H', 'M', 'S']
timeLabels Text to show in time label object {d: 'Days', h: 'Hours', m: 'Minutes', s: 'Seconds'}
showSeparator Should show separator bool false
running a boolean to pause and resume the component bool true

Preview

React Native Countdown

Code

import CountDown from 'react-native-countdown-component';

render() {
    return (
      <CountDown
        until={10}
        onFinish={() => alert('finished')}
        onPress={() => alert('hello')}
        size={20}
      />
    )
}

Custom Styling Example

React Native Countdown

Code

import CountDown from 'react-native-countdown-component';

render() {
    return (
      <CountDown
        until={60 * 10 + 30}
        size={30}
        onFinish={() => alert('Finished')}
        digitStyle={{backgroundColor: '#FFF'}}
        digitTxtStyle={{color: '#1CC625'}}
        timeToShow={['M', 'S']}
        timeLabels={{m: 'MM', s: 'SS'}}
      />
    )
}

Separator Example

React Native Countdown

Code

import CountDown from 'react-native-countdown-component';

render() {
    return (
      <CountDown
        size={30}
        until={1000}
        onFinish={() => alert('Finished')}
        digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
        digitTxtStyle={{color: '#1CC625'}}
        timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
        separatorStyle={{color: '#1CC625'}}
        timeToShow={['H', 'M', 'S']}
        timeLabels={{m: null, s: null}}
        showSeparator
      />
    )
}
You can’t perform that action at this time.