React Native Animated Rolling numbers

✨ react-native-animated-rolling-numbers is a React Native component that animates numbers and compact notations (K, M, B, T) with customizable styles and animations. It's designed to create smooth, eye-catching transitions between numeric values.


The example shown in the video is available here.

Features

- ✨ Supports animated transitions for numeric values and symbols (e.g., commas, dots).
- 🎨 Customizable digit styles and animation configurations.
- 📏 Handles compact number formatting (e.g., 1K, 1M, etc.).
- 🔧 Easily customizable via props.
- 🌀 Supports reduce-motion and easing functions for animations.
- 🔢 Designed for both regular numbers and formatted numbers with signs (positive/negative) and commas.

Installation

``bash
npm install react-native-animated-rolling-numbers


or


yarn add react-native-animated-rolling-numbers
`

> [!IMPORTANT]
> This library relies on react-native-reanimated. You must install react-native-reanimated separately in your project. This is a peer dependency.

Make sure you have react-native-reanimated installed in your project. Follow the official installation guide here: react-native-reanimated installation.

Usage

Basic Example

`javascript
import React, { useState } from "react";
import { View, StyleSheet, Button } from "react-native";
import { AnimatedRollingNumber } from "react-native-animated-rolling-numbers";
import { Easing } from "react-native-reanimated";

const App = () => {
const [value, setValue] = useState(1200);
return (

value={value}
showPlusSign
showMinusSign
useGrouping
enableCompactNotation
compactToFixed={2}
textStyle={styles.digits}
spinningAnimationConfig={{ duration: 500, easing: Easing.bounce }}
/>
onPress={() => setValue(value + Math.floor(Math.random() * 1000))}
title="Increase"
/>
onPress={() => setValue(value - Math.floor(Math.random() * 1000))}
title="Decrease"
/>

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
digits: {
fontSize: 32,
fontWeight: "bold",
paddingHorizontal: 2,
color: "#4A90E2",
},
});

export default App;
`

The example shown in the video is available here.

Props

$3

The numeric value to be displayed and animated.

$3

Whether to show the sign of the number (e.g., "+" or "-"). Defaults to false.

$3

Whether to show the minus sign for negative numbers. Defaults to true.

$3

Whether to show the plus sign for positive numbers. Defaults to false.

$3

Number of decimal places to show in normal notation. defaults to undefined.

$3

Whether to include commas/points in the number formatting (e.g.,1000987 -> 1,000,987). Defaults to false.

$3

Custom formatted text to display instead of the numeric value.

$3

The locale to use for number formatting. Defaults to "en-US".

$3

Enable compact notation for large numbers (e.g., 1K, 1M, 1B, 1T). Defaults to false.

$3

Number of decimal places to show in compact notation. Defaults to undefined.

$3

If true, only applies decimal precision for compact notation (K/M/B/T). Defaults to true.

Example:

- If fixedOnlyForCompact is true and compactToFixed is 2, the number 1500 will be displayed as 1.50K, but the number 999 will be displayed as 999 (no decimal places).
- If fixedOnlyForCompact is false and compactToFixed is 2, the number 1500 will be displayed as 1.50K, and the number 999 will be displayed as 999.00.

$3

Style for the container wrapping the animated digits.

$3

Style for the container wrapping each animated digit.

$3

Props for the main text component.

$3

Props for the numeric text components.

$3

Props for the comma text component.

$3

Props for the decimal point text component.

$3

Props for the compact notation text components (K, M, B, T).

$3

Props for the sign text component (if used).

$3

Style for the main text component.

$3

Style for the numeric text components.

$3

Style for the comma text component.

$3

Style for the decimal point text component.

$3

Style for the compact notation text components.

$3

Style for the sign text component.

$3

Configuration for the digit animation. Supports:

- duration: number: Duration of the animation in milliseconds.
- reduceMotion: boolean: Whether to reduce motion for accessibility.
- easing: EasingFunction`: Custom easing function for the animation.

$3

Callback function that is invoked when the animation completes.

$3

Custom function to animate the value change. Defaults to a bounce animation.

If you find this project useful and would like to support its ongoing development, consider buying me a coffee! Your support helps keep the creativity brewing and allows me to continue improving and maintaining this project. Thank you! ☕💖