Introduction

expo-content-transition is one component, NumericText. Give it a value, and when the value changes it lines the old and new text up glyph by glyph. Only the characters that differ move: each one rolls, scales and blurs on its own spring while its neighbours hold still.

It's made for the text in an app that changes while someone is looking at it: balances, prices, counters, timers, scores, progress and status labels.

At a glance#

• Per-glyph motion. Each changed character rolls, scales and blurs on its own, staggered slightly so a change reads left to right.
• Smart alignment. Digits line up around the decimal separator, so 123.45 → 123.46 moves one digit and $9.99 → $10.49 grows one.
• Direction from the value. Bigger numbers roll up, smaller ones roll down. Force a direction for clocks and countdowns.
• Tunable. duration, bounce, enterScale, travel and blur shape the motion without losing its character.
• Native. Core Animation on iOS, Jetpack Compose on Android, the DOM on the web. Only the new string crosses the bridge.
• Typography. Custom fonts, weights, letter spacing and monospaced digits, as props or through style.

A first look#

import { NumericText } from 'expo-content-transition';

export function Balance({ amount }: { amount: number }) {
  return <NumericText value={amount.toFixed(2)} fontSize={48} fontWeight="600" monospacedDigits />;
}

NumericText sizes itself to its text, like a Text. Change amount and only the digits that differ move.

Platform support#

The package contains native code, so it runs in a development build, not in Expo Go.

Next steps#