Number Flow React Native

Overview

Number Flow React Native strives to be the best number animation library for React Native.

1,234

Digit-by-Digit Rolling

Each digit animates independently via virtual wheels with automatic direction detection.

1,234 1,234

Two Renderers

View-based for quick setup, Skia for performance. Same API, choose your backend.

$1,234.56

Full i18n Support

Built on Intl.NumberFormat — currencies, percentages, units, 37+ numeral systems.

12:00

TimeFlow

Dedicated animated time display with 12h/24h, timestamps, and countdown support.

50

120 FPS Updates

Worklet-driven scrubbing for zero-latency, gesture-driven digit transitions on the UI thread.

١٬٢٣٤

Non-Latin Numerals

37 Unicode numeral systems — Arabic-Indic, Devanagari, Thai, CJK, and more.

Overview

Number animation is the sort of effect that makes your product feel great, making it ideal for high quality financial apps, dashboards, and other applications where dynamically changing numbers are displayed.

The library wants to be easy to use, and at the same time be able to handle anything you throw at it - from simple number transitions to complex price tickers, step counters, and more. It's also built to support both View-based and Skia-based rendering backends, as Skia is often used for graphs and charts that require synchronized number animations.

The library is inspired by NumberFlow for the web, and ships two rendering backends (View-based and Skia) that share a common core.

Attribution

This library is a React Native reimplementation inspired by NumberFlow by Maxwell Barvian. The animation patterns, easing curves, and digit-rolling approach are adapted from the original web implementation. All code in this library is original.

On this page