react-native-count-to

Heavily customizable counter component for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeCountTo from 'https://cdn.skypack.dev/react-native-count-to';
</script>

README


react-native-count-to

A customizable React Native component that gradually counts from a number to a target number. Has support for slowing down the counting when counter is approaching target number.

Examples

Regular
3090reg

With slow counting

3090slow

Installation

To install the module:

npm install react-native-count-to

Usage

  1. Import react-native-count-to:
import {CountTo} from 'react-native-count-to';
  1. Use in whatever fashion is needed, i.e:
    <CountTo from={0} to={42} interval={1000} />

or

    <CountTo from={25000} to={-12000} interval={8000} slowDownEnabled={true} slowDownDistance={100} slowDownInterval={2000} />

Available props

Name Default Description
from 0 Number to count from
to REQUIRED Number to count to
interval 1000 Total amount of milliseconds the counting should take
slowDownEnabled false Toggles whether the counter should count more slowly as it approaches the target value or not
slowDownInterval 600 Total amount of milliseconds the slow counting should take
slowDownDistance 5 The number away from target value when the slow counting should begin
style {} Style for the text component
containerStyle {} Style for the container component
onComplete () => {} Callback for when the counting has completed