react-native-laminar 1.4.2 → 1.4.4

package/src/view/glyph-run.tsx

@@ -13,6 +13,12 @@ const rowStyle = {
   alignSelf: "flex-start",
 } as const;
 
+const textRowStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "flex-start",
+} as const;
+
 const rowAlignStyles = {
   left: { alignSelf: "flex-start" },
   center: { alignSelf: "center" },
@@ -24,6 +30,8 @@ export const GlyphRun = React.memo(
   ({
     glyphs,
     layoutTransition,
+    leadingLayoutTransition,
+    leadingLayoutGroup = false,
     enterTransition,
     elementEnterTransition,
     exitTransition,
@@ -35,6 +43,8 @@ export const GlyphRun = React.memo(
   }: Readonly<{
     glyphs: readonly GlyphToken[];
     layoutTransition?: ComplexAnimationBuilder;
+    leadingLayoutTransition?: ComplexAnimationBuilder;
+    leadingLayoutGroup?: boolean;
     enterTransition?: EntryExitAnimationFunction;
     elementEnterTransition?: EntryExitAnimationFunction;
     exitTransition?: EntryExitAnimationFunction;
@@ -43,41 +53,60 @@ export const GlyphRun = React.memo(
     align: LaminarAlign;
     textStyle?: StyleProp<TextStyle>;
     className?: string;
-  }>) => (
-    // each token keeps its own view so reanimated can animate only changed content
+  }>) => {
+    // The leading token is always first. Keep it outside the text row so its
+    // appearance moves the text as one unit instead of reflowing every glyph.
+    const leadingGlyph = glyphs[0]?.kind === "element" ? glyphs[0] : undefined;
+    const textGlyphs = leadingGlyph ? glyphs.slice(1) : glyphs;
+    const shouldGroupText =
+      Boolean(leadingGlyph) || Boolean(leadingLayoutTransition) || leadingLayoutGroup;
+
+    const renderTextGlyph = (glyph: GlyphToken) =>
+      glyph.kind === "text" ? (
+        <Animated.Text
+          key={glyph.id}
+          layout={layoutTransition}
+          entering={enterTransition}
+          exiting={exitTransition}
+          style={textStyle}
+          className={className}
+        >
+          {glyph.value}
+        </Animated.Text>
+      ) : null;
+
+    const textRow = (
+      <Animated.View
+        key="text-row"
+        layout={leadingLayoutTransition}
+        style={textRowStyle}
+      >
+        {textGlyphs.map(renderTextGlyph)}
+      </Animated.View>
+    );
+
+    return (
       <View style={[rowStyle, rowAlignStyles[align]]}>
-        {/* glyph ids decide what swaps, layout handles the row reflow */}
-        {glyphs.map((glyph, glyphIndex) =>
-          glyph.kind === "element" ? (
-            <Animated.View
-              key={glyph.id}
-              layout={layoutTransition}
-              entering={elementEnterTransition ?? enterTransition}
-              exiting={elementExitTransition ?? exitTransition}
-              style={[
-                { alignItems: "center", justifyContent: "center" },
-                glyphIndex === 0 && (leadingGap ?? 0) > 0
-                  ? { marginRight: leadingGap }
-                  : undefined,
-              ]}
-            >
-              {glyph.element}
-            </Animated.View>
-          ) : (
-            <Animated.Text
-              key={glyph.id}
-              layout={layoutTransition}
-              entering={enterTransition}
-              exiting={exitTransition}
-              style={textStyle}
-              className={className}
-            >
-              {glyph.value}
-            </Animated.Text>
-          )
-        )}
+        {leadingGlyph ? (
+          <Animated.View
+            key={leadingGlyph.id}
+            // leading elements own their enter/exit geometry; generic layout
+            // motion here would compete with those transitions
+            layout={undefined}
+            entering={elementEnterTransition ?? enterTransition}
+            exiting={elementExitTransition ?? exitTransition}
+            style={[
+              { alignItems: "center", justifyContent: "center" },
+              (leadingGap ?? 0) > 0 ? { marginRight: leadingGap } : undefined,
+            ]}
+          >
+            {leadingGlyph.element}
+          </Animated.View>
+        ) : null}
+        {shouldGroupText ? textRow : textGlyphs.map(renderTextGlyph)}
       </View>
-    )
+    );
+  }
 );
 
 GlyphRun.displayName = "GlyphRun";

package/src/view/morph-viewport.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import type { StyleProp, ViewStyle } from "react-native";
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
 import { View } from "react-native";
 import Animated from "react-native-reanimated";
 import type { LaminarAlign } from "../types";
@@ -52,6 +52,7 @@ type MorphViewportProps = {
   readonly align: LaminarAlign;
   readonly containerStyle?: StyleProp<ViewStyle>;
   readonly animatedWidthStyle?: React.ComponentProps<typeof Animated.View>["style"];
+  readonly onVisibleLayout?: (event: LayoutChangeEvent) => void;
   readonly measurement?: React.ReactNode;
   readonly children: React.ReactNode;
 };
@@ -64,6 +65,7 @@ export const MorphViewport = React.memo(
     align,
     containerStyle,
     animatedWidthStyle,
+    onVisibleLayout,
     measurement,
     children,
   }: MorphViewportProps) => {
@@ -91,7 +93,10 @@ export const MorphViewport = React.memo(
             >
               {measurement}
             </View>
-            <Animated.View style={[resolvedViewportStyle, animatedWidthStyle]}>
+            <Animated.View
+              onLayout={onVisibleLayout}
+              style={[resolvedViewportStyle, animatedWidthStyle]}
+            >
               {children}
             </Animated.View>
           </>

package/src/view/text-run.tsx

@@ -15,8 +15,10 @@ type TextRunProps = {
   readonly motionRecipe: MotionRecipe;
   readonly align: LaminarAlign;
   readonly leading?: ReactNode;
+  readonly leadingLayoutGroup?: boolean;
   readonly leadingKey?: string | number;
   readonly leadingGap?: number;
+  readonly ready?: boolean;
   readonly textStyle?: StyleProp<TextStyle>;
   readonly className?: string;
 };
@@ -28,27 +30,65 @@ export const TextRun = React.memo(
     motionRecipe,
     align,
     leading,
+    leadingLayoutGroup = false,
     leadingKey,
     leadingGap = 0,
+    ready = true,
     textStyle,
     className,
   }: TextRunProps) => {
     // namespace ids per instance so repeated strings do not collide
     const scopeId = useId();
-    const lastValueRef = useRef(value);
-    const lastLeadingPresenceRef = useRef(Boolean(leading));
-    const lastLeadingKeyRef = useRef(leadingKey);
+    const hasDisplayedRef = useRef(false);
+    const displayedValueRef = useRef(value);
+    const displayedLeadingRef = useRef(leading);
+    const displayedLeadingKeyRef = useRef(leadingKey);
+    const displayedLeadingGapRef = useRef(leadingGap);
+    const shouldDisplayTarget = ready || !hasDisplayedRef.current;
+    const visibleValue = shouldDisplayTarget
+      ? value
+      : displayedValueRef.current;
+    const visibleLeading = shouldDisplayTarget
+      ? leading
+      : displayedLeadingRef.current;
+    const visibleLeadingKey = shouldDisplayTarget
+      ? leadingKey
+      : displayedLeadingKeyRef.current;
+    const visibleLeadingGap = shouldDisplayTarget
+      ? leadingGap
+      : displayedLeadingGapRef.current;
+
+    if (shouldDisplayTarget) {
+      hasDisplayedRef.current = true;
+      displayedValueRef.current = value;
+      displayedLeadingRef.current = leading;
+      displayedLeadingKeyRef.current = leadingKey;
+      displayedLeadingGapRef.current = leadingGap;
+    }
+
+    const lastValueRef = useRef(visibleValue);
+    const lastLeadingPresenceRef = useRef(Boolean(visibleLeading));
+    const lastLeadingKeyRef = useRef(visibleLeadingKey);
     const hasAnimatedRef = useRef(false);
     const isLeadingSwap =
-      Boolean(leading) &&
+      Boolean(visibleLeading) &&
       lastLeadingPresenceRef.current &&
-      leadingKey !== lastLeadingKeyRef.current;
+      visibleLeadingKey !== lastLeadingKeyRef.current;
+    const isLeadingChange =
+      Boolean(visibleLeading) !== lastLeadingPresenceRef.current ||
+      (Boolean(visibleLeading) &&
+        visibleLeadingKey !== lastLeadingKeyRef.current);
     // update the worklet flag after commit so render never writes a shared value
     const leadingSwapProgress = useSharedValue(0);
     useLayoutEffect(() => {
       leadingSwapProgress.value = isLeadingSwap ? 1 : 0;
     }, [isLeadingSwap, leadingSwapProgress]);
-    const glyphs = useTextGlyphs(value, scopeId, leading, leadingKey);
+    const glyphs = useTextGlyphs(
+      visibleValue,
+      scopeId,
+      visibleLeading,
+      visibleLeadingKey
+    );
     const elementEnterTransition = useMemo(
       () =>
         createLeadingEnterTransition({
@@ -62,11 +102,11 @@ export const TextRun = React.memo(
         createLeadingExitTransition({
           durationMs: motionRecipe.durationMs,
           easing: motionRecipe.easing,
-          leadingGap,
+          leadingGap: visibleLeadingGap,
           scale: leadingSwapProgress,
         }),
       [
-        leadingGap,
+        visibleLeadingGap,
         leadingSwapProgress,
         motionRecipe.durationMs,
         motionRecipe.easing,
@@ -75,14 +115,14 @@ export const TextRun = React.memo(
 
     // mark the first value as settled and later changes as eligible for motion
     if (
-      value !== lastValueRef.current ||
-      Boolean(leading) !== lastLeadingPresenceRef.current ||
-      leadingKey !== lastLeadingKeyRef.current
+      visibleValue !== lastValueRef.current ||
+      Boolean(visibleLeading) !== lastLeadingPresenceRef.current ||
+      visibleLeadingKey !== lastLeadingKeyRef.current
     ) {
       hasAnimatedRef.current = true;
-      lastValueRef.current = value;
-      lastLeadingPresenceRef.current = Boolean(leading);
-      lastLeadingKeyRef.current = leadingKey;
+      lastValueRef.current = visibleValue;
+      lastLeadingPresenceRef.current = Boolean(visibleLeading);
+      lastLeadingKeyRef.current = visibleLeadingKey;
     }
 
     const hasAnimated = hasAnimatedRef.current;
@@ -93,6 +133,10 @@ export const TextRun = React.memo(
         layoutTransition={
           hasAnimated ? motionRecipe.layoutTransition : undefined
         }
+        leadingLayoutTransition={
+          isLeadingChange ? motionRecipe.layoutTransition : undefined
+        }
+        leadingLayoutGroup={leadingLayoutGroup}
         enterTransition={
           hasAnimatedRef.current
             ? motionRecipe.enterTransition
@@ -103,7 +147,7 @@ export const TextRun = React.memo(
         }
         exitTransition={motionRecipe.exitTransition}
         elementExitTransition={elementExitTransition}
-        leadingGap={leadingGap}
+        leadingGap={visibleLeadingGap}
         align={align}
         textStyle={textStyle}
         className={className}