AnimatedNumber.js

import React, { useEffect, useState, useRef } from 'react'
import { Animated, Easing } from 'react-native'
import PropTypes from 'prop-types'

const AnimatedNumber = ({ value, initialValue, animate, ...props }) => {
  const [displayValue, setDisplayValue] = useState(initialValue)
  const displayValueAnimation = useRef(new Animated.Value(initialValue)).current

  useEffect(() => {
    if (!animate) {
      return
    }
    Animated.timing(displayValueAnimation, {
      toValue: value,
      duration: 1200,
      useNativeDriver: true,
      easing: Easing.out(Easing.quad),
    }).start()
  }, [value])

  useEffect(() => {
    const id = displayValueAnimation.addListener(({ value }) => {
      setDisplayValue(Math.trunc(value))
    })
    return () => {
      displayValueAnimation.removeListener(id)
    }
  })

  return <Animated.Text {...props}>{animate ? displayValue : value}</Animated.Text>
}

AnimatedNumber.propTypes = {
  value: PropTypes.number.isRequired,
  initialValue: PropTypes.number,
  animate: PropTypes.bool,
}

AnimatedNumber.defaultProps = {
  initialValue: 0,
  animate: true,
}

export default AnimatedNumber