Digit Swap

1import React, { useEffect, useRef, useState } from "react"
2import { Text, View, type TextStyle } from "react-native"
3import Animated, {
4  FadeIn,
5  FadeOut,
6  useAnimatedStyle,
7  useReducedMotion,
8  useSharedValue,
9  withDelay,
10  withTiming,
11  Easing,
12} from "react-native-reanimated"
13export interface DigitSwapProps {
14  value: string | number
15  animationKey?: string | number
16  direction?: "up" | "down"
17  duration?: number
18  stagger?: number
19  suffixLength?: number
20  color?: string
21  suffixColor?: string
22  letterSpacing?: number
23  fontSize?: number
24  fontFamily?: string
25  testID?: string
26}
27function Glyph({
28  glyph,
29  previous,
30  index,
31  direction,
32  duration,
33  stagger,
34  height,
35  width,
36  color,
37  fontFamily,
38  letterSpacing,
39  replay,
40}: {
41  glyph: string
42  previous: string
43  index: number
44  direction: "up" | "down"
45  duration: number
46  stagger: number
47  height: number
48  width: number
49  color: string
50  fontFamily?: string
51  letterSpacing: number
52  replay: boolean
53}) {
54  const reduced = useReducedMotion(),
55    progress = useSharedValue(1)
56  useEffect(() => {
57    if (glyph === previous && !replay) return
58    progress.value = 0
59    progress.value = reduced
60      ? 1
61      : withDelay(
62          index * stagger * 1000,
63          withTiming(1, {
64            duration: duration * 1000,
65            easing: Easing.bezier(0.16, 1, 0.3, 1),
66          })
67        )
68  }, [glyph, previous, replay, index, stagger, duration, reduced, progress])
69  const sign = direction === "up" ? 1 : -1
70  const entering = useAnimatedStyle(() => ({
71    opacity: progress.value,
72    transform: [{ translateY: sign * height * 0.45 * (1 - progress.value) }],
73  }))
74  const exiting = useAnimatedStyle(() => ({
75    opacity: 1 - progress.value,
76    transform: [{ translateY: -sign * height * 0.45 * progress.value }],
77  }))
78  const text = {
79    position: "absolute" as const,
80    width,
81    textAlign: "center" as const,
82    lineHeight: height,
83    fontSize: height / 1.1,
84    color,
85    fontFamily,
86    letterSpacing,
87    fontVariant: ["tabular-nums"] as TextStyle["fontVariant"],
88  }
89  return (
90    <View style={{ width, height, overflow: "hidden" }}>
91      <Animated.Text style={[text, exiting]}>{previous}</Animated.Text>
92      <Animated.Text style={[text, entering]}>{glyph}</Animated.Text>
93    </View>
94  )
95}
96export function DigitSwap({
97  value,
98  animationKey,
99  direction = "up",
100  duration = 0.18,
101  stagger = 0.006,
102  suffixLength = 0,
103  color = "#fff",
104  suffixColor = color,
105  letterSpacing = 0,
106  fontSize = 16,
107  fontFamily = "monospace",
108  testID,
109}: DigitSwapProps) {
110  const current = String(value),
111    previous = useRef(current),
112    previousKey = useRef(animationKey)
113  const [glyphWidth, setGlyphWidth] = useState(fontSize * 0.6)
114  const old = previous.current
115  const replay = previousKey.current !== animationKey
116  useEffect(() => {
117    previous.current = current
118    previousKey.current = animationKey
119  }, [current, animationKey])
120  return (
121    <View
122      testID={testID}
123      accessible
124      accessibilityLabel={current}
125      style={{ flexDirection: "row", alignItems: "center" }}
126    >
127      <Text aria-hidden accessibilityElementsHidden importantForAccessibility="no-hide-descendants" onLayout={({ nativeEvent }) => setGlyphWidth(nativeEvent.layout.width)} style={{ position: "absolute", opacity: 0, fontFamily, fontSize }}>0</Text>
128      {[...current].map((glyph, i) => glyph === " " ? <View key={i} style={{ width: glyphWidth * 0.7 }} /> : (
129          <Glyph
130            key={`${i}-${animationKey ?? "stable"}`}
131            glyph={glyph}
132            previous={old[i] ?? ""}
133            index={i}
134            direction={direction}
135            duration={duration}
136            stagger={stagger}
137            height={fontSize * 1.1}
138            width={glyphWidth}
139            color={i >= current.length - suffixLength ? suffixColor : color}
140            fontFamily={fontFamily}
141            letterSpacing={letterSpacing}
142            replay={replay}
143          />
144        )
145      )}
146    </View>
147  )
148}