react-native-countup-component

React Native CountUp Component

Usage no npm install needed!

<script type="module">
  import reactNativeCountupComponent from 'https://cdn.skypack.dev/react-native-countup-component';
</script>

README

react-native-countup

React Native Countup

Installation

Run npm install react-native-countup-component --save OR yarn add react-native-countup-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: #FFFFFF '#FFFFFF'}
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 countup component number 15
current Number of seconds to start countup number 0
max Number of seconds to stop countup number 0
onFinish What function should be invoked when the time is equal to max 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