rn-animated-number v1.0.4

React Native Animated Number

A customizable animated text component for React Native that supports animated numbers, currencies, and percentages.

Installation

npm install rn-animated-number

prerequisites

npm install react-native-reanimated

react-native-reanimated dependency is required for this package. Make sure to install it before using this package.

animationConfig Details: stagger: The delay between animating each digit/character (in milliseconds). damping: Controls the "bounciness" of the spring animation (higher values make it less bouncy). stiffness: Controls how stiff the spring is (higher values result in faster motion).

Examples

Currency Example

<AnimatedNumber
  value={1234.56}
  textStyle={{ color: 'green', fontWeight: 'bold', fontSize: 50 }}
  formatter={(val) => Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(val)}
  animationConfig={{ stagger: 100, damping: 50, stiffness: 200 }}
/>

Percentage Example

<AnimatedNumber
  value={75}
  textStyle={{ color: 'red', fontWeight: 'bold', fontSize: 40 }}
  formatter={(val) => `${val}%`}
/>

Custom Animation Config Example

You can customize the animation behavior by providing your own animationConfig.

<AnimatedNumber
  value={9876}
  textStyle={{ color: 'blue', fontWeight: 'bold', fontSize: 60 }}
  animationConfig={{
    stagger: 120, // delay between animating each digit
    damping: 100, // less bounciness
    stiffness: 300, // faster motion
  }}
/>