react-native-laminar 1.0.0

package/src/view/number-lane.tsx

@@ -0,0 +1,128 @@
+import React, { useMemo } from "react";
+import { Text, type StyleProp, type TextStyle } from "react-native";
+import Animated from "react-native-reanimated";
+import { isAsciiDigit } from "../model/display-units";
+import { createShiftTransition } from "../motion/entry-exit-builders";
+import type { MotionRecipe, NumericFlowDirection } from "../types";
+
+const laneStyle = {
+  position: "relative",
+  alignSelf: "flex-start",
+} as const;
+
+const laneProbeStyle = {
+  opacity: 0,
+} as const;
+
+const laneTokenStyle = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+} as const;
+
+type NumberLaneProps = {
+  readonly unit: string;
+  readonly tokenKey: number;
+  readonly isLead: boolean;
+  readonly hasAnimated: boolean;
+  readonly delayMs: number;
+  readonly direction: NumericFlowDirection;
+  readonly travelDistance: number;
+  readonly motionRecipe: MotionRecipe;
+  readonly textStyle?: StyleProp<TextStyle>;
+};
+
+export const NumberLane = React.memo(
+  ({
+    unit,
+    tokenKey,
+    isLead,
+    hasAnimated,
+    delayMs,
+    direction,
+    travelDistance,
+    motionRecipe,
+    textStyle,
+  }: NumberLaneProps) => {
+    const usesDigitTravel = isAsciiDigit(unit);
+    const verticalOffset =
+      direction > 0
+        ? travelDistance
+        : direction < 0
+          ? -travelDistance
+          : 0;
+
+    const enterTransition = useMemo(
+      () =>
+        createShiftTransition({
+          delayMs,
+          durationMs: motionRecipe.durationMs,
+          easing: motionRecipe.easing,
+          fromOpacity: 0,
+          toOpacity: 1,
+          fromTranslateY: usesDigitTravel ? verticalOffset : 0,
+          toTranslateY: 0,
+          fromScale: 0.6,
+          toScale: 1,
+        }),
+      [
+        delayMs,
+        motionRecipe.durationMs,
+        motionRecipe.easing,
+        usesDigitTravel,
+        verticalOffset,
+      ]
+    );
+
+    const exitTransition = useMemo(
+      () =>
+        createShiftTransition({
+          delayMs,
+          durationMs: motionRecipe.durationMs,
+          easing: motionRecipe.easing,
+          fromOpacity: 1,
+          toOpacity: 0,
+          fromTranslateY: 0,
+          toTranslateY: usesDigitTravel ? -verticalOffset : 0,
+          fromScale: 1,
+          toScale: 0.6,
+        }),
+      [
+        delayMs,
+        motionRecipe.durationMs,
+        motionRecipe.easing,
+        usesDigitTravel,
+        verticalOffset,
+      ]
+    );
+
+    if (isLead) {
+      return <Text style={textStyle}>{unit}</Text>;
+    }
+
+    return (
+      <Animated.View
+        layout={motionRecipe.layoutTransition}
+        entering={hasAnimated ? motionRecipe.enterTransition : undefined}
+        exiting={motionRecipe.exitTransition}
+        style={laneStyle}
+      >
+        {/* this hidden copy owns layout while the animated token swaps on top */}
+        <Text style={[textStyle, laneProbeStyle]}>
+          {unit}
+        </Text>
+
+        <Animated.Text
+          key={`token:${tokenKey}`}
+          entering={hasAnimated ? enterTransition : undefined}
+          exiting={exitTransition}
+          style={[textStyle, laneTokenStyle]}
+        >
+          {unit}
+        </Animated.Text>
+      </Animated.View>
+    );
+  }
+);
+
+NumberLane.displayName = "NumberLane";

package/src/view/number-run.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo, useRef } from "react";
+import { type StyleProp, type TextStyle, View } from "react-native";
+import { useNumericLanes } from "../hooks/use-numeric-lanes";
+import type { MotionRecipe } from "../types";
+import { NumberLane } from "./number-lane";
+
+const rowStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "flex-start",
+} as const;
+
+type NumberRunProps = {
+  readonly value: string;
+  readonly motionRecipe: MotionRecipe;
+  readonly fontSize?: number;
+  readonly textStyle?: StyleProp<TextStyle>;
+  readonly staggerMs: number;
+};
+
+export const NumberRun = React.memo(
+  ({
+    value,
+    motionRecipe,
+    fontSize,
+    textStyle,
+    staggerMs,
+  }: Readonly<NumberRunProps>) => {
+    const { units, laneKeys, direction, leadLength } = useNumericLanes(value);
+    const lastValueRef = useRef(value);
+    const hasAnimatedRef = useRef(false);
+
+    // skip enter animations on first paint so the number feels settled
+    if (value !== lastValueRef.current) {
+      hasAnimatedRef.current = true;
+      lastValueRef.current = value;
+    }
+
+    const travelDistance = useMemo(
+      () => Math.max(8, Math.round((fontSize ?? 16) * 0.4)),
+      [fontSize]
+    );
+    const hasAnimated = hasAnimatedRef.current;
+
+    return (
+      <View style={rowStyle}>
+        {units.map((unit, index) => {
+          const inLead = index < leadLength;
+          const laneKey = inLead
+            ? `lead:${index}`
+            : `lane:${units.length - 1 - index}`;
+
+          return (
+            <NumberLane
+              key={laneKey}
+              unit={unit}
+              tokenKey={laneKeys[index]}
+              isLead={inLead}
+              hasAnimated={hasAnimated}
+              delayMs={index * staggerMs}
+              direction={direction}
+              travelDistance={travelDistance}
+              motionRecipe={motionRecipe}
+              textStyle={textStyle}
+            />
+          );
+        })}
+      </View>
+    );
+  }
+);
+
+NumberRun.displayName = "NumberRun";

package/src/view/text-run.tsx

@@ -0,0 +1,40 @@
+import React, { useId, useRef } from "react";
+import type { StyleProp, TextStyle } from "react-native";
+import { useTextGlyphs } from "../hooks/use-text-glyphs";
+import type { MotionRecipe } from "../types";
+import { GlyphRun } from "./glyph-run";
+
+type TextRunProps = {
+  readonly value: string;
+  readonly motionRecipe: MotionRecipe;
+  readonly textStyle?: StyleProp<TextStyle>;
+};
+
+export const TextRun = React.memo(
+  ({ value, motionRecipe, textStyle }: TextRunProps) => {
+    // namespace ids per instance so repeated strings do not collide
+    const scopeId = useId();
+    const glyphs = useTextGlyphs(value, scopeId);
+    const lastValueRef = useRef(value);
+    const hasAnimatedRef = useRef(false);
+
+    if (value !== lastValueRef.current) {
+      hasAnimatedRef.current = true;
+      lastValueRef.current = value;
+    }
+
+    return (
+      <GlyphRun
+        glyphs={glyphs}
+        layoutTransition={motionRecipe.layoutTransition}
+        enterTransition={
+          hasAnimatedRef.current ? motionRecipe.enterTransition : undefined
+        }
+        exitTransition={motionRecipe.exitTransition}
+        textStyle={textStyle}
+      />
+    );
+  }
+);
+
+TextRun.displayName = "TextRun";