number-flow-react-native

Number Flow React Native

The best animated number component for React Native.

Beautiful number animations for React Native with digit-by-digit rolling transitions. Supports currencies, percentages, compact notation, and all Intl.NumberFormat options. Includes a View-based renderer (zero extra deps) and a Skia renderer for canvas-based animation. Built-in TimeFlow for animated clocks, countdowns, and stopwatches. Works with Expo and bare React Native on iOS and Android.

Features

• Beautiful digit-by-digit rolling: each digit animates independently via virtual wheels with automatic direction detection.
• Two renderers: a default View-based renderer with zero dependencies, and a Skia renderer if you need to have Skia numbers animating.
• Full Intl.NumberFormat: currencies, percentages, units, compact notation, and everything that this beautiful formatter has to offer.
• TimeFlow: dedicated animated time display with 12h/24h, timestamps, and countdown support. Even supports centiseconds.
• 120 FPS scrubbing: worklet-driven updates entirely on the UI thread, with Skia.
• 37 numeral systems: Arabic-Indic, Devanagari, Thai, CJK, and more.
• Accessibility: VoiceOver/TalkBack announcements + reduce motion support.
• Continuous mode: odometer-style cascading digit rolls.

Documentation

For full docs, examples, and recipes, visit number-flow-react-native.awingender.com.

Installation

# npm
npm install number-flow-react-native react-native-reanimated

# bun
bun add number-flow-react-native react-native-reanimated

# expo
npx expo install number-flow-react-native react-native-reanimated

Quick start

import { useState } from "react";
import { NumberFlow } from "number-flow-react-native";

function PriceDisplay() {
  const [price, setPrice] = useState(42.99);

  return (
    <NumberFlow
      value={price}
      format={{ style: "currency", currency: "USD" }}
      style={{ fontSize: 32, color: "#000" }}
    />
  );
}

Renderers

The default import uses the View-based renderer - no extra dependencies needed. If you need to display numbers in Skia Canvas, use the Skia renderer:

// View-based (default)
import { NumberFlow, TimeFlow } from "number-flow-react-native";

// Skia canvas (requires @shopify/react-native-skia)
import { SkiaNumberFlow, SkiaTimeFlow, useSkiaFont } from "number-flow-react-native/skia";

Attribution

This library is a complete React Native reimplementation of NumberFlow by Max Barvian. Please check out his work and the original web version.

The animation patterns, easing curves, and digit-rolling approach are adapted from the original web implementation. All code is original, and no source code is shared.

Sponsoring

If this library helps you, particularly if you are a big company, consider sponsoring me. Helps a ton, thank you!

License

MIT