Native Animation

Sign in Get all-access

Base Sliding Number animation preview

Base Sliding Number animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add base-sliding-number

Base Sliding Number

React Native Sliding Number Component

A rolling number display with independent digit springs and configurable value, formatting, font, and color.

Native Animation Base · Free · MIT

Read and download source

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

About this component

Related guides

React Native Animated Counter with Rolling Digits

A rolling number display with independent digit springs and configurable value, formatting, font, and color.

How it works

The value is formatted with Intl.NumberFormat, so currency, percent, grouping and fixed digits all work.
Every digit is a 0–9 wheel clipped to one line; it springs to its digit (stiffness 200, damping 20, mass 0.4).
Digits are keyed from the right, so units stay units when the number gains a digit.
Tabular figures keep the width steady while digits roll.

Install

npx nativeanimation add base-sliding-number

The CLI also copies base-theme. Dependencies, if you copy by hand:

npx expo install react-native-reanimated react-native-worklets

Usage

import { BaseSlidingNumber } from './base-sliding-number';

<BaseSlidingNumber value={followers} fontSize={40} />

Currency and a two-digit timer:

<BaseSlidingNumber value={total} format={{ style: 'currency', currency: 'USD' }} fontSize={24} />
<BaseSlidingNumber value={seconds} format={{ minimumIntegerDigits: 2 }} />

Wrap your app in BaseThemeProvider (from base-theme) to choose light/dark and an accent; without it, pieces use the light neutral theme. Every piece also takes a theme prop that wins over the provider.

Props

Prop	Type	Default	Description
`value`	`number`	—	The number to show.
`format`	`Intl.NumberFormatOptions`	—	Formatting (currency, digits…).
`locale`	`string`	`'en-US'`	Locale for formatting.
`fontSize` / `lineHeight`	`number`	`24` / `1.25×`	Type size and the height of each wheel.
`color` / `fontFamily`	`string`	theme	Text color and font.
`theme`	`BaseTheme`	provider	Overrides the theme from `BaseThemeProvider`.
`testID`	`string`	—	Test identifier on the root view.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Runs on iOS, Android and web, in Expo Go and in development builds. Part of Native Animation Base, a free family that shares one theme: install base-theme once (the CLI does it for you) and every Base piece picks it up.

Accessibility

Screen readers read the formatted value as one label, not digit by digit. With Reduce Motion on, digits change without rolling.

Part of a shared foundation

Use it in a screen

Compose Base Sliding Number with other Base components and a single shared theme. Ask your agent to read each API, then connect real navigation, state, and callbacks.

Build a habit tracker Build with an agent CLI and manual installation Theme and dark mode Accessibility checklist Native Animation Base UI library

Go further.

Base covers the everyday. Choose a more expressive interaction when your app calls for it.

Another way to solve this task · $9

Bubble Sale Banner ↗

A sale banner with jumping balloon letters and a printing receipt, with configurable copy, character artwork, fonts, and colors.

Another way to solve this task · $9

Year Digits Rollover ↗

An interactive year reveal with alternating bands on changing digits, with configurable start year, end year, colors, and numeral font asset.

Source code

Loading public source…

Dependencies

Package	Version
react-native-reanimated	4.7.1
react-native-worklets	0.13.0

Compatibility

SDK	Status	Revision	Last revision	Platforms	Dependencies
Expo SDK 58	Tested	1	10/27/2026	iOS, Web, Android	react-native-reanimated 4.7.1, react-native-worklets 0.13.0
Expo SDK 57	Tested	1	10/27/2026	iOS, Web, Android	react-native-reanimated 4.5.1, react-native-worklets 0.10.1

Scroll the table horizontally to review every column ↔

More animations

BaseSlidingNumber.tsx

import Animated, {
  ReduceMotion,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import {
  useBaseReducedMotion,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { useEffect } from 'react';
import { Text, View, type TextStyle } from 'react-native';

export type BaseSlidingNumberProps = {
  value: number;
  /** Intl options, e.g. { style: 'currency', currency: 'USD' }. */
  format?: Intl.NumberFormatOptions;
  locale?: string;
  fontSize?: number;
  lineHeight?: number;
  color?: string;
  fontFamily?: string;
  theme?: BaseTheme;
  testID?: string;
};

// Each digit is a 0–9 wheel that springs to its place (Motion: stiffness 200, damping 20, mass 0.4).
const DIGIT_SPRING = { stiffness: 200, damping: 20, mass: 0.4 };

export function BaseSlidingNumber({
  value,
  format,
  locale = 'en-US',
  fontSize = 24,
  lineHeight,
  color,
  fontFamily,
  theme: override,
  testID,
}: BaseSlidingNumberProps) {
  const theme = useBaseTheme(override);
  const height = lineHeight ?? Math.round(fontSize * 1.25);
  const text = new Intl.NumberFormat(locale, format).format(value);
  const style: TextStyle = {
    fontSize,
    lineHeight: height,
    height,
    color: color ?? theme.colors.foreground,
    fontFamily: fontFamily ?? theme.fonts.semibold,
    fontVariant: ['tabular-nums'],
  };
  // Key digits from the right so units stay units when the number grows.
  const chars = text.split('');
  let digitIndex = 0;
  const keyed = chars
    .map((ch) => ({ ch, isDigit: /\d/.test(ch) }))
    .reverse()
    .map((c, i) => ({
      ...c,
      key: c.isDigit ? `d${digitIndex++}` : `s${i}${c.ch}`,
    }))
    .reverse();

  return (
    <View
      testID={testID}
      accessible
      accessibilityRole="text"
      accessibilityLabel={text}
      style={{ flexDirection: 'row', height, overflow: 'hidden' }}
    >
      {keyed.map(({ ch, isDigit, key }) =>
        isDigit ? (
          <Digit key={key} digit={Number(ch)} height={height} style={style} />
        ) : (
          <Text key={key} style={style} aria-hidden>
            {ch}
          </Text>
        ),
      )}
    </View>
  );
}

function Digit({
  digit,
  height,
  style,
}: {
  digit: number;
  height: number;
  style: TextStyle;
}) {
  const reduced = useBaseReducedMotion();
  const position = useSharedValue(digit);
  useEffect(() => {
    position.set(
      reduced
        ? digit
        : withSpring(digit, {
            ...DIGIT_SPRING,
            reduceMotion: ReduceMotion.Never,
          }),
    );
  }, [digit, reduced, position]);
  const wheel = useAnimatedStyle(() => ({
    transform: [{ translateY: -position.get() * height }],
  }));
  return (
    // The wheels are visual only: the root view carries the formatted value for screen readers.
    <View
      style={{ height, overflow: 'hidden' }}
      aria-hidden
      accessibilityElementsHidden
      importantForAccessibility="no-hide-descendants"
    >
      <Text style={[style, { opacity: 0 }]}>0</Text>
      <Animated.View
        style={[{ position: 'absolute', top: 0, left: 0, right: 0 }, wheel]}
      >
        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
          <Text key={n} style={[style, { textAlign: 'center' }]}>
            {n}
          </Text>
        ))}
      </Animated.View>
    </View>
  );
}

LICENSE

MIT License

Copyright (c) 2026 Native Animation

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

nativeanimation.manifest.json

{
  "schemaVersion": 1,
  "id": "base-sliding-number",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme"
  ],
  "dependencies": {
    "react-native-reanimated": "4.7.1",
    "react-native-worklets": "0.13.0"
  }
}