react-native-laminar 1.4.2 → 1.4.3

package/lib/module/index.js

@@ -62,7 +62,9 @@ export const Laminar = /*#__PURE__*/React.memo(function Laminar({
   }, [leadingGap, resolvedLeading, resolvedLeadingKey, resolvedValue, textStyle, variant]);
   const {
     captureLayout,
+    captureVisibleLayout,
     animatedWidthStyle,
+    isReady: isAutoSizeReady,
     shouldMeasure
   } = useInlineAutoWidth({
     enabled: autoSize,
@@ -82,6 +84,7 @@ export const Laminar = /*#__PURE__*/React.memo(function Laminar({
     align: align,
     containerStyle: containerStyle,
     animatedWidthStyle: animatedWidthStyle,
+    onVisibleLayout: autoSize ? captureVisibleLayout : undefined,
     measurement: shouldMeasure ? /*#__PURE__*/_jsxs(View, {
       onLayout: captureLayout,
       style: {
@@ -99,7 +102,7 @@ export const Laminar = /*#__PURE__*/React.memo(function Laminar({
         style: textStyle,
         children: normalizeDisplayUnit(unit)
       }, `${unit}-${index}`))]
-    }) : undefined,
+    }, measurementKey) : undefined,
     children: variant === "slots" ? /*#__PURE__*/_jsx(SlotsRun, {
       value: resolvedValue,
       motionRecipe: motionRecipe,
@@ -123,6 +126,7 @@ export const Laminar = /*#__PURE__*/React.memo(function Laminar({
       leading: resolvedLeading,
       leadingKey: resolvedLeadingKey,
       leadingGap: leadingGap,
+      ready: !autoSize || isAutoSizeReady,
       textStyle: textStyle,
       className: className
     })

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","Text","View","useInlineAutoWidth","useMorphMotion","useMorphTextStyle","normalizeDisplayUnit","splitDisplayUnits","MorphViewport","NumberRun","SlotsRun","TextRun","jsx","_jsx","jsxs","_jsxs","Laminar","memo","text","variant","fontSize","color","align","className","leading","leadingKey","leadingGap","style","containerStyle","fontStyle","animationDuration","animationPreset","stagger","autoSize","clipToBounds","resolvedValue","String","leadingMap","isLeadingMap","undefined","resolvedLeading","resolvedLeadingKey","motionRecipe","staggerMs","textStyle","measurementKey","useMemo","flattenedStyle","flatten","JSON","stringify","fontFamily","fontWeight","fontVariant","letterSpacing","lineHeight","textTransform","Boolean","captureLayout","animatedWidthStyle","shouldMeasure","enabled","driveToWidth","driveNumber","measuredValue","map","join","measurement","onLayout","flexDirection","alignSelf","children","alignItems","justifyContent","marginRight","unit","index","value","isValidElement","Array","isArray"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","Text","View","useInlineAutoWidth","useMorphMotion","useMorphTextStyle","normalizeDisplayUnit","splitDisplayUnits","MorphViewport","NumberRun","SlotsRun","TextRun","jsx","_jsx","jsxs","_jsxs","Laminar","memo","text","variant","fontSize","color","align","className","leading","leadingKey","leadingGap","style","containerStyle","fontStyle","animationDuration","animationPreset","stagger","autoSize","clipToBounds","resolvedValue","String","leadingMap","isLeadingMap","undefined","resolvedLeading","resolvedLeadingKey","motionRecipe","staggerMs","textStyle","measurementKey","useMemo","flattenedStyle","flatten","JSON","stringify","fontFamily","fontWeight","fontVariant","letterSpacing","lineHeight","textTransform","Boolean","captureLayout","captureVisibleLayout","animatedWidthStyle","isReady","isAutoSizeReady","shouldMeasure","enabled","driveToWidth","driveNumber","measuredValue","map","join","onVisibleLayout","measurement","onLayout","flexDirection","alignSelf","children","alignItems","justifyContent","marginRight","unit","index","value","ready","isValidElement","Array","isArray"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/view/morph-viewport.js

@@ -57,6 +57,7 @@ export const MorphViewport = /*#__PURE__*/React.memo(({
   align,
   containerStyle,
   animatedWidthStyle,
+  onVisibleLayout,
   measurement,
   children
 }) => {
@@ -75,6 +76,7 @@ export const MorphViewport = /*#__PURE__*/React.memo(({
         style: measuredContentStyle,
         children: measurement
       }), /*#__PURE__*/_jsx(Animated.View, {
+        onLayout: onVisibleLayout,
         style: [resolvedViewportStyle, animatedWidthStyle],
         children: children
       })]

package/lib/module/view/morph-viewport.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","View","Animated","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","shellStyle","position","alignSelf","viewportStyle","measuredContentStyle","left","top","opacity","flexShrink","clippedViewportStyle","overflow","unclippedViewportStyle","fullWidthViewportStyle","width","shellAlignStyles","center","right","viewportAlignStyles","alignItems","MorphViewport","memo","autoSize","clipToBounds","align","containerStyle","animatedWidthStyle","measurement","children","resolvedViewportStyle","style","accessibilityElementsHidden","collapsable","importantForAccessibility","pointerEvents","displayName"],"sourceRoot":"../../../src","sources":["view/morph-viewport.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,IAAI,QAAQ,cAAc;AACnC,OAAOC,QAAQ,MAAM,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,MAAMC,UAAU,GAAG;EACjBC,QAAQ,EAAE,UAAU;EACpBC,SAAS,EAAE;AACb,CAAU;AAEV,MAAMC,aAAa,GAAG;EACpBD,SAAS,EAAE;AACb,CAAU;AAEV,MAAME,oBAA+B,GAAG;EACtCH,QAAQ,EAAE,UAAU;EACpBI,IAAI,EAAE,CAAC;EACPC,GAAG,EAAE,CAAC;EACNC,OAAO,EAAE,CAAC;EACVL,SAAS,EAAE,YAAY;EACvBM,UAAU,EAAE;AACd,CAAC;AAED,MAAMC,oBAA+B,GAAG;EACtCC,QAAQ,EAAE;AACZ,CAAC;AAED,MAAMC,sBAAiC,GAAG;EACxCD,QAAQ,EAAE;AACZ,CAAC;AAED,MAAME,sBAAiC,GAAG;EACxCC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,gBAAiD,GAAG;EACxDT,IAAI,EAAE;IAAEH,SAAS,EAAE;EAAa,CAAC;EACjCa,MAAM,EAAE;IAAEb,SAAS,EAAE;EAAS,CAAC;EAC/Bc,KAAK,EAAE;IAAEd,SAAS,EAAE;EAAW;AACjC,CAAC;AAED,MAAMe,mBAAoD,GAAG;EAC3DZ,IAAI,EAAE;IAAEa,UAAU,EAAE;EAAa,CAAC;EAClCH,MAAM,EAAE;IAAEG,UAAU,EAAE;EAAS,CAAC;EAChCF,KAAK,EAAE;IAAEE,UAAU,EAAE;EAAW;AAClC,CAAC;AAYD;AACA,OAAO,MAAMC,aAAa,gBAAG7B,KAAK,CAAC8B,IAAI,CACrC,CAAC;EACCC,QAAQ;EACRC,YAAY;EACZC,KAAK;EACLC,cAAc;EACdC,kBAAkB;EAClBC,WAAW;EACXC;AACkB,CAAC,KAAK;EACxB;EACA,MAAMC,qBAAqB,GAAGrC,OAAO,CACnC,MAAM,CACJY,aAAa,EACbc,mBAAmB,CAACM,KAAK,CAAC,EAC1BD,YAAY,GAAGb,oBAAoB,GAAGE,sBAAsB,CAC7D,EACD,CAACY,KAAK,EAAED,YAAY,CACtB,CAAC;;EAED;EACA,oBACE3B,IAAA,CAACH,IAAI;IAACqC,KAAK,EAAE,CAAC7B,UAAU,EAAEc,gBAAgB,CAACS,KAAK,CAAC,EAAEC,cAAc,CAAE;IAAAG,QAAA,EAChEN,QAAQ,gBACPtB,KAAA,CAAAF,SAAA;MAAA8B,QAAA,gBACEhC,IAAA,CAACH,IAAI;QACHsC,2BAA2B;QAC3BC,WAAW,EAAE,KAAM;QACnBC,yBAAyB,EAAC,qBAAqB;QAC/CC,aAAa,EAAC,MAAM;QACpBJ,KAAK,EAAEzB,oBAAqB;QAAAuB,QAAA,EAE3BD;MAAW,CACR,CAAC,eACP/B,IAAA,CAACF,QAAQ,CAACD,IAAI;QAACqC,KAAK,EAAE,CAACD,qBAAqB,EAAEH,kBAAkB,CAAE;QAAAE,QAAA,EAC/DA;MAAQ,CACI,CAAC;IAAA,CAChB,CAAC,gBAEHhC,IAAA,CAACH,IAAI;MAACqC,KAAK,EAAE,CAACD,qBAAqB,EAAEhB,sBAAsB,CAAE;MAAAe,QAAA,EAC1DA;IAAQ,CACL;EACP,CACG,CAAC;AAEX,CACF,CAAC;AAEDR,aAAa,CAACe,WAAW,GAAG,eAAe","ignoreList":[]}
+{"version":3,"names":["React","useMemo","View","Animated","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","shellStyle","position","alignSelf","viewportStyle","measuredContentStyle","left","top","opacity","flexShrink","clippedViewportStyle","overflow","unclippedViewportStyle","fullWidthViewportStyle","width","shellAlignStyles","center","right","viewportAlignStyles","alignItems","MorphViewport","memo","autoSize","clipToBounds","align","containerStyle","animatedWidthStyle","onVisibleLayout","measurement","children","resolvedViewportStyle","style","accessibilityElementsHidden","collapsable","importantForAccessibility","pointerEvents","onLayout","displayName"],"sourceRoot":"../../../src","sources":["view/morph-viewport.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,IAAI,QAAQ,cAAc;AACnC,OAAOC,QAAQ,MAAM,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAG/C,MAAMC,UAAU,GAAG;EACjBC,QAAQ,EAAE,UAAU;EACpBC,SAAS,EAAE;AACb,CAAU;AAEV,MAAMC,aAAa,GAAG;EACpBD,SAAS,EAAE;AACb,CAAU;AAEV,MAAME,oBAA+B,GAAG;EACtCH,QAAQ,EAAE,UAAU;EACpBI,IAAI,EAAE,CAAC;EACPC,GAAG,EAAE,CAAC;EACNC,OAAO,EAAE,CAAC;EACVL,SAAS,EAAE,YAAY;EACvBM,UAAU,EAAE;AACd,CAAC;AAED,MAAMC,oBAA+B,GAAG;EACtCC,QAAQ,EAAE;AACZ,CAAC;AAED,MAAMC,sBAAiC,GAAG;EACxCD,QAAQ,EAAE;AACZ,CAAC;AAED,MAAME,sBAAiC,GAAG;EACxCC,KAAK,EAAE;AACT,CAAC;AAED,MAAMC,gBAAiD,GAAG;EACxDT,IAAI,EAAE;IAAEH,SAAS,EAAE;EAAa,CAAC;EACjCa,MAAM,EAAE;IAAEb,SAAS,EAAE;EAAS,CAAC;EAC/Bc,KAAK,EAAE;IAAEd,SAAS,EAAE;EAAW;AACjC,CAAC;AAED,MAAMe,mBAAoD,GAAG;EAC3DZ,IAAI,EAAE;IAAEa,UAAU,EAAE;EAAa,CAAC;EAClCH,MAAM,EAAE;IAAEG,UAAU,EAAE;EAAS,CAAC;EAChCF,KAAK,EAAE;IAAEE,UAAU,EAAE;EAAW;AAClC,CAAC;AAaD;AACA,OAAO,MAAMC,aAAa,gBAAG7B,KAAK,CAAC8B,IAAI,CACrC,CAAC;EACCC,QAAQ;EACRC,YAAY;EACZC,KAAK;EACLC,cAAc;EACdC,kBAAkB;EAClBC,eAAe;EACfC,WAAW;EACXC;AACkB,CAAC,KAAK;EACxB;EACA,MAAMC,qBAAqB,GAAGtC,OAAO,CACnC,MAAM,CACJY,aAAa,EACbc,mBAAmB,CAACM,KAAK,CAAC,EAC1BD,YAAY,GAAGb,oBAAoB,GAAGE,sBAAsB,CAC7D,EACD,CAACY,KAAK,EAAED,YAAY,CACtB,CAAC;;EAED;EACA,oBACE3B,IAAA,CAACH,IAAI;IAACsC,KAAK,EAAE,CAAC9B,UAAU,EAAEc,gBAAgB,CAACS,KAAK,CAAC,EAAEC,cAAc,CAAE;IAAAI,QAAA,EAChEP,QAAQ,gBACPtB,KAAA,CAAAF,SAAA;MAAA+B,QAAA,gBACEjC,IAAA,CAACH,IAAI;QACHuC,2BAA2B;QAC3BC,WAAW,EAAE,KAAM;QACnBC,yBAAyB,EAAC,qBAAqB;QAC/CC,aAAa,EAAC,MAAM;QACpBJ,KAAK,EAAE1B,oBAAqB;QAAAwB,QAAA,EAE3BD;MAAW,CACR,CAAC,eACPhC,IAAA,CAACF,QAAQ,CAACD,IAAI;QACZ2C,QAAQ,EAAET,eAAgB;QAC1BI,KAAK,EAAE,CAACD,qBAAqB,EAAEJ,kBAAkB,CAAE;QAAAG,QAAA,EAElDA;MAAQ,CACI,CAAC;IAAA,CAChB,CAAC,gBAEHjC,IAAA,CAACH,IAAI;MAACsC,KAAK,EAAE,CAACD,qBAAqB,EAAEjB,sBAAsB,CAAE;MAAAgB,QAAA,EAC1DA;IAAQ,CACL;EACP,CACG,CAAC;AAEX,CACF,CAAC;AAEDT,aAAa,CAACiB,WAAW,GAAG,eAAe","ignoreList":[]}

package/lib/module/view/text-run.js

@@ -14,22 +14,40 @@ export const TextRun = /*#__PURE__*/React.memo(({
   leading,
   leadingKey,
   leadingGap = 0,
+  ready = true,
   textStyle,
   className
 }) => {
   // 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) && lastLeadingPresenceRef.current && leadingKey !== lastLeadingKeyRef.current;
+  const isLeadingSwap = Boolean(visibleLeading) && lastLeadingPresenceRef.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({
     durationMs: motionRecipe.durationMs,
     easing: motionRecipe.easing
@@ -37,16 +55,16 @@ export const TextRun = /*#__PURE__*/React.memo(({
   const elementExitTransition = useMemo(() => createLeadingExitTransition({
     durationMs: motionRecipe.durationMs,
     easing: motionRecipe.easing,
-    leadingGap,
+    leadingGap: visibleLeadingGap,
     scale: leadingSwapProgress
-  }), [leadingGap, leadingSwapProgress, motionRecipe.durationMs, motionRecipe.easing]);
+  }), [visibleLeadingGap, leadingSwapProgress, motionRecipe.durationMs, motionRecipe.easing]);
 
   // mark the first value as settled and later changes as eligible for motion
-  if (value !== lastValueRef.current || Boolean(leading) !== lastLeadingPresenceRef.current || leadingKey !== lastLeadingKeyRef.current) {
+  if (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;
   return /*#__PURE__*/_jsx(GlyphRun, {
@@ -56,7 +74,7 @@ export const TextRun = /*#__PURE__*/React.memo(({
     elementEnterTransition: isLeadingSwap ? elementEnterTransition : undefined,
     exitTransition: motionRecipe.exitTransition,
     elementExitTransition: elementExitTransition,
-    leadingGap: leadingGap,
+    leadingGap: visibleLeadingGap,
     align: align,
     textStyle: textStyle,
     className: className

package/lib/module/view/text-run.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useId","useLayoutEffect","useMemo","useRef","useSharedValue","useTextGlyphs","createLeadingEnterTransition","createLeadingExitTransition","GlyphRun","jsx","_jsx","TextRun","memo","value","motionRecipe","align","leading","leadingKey","leadingGap","textStyle","className","scopeId","lastValueRef","lastLeadingPresenceRef","Boolean","lastLeadingKeyRef","hasAnimatedRef","isLeadingSwap","current","leadingSwapProgress","glyphs","elementEnterTransition","durationMs","easing","elementExitTransition","scale","hasAnimated","layoutTransition","undefined","enterTransition","exitTransition","displayName"],"sourceRoot":"../../../src","sources":["view/text-run.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useId","useLayoutEffect","useMemo","useRef","useSharedValue","useTextGlyphs","createLeadingEnterTransition","createLeadingExitTransition","GlyphRun","jsx","_jsx","TextRun","memo","value","motionRecipe","align","leading","leadingKey","leadingGap","ready","textStyle","className","scopeId","hasDisplayedRef","displayedValueRef","displayedLeadingRef","displayedLeadingKeyRef","displayedLeadingGapRef","shouldDisplayTarget","current","visibleValue","visibleLeading","visibleLeadingKey","visibleLeadingGap","lastValueRef","lastLeadingPresenceRef","Boolean","lastLeadingKeyRef","hasAnimatedRef","isLeadingSwap","leadingSwapProgress","glyphs","elementEnterTransition","durationMs","easing","elementExitTransition","scale","hasAnimated","layoutTransition","undefined","enterTransition","exitTransition","displayName"],"sourceRoot":"../../../src","sources":["view/text-run.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/commonjs/hooks/use-inline-auto-width.d.ts

@@ -6,11 +6,13 @@ type Params = {
 };
 export declare const useInlineAutoWidth: ({ enabled, driveToWidth, measurementKey, }: Params) => {
     captureLayout: (event: LayoutChangeEvent) => void;
+    captureVisibleLayout: (event: LayoutChangeEvent) => void;
     animatedWidthStyle: {
         width: number;
     } | {
         width?: undefined;
     };
+    isReady: boolean;
     shouldMeasure: boolean;
 };
 export {};

package/lib/typescript/commonjs/hooks/use-inline-auto-width.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-inline-auto-width.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-inline-auto-width.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,KAAK,MAAM,GAAG;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAKF,eAAO,MAAM,kBAAkB,GAAI,4CAIhC,MAAM;2BA6BG,iBAAiB;;;;;;;CAqD5B,CAAC"}
+{"version":3,"file":"use-inline-auto-width.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-inline-auto-width.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,KAAK,MAAM,GAAG;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,eAAO,MAAM,kBAAkB,GAAI,4CAIhC,MAAM;2BAyGG,iBAAiB;kCAlCjB,iBAAiB;;;;;;;;CA8I5B,CAAC"}

package/lib/typescript/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAqB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOpE,eAAO,MAAM,OAAO,yDAqJhB,CAAC;AAcL,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAqB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOpE,eAAO,MAAM,OAAO,yDA8JhB,CAAC;AAcL,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,SAAS,CAAC"}

package/lib/typescript/commonjs/view/morph-viewport.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { StyleProp, ViewStyle } from "react-native";
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
 import Animated from "react-native-reanimated";
 import type { LaminarAlign } from "../types";
 type MorphViewportProps = {
@@ -8,9 +8,10 @@ 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;
 };
-export declare const MorphViewport: React.MemoExoticComponent<({ autoSize, clipToBounds, align, containerStyle, animatedWidthStyle, measurement, children, }: MorphViewportProps) => React.JSX.Element>;
+export declare const MorphViewport: React.MemoExoticComponent<({ autoSize, clipToBounds, align, containerStyle, animatedWidthStyle, onVisibleLayout, measurement, children, }: MorphViewportProps) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=morph-viewport.d.ts.map

package/lib/typescript/commonjs/view/morph-viewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"morph-viewport.d.ts","sourceRoot":"","sources":["../../../../src/view/morph-viewport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA4C7C,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;IAClF,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC,CAAC;AAGF,eAAO,MAAM,aAAa,4HASrB,kBAAkB,uBAqCtB,CAAC"}
+{"version":3,"file":"morph-viewport.d.ts","sourceRoot":"","sources":["../../../../src/view/morph-viewport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE5E,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA4C7C,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;IAClF,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9D,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC,CAAC;AAGF,eAAO,MAAM,aAAa,6IAUrB,kBAAkB,uBAwCtB,CAAC"}

package/lib/typescript/commonjs/view/text-run.d.ts

@@ -9,9 +9,10 @@ type TextRunProps = {
     readonly leading?: ReactNode;
     readonly leadingKey?: string | number;
     readonly leadingGap?: number;
+    readonly ready?: boolean;
     readonly textStyle?: StyleProp<TextStyle>;
     readonly className?: string;
 };
-export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, align, leading, leadingKey, leadingGap, textStyle, className, }: TextRunProps) => React.JSX.Element>;
+export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, align, leading, leadingKey, leadingGap, ready, textStyle, className, }: TextRunProps) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=text-run.d.ts.map

package/lib/typescript/commonjs/view/text-run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,qHAUf,YAAY,uBA8EhB,CAAC"}
+{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,4HAWf,YAAY,uBA8GhB,CAAC"}

package/lib/typescript/module/hooks/use-inline-auto-width.d.ts

@@ -6,11 +6,13 @@ type Params = {
 };
 export declare const useInlineAutoWidth: ({ enabled, driveToWidth, measurementKey, }: Params) => {
     captureLayout: (event: LayoutChangeEvent) => void;
+    captureVisibleLayout: (event: LayoutChangeEvent) => void;
     animatedWidthStyle: {
         width: number;
     } | {
         width?: undefined;
     };
+    isReady: boolean;
     shouldMeasure: boolean;
 };
 export {};

package/lib/typescript/module/hooks/use-inline-auto-width.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-inline-auto-width.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-inline-auto-width.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,KAAK,MAAM,GAAG;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAKF,eAAO,MAAM,kBAAkB,GAAI,4CAIhC,MAAM;2BA6BG,iBAAiB;;;;;;;CAqD5B,CAAC"}
+{"version":3,"file":"use-inline-auto-width.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-inline-auto-width.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,KAAK,MAAM,GAAG;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,eAAO,MAAM,kBAAkB,GAAI,4CAIhC,MAAM;2BAyGG,iBAAiB;kCAlCjB,iBAAiB;;;;;;;;CA8I5B,CAAC"}

package/lib/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAqB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOpE,eAAO,MAAM,OAAO,yDAqJhB,CAAC;AAcL,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAqB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOpE,eAAO,MAAM,OAAO,yDA8JhB,CAAC;AAcL,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,SAAS,CAAC"}

package/lib/typescript/module/view/morph-viewport.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { StyleProp, ViewStyle } from "react-native";
+import type { LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
 import Animated from "react-native-reanimated";
 import type { LaminarAlign } from "../types";
 type MorphViewportProps = {
@@ -8,9 +8,10 @@ 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;
 };
-export declare const MorphViewport: React.MemoExoticComponent<({ autoSize, clipToBounds, align, containerStyle, animatedWidthStyle, measurement, children, }: MorphViewportProps) => React.JSX.Element>;
+export declare const MorphViewport: React.MemoExoticComponent<({ autoSize, clipToBounds, align, containerStyle, animatedWidthStyle, onVisibleLayout, measurement, children, }: MorphViewportProps) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=morph-viewport.d.ts.map

package/lib/typescript/module/view/morph-viewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"morph-viewport.d.ts","sourceRoot":"","sources":["../../../../src/view/morph-viewport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA4C7C,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;IAClF,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC,CAAC;AAGF,eAAO,MAAM,aAAa,4HASrB,kBAAkB,uBAqCtB,CAAC"}
+{"version":3,"file":"morph-viewport.d.ts","sourceRoot":"","sources":["../../../../src/view/morph-viewport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE5E,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA4C7C,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,kBAAkB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;IAClF,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9D,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC,CAAC;AAGF,eAAO,MAAM,aAAa,6IAUrB,kBAAkB,uBAwCtB,CAAC"}

package/lib/typescript/module/view/text-run.d.ts

@@ -9,9 +9,10 @@ type TextRunProps = {
     readonly leading?: ReactNode;
     readonly leadingKey?: string | number;
     readonly leadingGap?: number;
+    readonly ready?: boolean;
     readonly textStyle?: StyleProp<TextStyle>;
     readonly className?: string;
 };
-export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, align, leading, leadingKey, leadingGap, textStyle, className, }: TextRunProps) => React.JSX.Element>;
+export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, align, leading, leadingKey, leadingGap, ready, textStyle, className, }: TextRunProps) => React.JSX.Element>;
 export {};
 //# sourceMappingURL=text-run.d.ts.map

package/lib/typescript/module/view/text-run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,qHAUf,YAAY,uBA8EhB,CAAC"}
+{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,4HAWf,YAAY,uBA8GhB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-laminar",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "A React Native component for morphing text and numbers with character-level identity.",
   "keywords": [
     "react-native",

package/src/hooks/use-inline-auto-width.ts

@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import type { LayoutChangeEvent } from "react-native";
 import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 
@@ -8,6 +14,11 @@ type Params = {
   measurementKey: string;
 };
 
+type PendingProbe = {
+  key: string;
+  width: number;
+};
+
 const WIDTH_CACHE_LIMIT = 64;
 
 // measure each content signature once and drive later changes through one width value
@@ -17,10 +28,24 @@ export const useInlineAutoWidth = ({
   measurementKey,
 }: Params) => {
   const widthValue = useSharedValue(0);
+  const hasBootstrappedWidth = useSharedValue(false);
   const measuredWidthRef = useRef<number | null>(null);
   const bootstrappedRef = useRef(false);
   const widthCacheRef = useRef(new Map<string, number>());
-  const [hasBootstrappedWidth, setHasBootstrappedWidth] = useState(false);
+  const hasCapturedVisibleLayoutRef = useRef(false);
+  const initialMeasurementKeyRef = useRef<string | null>(null);
+  const firstProbeRef = useRef<PendingProbe | null>(null);
+  const latestProbeRef = useRef<PendingProbe | null>(null);
+  const bootstrapTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [readyMeasurementKey, setReadyMeasurementKey] = useState<string | null>(
+    null
+  );
+
+  const markMeasurementReady = useCallback((key: string) => {
+    setReadyMeasurementKey((currentKey) =>
+      currentKey === key ? currentKey : key
+    );
+  }, []);
 
   // the first measurement establishes the shell without animating from zero
   const applyWidth = useCallback(
@@ -34,7 +59,7 @@ export const useInlineAutoWidth = ({
       if (!bootstrappedRef.current) {
         bootstrappedRef.current = true;
         widthValue.value = nextWidth;
-        setHasBootstrappedWidth(true);
+        hasBootstrappedWidth.value = true;
         return;
       }
 
@@ -43,6 +68,68 @@ export const useInlineAutoWidth = ({
     [driveToWidth, widthValue]
   );
 
+  const bootstrapFromProbe = useCallback(() => {
+    bootstrapTimerRef.current = null;
+
+    if (hasCapturedVisibleLayoutRef.current) {
+      return;
+    }
+
+    const firstProbe = firstProbeRef.current;
+    if (!firstProbe) {
+      return;
+    }
+
+    // The visible layout did not arrive in time, so use the first probe as a
+    // safe fallback. A later probe can still animate from this baseline.
+    hasCapturedVisibleLayoutRef.current = true;
+    initialMeasurementKeyRef.current = firstProbe.key;
+    applyWidth(firstProbe.width);
+
+    const latestProbe = latestProbeRef.current;
+    if (latestProbe && latestProbe.key !== firstProbe.key) {
+      // The target width is already cached. Defer its animation until the
+      // ready render so the shell and the new glyph row start together.
+      markMeasurementReady(latestProbe.key);
+    } else {
+      markMeasurementReady(firstProbe.key);
+    }
+  }, [applyWidth, markMeasurementReady]);
+
+  const captureVisibleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (!enabled || hasCapturedVisibleLayoutRef.current) {
+        return;
+      }
+
+      if (bootstrapTimerRef.current !== null) {
+        clearTimeout(bootstrapTimerRef.current);
+        bootstrapTimerRef.current = null;
+      }
+
+      hasCapturedVisibleLayoutRef.current = true;
+      // bootstrap from the visible tree so the first explicit width matches
+      // the geometry that was already painted to the user
+      const nextWidth = Math.max(0, event.nativeEvent.layout.width);
+      // retain the visible width for the initial key so a later cache hit does
+      // not reintroduce the probe-to-visible mismatch
+      widthCacheRef.current.delete(measurementKey);
+      widthCacheRef.current.set(measurementKey, nextWidth);
+      const firstProbe = firstProbeRef.current;
+      if (firstProbe && firstProbe.key !== measurementKey) {
+        initialMeasurementKeyRef.current = firstProbe.key;
+        applyWidth(firstProbe.width);
+        markMeasurementReady(measurementKey);
+        return;
+      }
+
+      initialMeasurementKeyRef.current = measurementKey;
+      applyWidth(nextWidth);
+      markMeasurementReady(measurementKey);
+    },
+    [applyWidth, enabled, markMeasurementReady, measurementKey]
+  );
+
   const captureLayout = useCallback(
     (event: LayoutChangeEvent) => {
       if (!enabled) {
@@ -52,49 +139,104 @@ export const useInlineAutoWidth = ({
       // round up so fractional native measurements cannot clip the final glyph
       const nextWidth = Math.max(0, Math.ceil(event.nativeEvent.layout.width));
 
-      // delete before setting so a repeated key moves to the most recent position
-      widthCacheRef.current.delete(measurementKey);
+      const isInitialMeasurement =
+        initialMeasurementKeyRef.current === measurementKey;
+
+      if (!isInitialMeasurement) {
+        // delete before setting so a repeated key moves to the most recent position
+        widthCacheRef.current.delete(measurementKey);
 
-      if (widthCacheRef.current.size >= WIDTH_CACHE_LIMIT) {
-        // map insertion order gives the lru entry at the front
-        const oldestKey = widthCacheRef.current.keys().next().value;
+        if (widthCacheRef.current.size >= WIDTH_CACHE_LIMIT) {
+          // map insertion order gives the lru entry at the front
+          const oldestKey = widthCacheRef.current.keys().next().value;
 
-        if (oldestKey !== undefined) {
-          widthCacheRef.current.delete(oldestKey);
+          if (oldestKey !== undefined) {
+            widthCacheRef.current.delete(oldestKey);
+          }
         }
+
+        widthCacheRef.current.set(measurementKey, nextWidth);
       }
 
-      widthCacheRef.current.set(measurementKey, nextWidth);
-      applyWidth(nextWidth);
+      const probe = { key: measurementKey, width: nextWidth };
+      if (!firstProbeRef.current) {
+        firstProbeRef.current = probe;
+      }
+      latestProbeRef.current = probe;
+
+      if (
+        !hasCapturedVisibleLayoutRef.current &&
+        bootstrapTimerRef.current === null
+      ) {
+        bootstrapTimerRef.current = setTimeout(bootstrapFromProbe, 0);
+      }
+
+      // Do not let the initial probe override the visible first frame.
+      if (hasCapturedVisibleLayoutRef.current && !isInitialMeasurement) {
+        // captureLayout only records the target. The cache effect applies the
+        // animation during the render that releases the new glyph row.
+        markMeasurementReady(measurementKey);
+      }
     },
-    [applyWidth, enabled, measurementKey]
+    [
+      applyWidth,
+      bootstrapFromProbe,
+      enabled,
+      markMeasurementReady,
+      measurementKey,
+    ]
   );
 
   const cachedWidth = widthCacheRef.current.get(measurementKey);
 
   // a cached width can restore the shell before the hidden probe renders again
-  useEffect(() => {
-    if (enabled && cachedWidth !== undefined) {
+  useLayoutEffect(() => {
+    if (
+      enabled &&
+      cachedWidth !== undefined &&
+      hasCapturedVisibleLayoutRef.current
+    ) {
       // promote cache hits so active states stay available longer
       widthCacheRef.current.delete(measurementKey);
       widthCacheRef.current.set(measurementKey, cachedWidth);
       applyWidth(cachedWidth);
+      markMeasurementReady(measurementKey);
     }
-  }, [applyWidth, cachedWidth, enabled, measurementKey]);
+  }, [
+    applyWidth,
+    cachedWidth,
+    enabled,
+    markMeasurementReady,
+    measurementKey,
+  ]);
+
+  useEffect(
+    () => () => {
+      if (bootstrapTimerRef.current !== null) {
+        clearTimeout(bootstrapTimerRef.current);
+      }
+    },
+    []
+  );
 
   const animatedWidthStyle = useAnimatedStyle(
     () =>
-      enabled && hasBootstrappedWidth
+      enabled && hasBootstrappedWidth.value
         ? {
             width: widthValue.value,
           }
         : {},
-    [enabled, hasBootstrappedWidth]
+    [enabled]
   );
 
   return {
     captureLayout,
+    captureVisibleLayout,
     animatedWidthStyle,
+    isReady:
+      !enabled ||
+      cachedWidth !== undefined ||
+      readyMeasurementKey === measurementKey,
     shouldMeasure: enabled && cachedWidth === undefined,
   };
 };