react-native-countdown

React Native CountDown Component.

Installation

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

Props

Name Description Type Default Value
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

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
      />
    )
}

GitHub