react-native-laminar 1.4.2 → 1.4.3

package/src/index.tsx

@@ -79,7 +79,13 @@ export const Laminar = React.memo(function Laminar({
       textStyle,
       variant,
     ]);
-    const { captureLayout, animatedWidthStyle, shouldMeasure } =
+    const {
+      captureLayout,
+      captureVisibleLayout,
+      animatedWidthStyle,
+      isReady: isAutoSizeReady,
+      shouldMeasure,
+    } =
       useInlineAutoWidth({
         enabled: autoSize,
         driveToWidth: motionRecipe.driveNumber,
@@ -103,9 +109,11 @@ export const Laminar = React.memo(function Laminar({
         align={align}
         containerStyle={containerStyle}
         animatedWidthStyle={animatedWidthStyle}
+        onVisibleLayout={autoSize ? captureVisibleLayout : undefined}
         measurement={
           shouldMeasure ? (
             <View
+              key={measurementKey}
               onLayout={captureLayout}
               style={{ flexDirection: "row", alignSelf: "flex-start" }}
             >
@@ -157,6 +165,7 @@ export const Laminar = React.memo(function Laminar({
             leading={resolvedLeading}
             leadingKey={resolvedLeadingKey}
             leadingGap={leadingGap}
+            ready={!autoSize || isAutoSizeReady}
             textStyle={textStyle}
             className={className}
           />

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

@@ -17,6 +17,7 @@ type TextRunProps = {
   readonly leading?: ReactNode;
   readonly leadingKey?: string | number;
   readonly leadingGap?: number;
+  readonly ready?: boolean;
   readonly textStyle?: StyleProp<TextStyle>;
   readonly className?: string;
 };
@@ -30,25 +31,58 @@ export const TextRun = React.memo(
     leading,
     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;
     // 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 +96,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 +109,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;
@@ -103,7 +137,7 @@ export const TextRun = React.memo(
         }
         exitTransition={motionRecipe.exitTransition}
         elementExitTransition={elementExitTransition}
-        leadingGap={leadingGap}
+        leadingGap={visibleLeadingGap}
         align={align}
         textStyle={textStyle}
         className={className}