Одометр

Показывает цену или метрику как механический счётчик. При изменении значения крутятся только те разряды, что поменялись: вверх, если число выросло, и вниз, если упало. Новые разряды и символы валюты появляются из размытия с пружинкой.

Форматирование идёт через Intl.NumberFormat, поэтому валюты, разделители и знаки после запятой настраиваются стандартными опциями. Барабаны крутятся на UI-потоке Reanimated; размытие работает в вебе и на Android. При «Уменьшении движения» число меняется сразу. Работает на iOS, Android и в вебе.

Вручную

npm install react-native-reanimated react-native-worklets

pnpm add react-native-reanimated react-native-worklets

yarn add react-native-reanimated react-native-worklets

bun add react-native-reanimated react-native-worklets

import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface OdometerProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function Odometer({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: OdometerProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Использование

import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface OdometerProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function Odometer({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: OdometerProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Размер и цвет цифр задаются через style, как у обычного Text.

Пропсы