Skip to content
Native Animation
Odometer Price Ticker animation preview

Odometer Price Ticker

A premium asset screen where each changed price digit rolls independently and currency changes reshape the symbol in place.

$9 for this animation

Checkout opens soon. Leave your email and we will tell you the moment you can buy it.

One email when checkout opens. No spam.

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.

npx nativeanimation add odometer-price-ticker

About this animation

A premium asset screen where each changed price digit rolls independently and currency changes reshape the symbol in place.

How it works

  1. The component measures its own container and positions the asset summary, ticker, currency control, chart, holdings, and actions as proportions of that space.
  2. One continuous Reanimated shared value drives every part of a price transition: right-to-left digit staggering, vertical travel, motion-blur ghosts, color, symbol morph, and a brief highlight confined to changed digits.
  3. Price text is committed first, then useLayoutEffect starts the spring so the outgoing and incoming digits are always from the same render frame.
  4. The imperative API updates a USD base value or selects USD, EUR, or GBP. Currency selection converts the current base value with configurable rates.
  5. Reduced Motion replaces the spring and vertical travel with a short crossfade while preserving the state change and color cue.

Install

npx expo install @expo/vector-icons expo-linear-gradient react-native-reanimated

Usage

import OdometerPriceTicker from './OdometerPriceTicker';

export function AssetScreen() {
  return <OdometerPriceTicker />;
}

Drive live prices and customize the visual personality:

import { useRef } from 'react';
import OdometerPriceTicker, {
  type OdometerPriceTickerRef,
} from './OdometerPriceTicker';

export function LiveAssetScreen() {
  const tickerRef = useRef<OdometerPriceTickerRef>(null);

  return (
    <OdometerPriceTicker
      ref={tickerRef}
      assetName="Summit Growth"
      assetSymbol="SMTG"
      positiveColor="#65E8B1"
      negativeColor="#FF7183"
      rates={{ USD: 1, EUR: 0.92, GBP: 0.78 }}
      onCurrencyChange={(currency) => trackCurrency(currency)}
    />
  );
}

Call tickerRef.current?.setValue(186.02) with the new USD base value, or tickerRef.current?.selectCurrency('EUR') to change currency.

Props

PropTypeDefaultDescription
initialValuenumber184.72Initial value expressed in USD.
initialCurrency'USD' | 'EUR' | 'GBP''USD'Initially selected currency.
ratesRecord<CurrencyCode, number>{ USD: 1, EUR: 0.92, GBP: 0.78 }Conversion rates relative to USD.
assetNamestring'Aster Index'Asset display name.
assetSymbolstring'ASTX'Short asset symbol.
assetDescriptionstring'Global technology fund'Supporting market label.
changeLabelstring'+2.4%'Session change shown beside the asset.
backgroundColorstring'#0E1118'Main surface color.
surfaceColorstring'#171B24'Raised card and control color.
textColorstring'#F5F7FA'Primary text color.
mutedColorstring'#9299A8'Secondary text color.
positiveColorstring'#37E6A1'Upward movement and accent color.
negativeColorstring'#FF6B7A'Downward movement color.
fontFamilystringSystem fontInterface copy font.
mediumFontFamilystringSystem fontLabels and controls font.
monoFontFamilystringSystem fontRolling price and numerical data font.
onCurrencyChange(currency) => void—Called after currency selection.
onValueChange(value) => void—Called after the USD base value changes.
styleStyleProp<ViewStyle>—Optional root-container style.
testIDstring—Test identifier for the root container.

The forwarded ref exposes setValue(value) and selectCurrency(currency).

Compatibility

  • Expo SDK 57
  • React Native 0.86
  • Reanimated 4.5
  • iOS: supported, not yet verified on a device
  • Android: supported, not yet verified on a device
  • Web: supported, not visually verified in this environment
  • Works in Expo Go because its native dependencies are included in the SDK

Accessibility

The segmented control exposes a labeled radio for each currency, all buttons have explicit roles and labels, and the current price is announced as one coherent value. With Reduced Motion enabled, price and symbol changes crossfade for 180 ms without rolling, scaling, or glow movement.

Why this one

Most market tickers treat the full price as one sliding label. This version preserves place value: only changed characters move and receive a restrained highlight, their spring starts at the rightmost digit and travels left, direction communicates gain or loss, and the currency sign morphs within the same transition. The animation sits inside a credible, responsive investment screen with Aster's layered four-point mark, live chart context, and useful portfolio details rather than an isolated component showcase.

More animations