@tamagui/animations-reanimated 3.0.0-beta.924.1 → 3.0.0

package/dist/cjs/createAnimations.cjs

@@ -30,11 +30,13 @@ module.exports = __toCommonJS(createAnimations_exports);
 var import_animation_helpers = require("@tamagui/animation-helpers");
 var import_core = require("@tamagui/core");
 var import_internal_runtime = require("@tamagui/web/internal-runtime");
+var import_textInputHost = require("./textInputHost.cjs");
 var import_use_presence = require("@tamagui/use-presence");
 var import_normalize_colors = __toESM(require("@react-native/normalize-colors"), 1);
 var import_react = __toESM(require("react"), 1);
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
+const NON_ANIMATABLE_VALUE = /^(auto|min-content|max-content|fit-content|stretch|inherit|initial|unset)\b|^calc\(/;
 const getDefaultExport = (module2) => {
 	const mod = module2;
 	if (mod.__esModule || mod[Symbol.toStringTag] === "Module") {
@@ -60,13 +62,15 @@ const resolveDynamicValue = (value, isDark) => {
 	}
 	return value;
 };
-const updateMapperState = import_core.isWeb ? (state, emitted) => {
+const updateMapperState = import_core.isWeb ? (state, emitted, ownedStatics) => {
 	state.value.emitted = emitted;
-} : (state, emitted) => {
+	state.value.ownedStatics = ownedStatics;
+} : (state, emitted, ownedStatics) => {
 	"worklet";
 	if (!globalThis._WORKLET) return;
 	state.modify((current) => {
 		current.emitted = emitted;
+		current.ownedStatics = ownedStatics;
 		return current;
 	}, false);
 };
@@ -120,6 +124,11 @@ const getImplicitDefault = (key, targetValue) => {
 	}
 	return suffixIndex > 0 ? `${value}${targetValue.slice(suffixIndex)}` : value;
 };
+const getLeadingRatio = (metrics) => {
+	const ratio = metrics?.lineHeight;
+	return typeof ratio === "number" && Number.isFinite(ratio) && ratio >= 0 ? ratio : void 0;
+};
+const derivesLeadingProduct = (style, ratio, inheritsFontSize, resolved) => ratio !== void 0 && (inheritsFontSize || typeof style.lineHeight === "number" && typeof style.fontSize === "number" && (!!(0, import_animation_helpers.getTransitionForKey)(resolved, "fontSize") || !!(0, import_animation_helpers.getTransitionForKey)(resolved, "lineHeight")));
 const COLOR_STYLE_KEYS = {
 	backgroundColor: true,
 	borderColor: true,
@@ -162,7 +171,7 @@ const normalizeAnimationColor = (value) => {
 	const alpha = (color & 255) / 255;
 	return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 };
-const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted) => {
+const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted, derivesLeading = false) => {
 	const snapshotAnimated = {};
 	const snapshotStatics = cloneStyleRecord(statics);
 	for (const key in snapshotStatics) {
@@ -186,6 +195,7 @@ const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted)
 	}
 	const snapshotTransforms = transforms.map(cloneStyleRecord);
 	const keys = new Set(Object.keys(snapshotAnimated));
+	if (derivesLeading) keys.add("lineHeight");
 	for (const transform of snapshotTransforms) {
 		const key = Object.keys(transform)[0];
 		const value = key ? transform[key] : void 0;
@@ -194,10 +204,19 @@ const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted)
 		}
 	}
 	const seeds = {};
+	const staticTransforms = getAnimatedTransforms(snapshotStatics.transform);
+	for (const transform of staticTransforms) {
+		const key = Object.keys(transform)[0];
+		if (keys.has(`transform:${key}`) && previousKeys.has(`transform:${key}`)) seeds[`transform:${key}`] = transform[key];
+	}
 	for (const key of keys) {
-		let value = lastPainted[key];
-		if (typeof value !== "number" && typeof value !== "string") continue;
-		if (value === "auto" || typeof value === "string" && value.startsWith("calc")) {
+		let value = previousKeys.has(key) ? seeds[key] ?? snapshotStatics[key] ?? lastPainted[key] : lastPainted[key];
+		if (typeof value !== "number" && typeof value !== "string") {
+			delete seeds[key];
+			continue;
+		}
+		if (typeof value === "string" && NON_ANIMATABLE_VALUE.test(value)) {
+			delete seeds[key];
 			continue;
 		}
 		if (COLOR_STYLE_KEYS[key]) value = normalizeAnimationColor(value);
@@ -205,13 +224,13 @@ const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted)
 	}
 	const gatedKeys = {};
 	for (const key of keys) gatedKeys[key] = true;
+	if (derivesLeading) delete gatedKeys.lineHeight;
 	const removedKeys = getRemovedAnimatedKeys(keys, previousKeys);
 	const painted = {
 		...snapshotStatics,
 		...snapshotAnimated
 	};
-	const staticTransforms = getAnimatedTransforms(snapshotStatics.transform);
-	delete painted.transform;
+	painted.transform = snapshotTransforms.length ? snapshotTransforms : staticTransforms;
 	for (const transform of staticTransforms) {
 		const key = Object.keys(transform)[0];
 		if (key) painted[`transform:${key}`] = transform[key];
@@ -226,6 +245,7 @@ const buildSnapshot = (animated, statics, transforms, previousKeys, lastPainted)
 			statics: snapshotStatics,
 			transforms: snapshotTransforms,
 			gatedKeys,
+			derivesLeading,
 			seeds,
 			removedKeys,
 			removeTransform: Object.keys(removedKeys).some((key) => key.startsWith("transform:")),
@@ -249,7 +269,7 @@ const createReanimatedConfig = (config) => {
 	}
 	return next;
 };
-const applyAnimation = (targetValue, config, callback, seedValue, validateStartAsColor = false) => {
+const applyAnimation = (targetValue, config, callback, seedValue, validateStartAsColor = false, publishTo) => {
 	"worklet";
 	const delay = config.delay;
 	const reanimatedConfig = createReanimatedConfig(config);
@@ -264,7 +284,11 @@ const applyAnimation = (targetValue, config, callback, seedValue, validateStartA
 			return innerOnFrame(animation, now < animation.lastTimestamp ? animation.lastTimestamp : now);
 		};
 	}
-	if (seedValue !== void 0 || validateStartAsColor) {
+	const isAnimationDescriptor = animatedValue !== null && typeof animatedValue !== "number" && typeof animatedValue !== "string" && typeof animatedValue !== "boolean" && typeof animatedValue !== "undefined";
+	if (isAnimationDescriptor && delay && delay > 0) {
+		animatedValue = (0, import_react_native_reanimated.withDelay)(delay, animatedValue);
+	}
+	if (isAnimationDescriptor && (seedValue !== void 0 || validateStartAsColor)) {
 		const innerOnStart = animatedValue.onStart;
 		animatedValue.onStart = (animation, value, timestamp, previousAnimation) => {
 			"worklet";
@@ -272,15 +296,28 @@ const applyAnimation = (targetValue, config, callback, seedValue, validateStartA
 			innerOnStart(animation, startValue, timestamp, previousAnimation);
 		};
 	}
-	if (delay && delay > 0) {
-		animatedValue = (0, import_react_native_reanimated.withDelay)(delay, animatedValue);
+	if (isAnimationDescriptor && publishTo) {
+		const startedOn = animatedValue.onStart;
+		animatedValue.onStart = (animation, value, timestamp, previousAnimation) => {
+			"worklet";
+			startedOn(animation, value, timestamp, previousAnimation);
+			publishTo.value = animation.current;
+		};
+		const framedOn = animatedValue.onFrame;
+		animatedValue.onFrame = (animation, now) => {
+			"worklet";
+			const finished = framedOn(animation, now);
+			publishTo.value = animation.current;
+			return finished;
+		};
 	}
 	return animatedValue;
 };
-const animateSnapshotValue = (key, implicitKey, targetValue, config, previouslyEmitted, seedValue, gated, currentlyExiting, exitCycleId, currentlyCompletingEnter, enterCycleId, currentlyCompletingUpdate, updateCycleId, markExitKeyDone, markEnterKeyDone, markUpdateKeyDone, validateStartAsColor = false) => {
+const animateSnapshotValue = (key, implicitKey, targetValue, config, previouslyEmitted, seedValue, gated, currentlyExiting, exitCycleId, currentlyCompletingEnter, enterCycleId, currentlyCompletingUpdate, updateCycleId, markExitKeyDone, markEnterKeyDone, markUpdateKeyDone, validateStartAsColor = false, publishTo) => {
 	"worklet";
 	const cycleGated = gated && (currentlyExiting || currentlyCompletingEnter || currentlyCompletingUpdate);
 	if (!previouslyEmitted && seedValue === void 0 && !cycleGated) {
+		if (publishTo && typeof targetValue === "number") publishTo.value = targetValue;
 		return targetValue;
 	}
 	let callback;
@@ -300,7 +337,7 @@ const animateSnapshotValue = (key, implicitKey, targetValue, config, previouslyE
 			(0, import_react_native_reanimated.runOnJS)(markUpdateKeyDone)(key, updateCycleId, finished ?? false);
 		};
 	}
-	return applyAnimation(targetValue, config, callback, previouslyEmitted ? void 0 : seedValue ?? getImplicitDefault(implicitKey, targetValue), validateStartAsColor);
+	return applyAnimation(targetValue, config, callback, previouslyEmitted ? void 0 : seedValue ?? getImplicitDefault(implicitKey, targetValue), validateStartAsColor, publishTo);
 };
 const ANIMATABLE_PROPERTIES = {
 	transform: true,
@@ -357,20 +394,18 @@ const ANIMATABLE_PROPERTIES = {
 	flexGrow: true,
 	flexShrink: true
 };
-const canAnimateProperty = (key, value, animateOnly) => {
+const canAnimateProperty = (key, value) => {
 	if (!ANIMATABLE_PROPERTIES[key]) return false;
-	if (value === "auto") return false;
-	if (typeof value === "string" && value.startsWith("calc")) return false;
-	if (animateOnly && !animateOnly.includes(key)) return false;
+	if (typeof value === "string" && NON_ANIMATABLE_VALUE.test(value)) return false;
 	return true;
 };
-const splitAnimationStyles = (style, isDark, disableAnimation, animateOnly) => {
+const splitAnimationStyles = (style, isDark, disableAnimation) => {
 	const animated = {};
 	const statics = {};
 	for (const key in style) {
 		const value = resolveDynamicValue(style[key], isDark);
 		if (value === void 0) continue;
-		if (!disableAnimation && canAnimateProperty(key, value, animateOnly)) {
+		if (!disableAnimation && canAnimateProperty(key, value)) {
 			animated[key] = cloneAnimationValue(value);
 		} else {
 			statics[key] = cloneAnimationValue(value);
@@ -409,49 +444,72 @@ function createWebAnimatedComponent(defaultTag) {
 }
 const AnimatedView = createWebAnimatedComponent("div");
 const AnimatedText = createWebAnimatedComponent("span");
-function buildTransitionConfig(transition, animations, animationState, styleKeys) {
-	const normalized = (0, import_animation_helpers.normalizeTransition)(transition);
-	const effectiveKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-	let base = cloneTransitionConfig(effectiveKey ? animations[effectiveKey] ?? { type: "spring" } : { type: "spring" });
-	if (normalized.delay) {
-		base = cloneTransitionConfig({
-			...base,
-			delay: normalized.delay
-		});
+let animatedTextInput;
+const defaultConfig = { type: "spring" };
+const bezierEasings = /* @__PURE__ */ new Map();
+function bezierEasing(easing) {
+	if (!bezierEasings.has(easing)) {
+		const bezier = (0, import_animation_helpers.easingToBezier)(easing);
+		bezierEasings.set(easing, bezier ? import_react_native_reanimated.Easing.bezier(bezier[0], bezier[1], bezier[2], bezier[3]) : void 0);
 	}
-	if (normalized.config) {
-		base = cloneTransitionConfig({
-			...base,
-			...normalized.config
-		});
-		if (base.type !== "timing" && normalized.config.duration !== void 0 && normalized.config.damping === void 0 && normalized.config.stiffness === void 0 && normalized.config.mass === void 0) {
-			base = cloneTransitionConfig({
-				...base,
-				type: "timing"
-			});
-		}
+	return bezierEasings.get(easing);
+}
+function entryToReanimated(entry) {
+	if (entry.timing.kind === "spring") {
+		return {
+			type: "spring",
+			stiffness: entry.timing.stiffness,
+			damping: entry.timing.damping,
+			mass: entry.timing.mass,
+			delay: entry.delayMs || void 0
+		};
 	}
+	return {
+		type: "timing",
+		duration: entry.timing.durationMs,
+		easing: bezierEasing(entry.timing.easing),
+		delay: entry.delayMs || void 0
+	};
+}
+function buildTransitionConfig(transition, animations, animationState, styleKeys) {
+	const resolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(transition, { animations }), animationState);
+	const base = resolved.all ? entryToReanimated(resolved.all) : { ...defaultConfig };
 	const propertyConfigs = {};
 	for (const key of styleKeys) {
-		const propAnimation = normalized.properties[key];
-		if (typeof propAnimation === "string") {
-			propertyConfigs[key] = cloneTransitionConfig(animations[propAnimation] ?? base);
-		} else if (propAnimation && typeof propAnimation === "object") {
-			const configType = propAnimation.type;
-			const baseForProp = configType ? animations[configType] ?? base : base;
-			propertyConfigs[key] = cloneTransitionConfig({
-				...baseForProp,
-				...propAnimation
-			});
-		} else {
-			propertyConfigs[key] = cloneTransitionConfig(base);
-		}
+		const entry = (0, import_animation_helpers.getTransitionForKey)(resolved, key);
+		propertyConfigs[key] = entry ? entryToReanimated(entry) : instantConfig();
 	}
 	return {
 		baseConfig: base,
-		propertyConfigs
+		propertyConfigs,
+		resolved
 	};
 }
+const instantConfig = () => ({
+	type: "timing",
+	duration: 0
+});
+function sameTransitionConfig(a, b) {
+	const aKeys = Object.keys(a);
+	if (aKeys.length !== Object.keys(b).length) return false;
+	for (const key of aKeys) {
+		if (a[key] !== b[key]) return false;
+	}
+	return true;
+}
+function sameDriverConfig(a, b) {
+	if (a.disableAnimation !== b.disableAnimation || a.isHydrating !== b.isHydrating) {
+		return false;
+	}
+	if (!sameTransitionConfig(a.baseConfig, b.baseConfig)) return false;
+	const aKeys = Object.keys(a.propertyConfigs);
+	if (aKeys.length !== Object.keys(b.propertyConfigs).length) return false;
+	for (const key of aKeys) {
+		const other = b.propertyConfigs[key];
+		if (!other || !sameTransitionConfig(a.propertyConfigs[key], other)) return false;
+	}
+	return true;
+}
 function getStyleKeys(style) {
 	const keys = new Set(Object.keys(style));
 	if (style.transform && Array.isArray(style.transform)) {
@@ -463,14 +521,7 @@ function getStyleKeys(style) {
 	}
 	return keys;
 }
-function createAnimations(animationsConfig) {
-	const animations = {};
-	for (const key in animationsConfig) {
-		animations[key] = cloneTransitionConfig({
-			type: "spring",
-			...animationsConfig[key]
-		});
-	}
+function createAnimations(animations) {
 	return {
 		needsCustomComponent: true,
 		View: import_core.isWeb ? AnimatedView : Animated.View,
@@ -481,6 +532,31 @@ function createAnimations(animationsConfig) {
 		animations,
 		usePresence: import_use_presence.usePresence,
 		ResetPresence: import_use_presence.ResetPresence,
+		useTextMetrics: ({ inheritedText, lineHeight }) => {
+			const node = inheritedText?.driver === "reanimated" ? inheritedText.fontSize : null;
+			const ratio = typeof lineHeight === "number" ? lineHeight : null;
+			const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
+				"worklet";
+				if (!node) return {};
+				const fontSize = node.value;
+				return ratio === null ? { fontSize } : {
+					fontSize,
+					lineHeight: fontSize * ratio
+				};
+			}, [node, ratio]);
+			const textChannel = inheritedText ?? null;
+			if (!node || !import_textInputHost.TextInputHost) return {
+				style: null,
+				textChannel
+			};
+			animatedTextInput ||= Animated.createAnimatedComponent(import_textInputHost.TextInputHost);
+			return {
+				style: animatedStyle,
+				textChannel,
+				Text: import_core.isWeb ? AnimatedText : Animated.Text,
+				TextInput: animatedTextInput
+			};
+		},
 		useAnimatedNumber(initial) {
 			const sharedValue = (0, import_react_native_reanimated.useSharedValue)(initial);
 			return (0, import_react.useMemo)(() => ({
@@ -557,7 +633,7 @@ function createAnimations(animationsConfig) {
 			return animatedStyle;
 		},
 		useAnimations(animationProps) {
-			const { props, presence, style, componentState, useStyleEmitter, themeName, stateRef, styleState, onTransition } = animationProps;
+			const { props, presence, style, componentState, useStyleEmitter, themeName, stateRef, styleState, onTransition, inheritedText } = animationProps;
 			const isHydrating = componentState.unmounted === true;
 			const isMounting = componentState.unmounted === "should-enter";
 			const isEntering = !!componentState.unmounted;
@@ -568,10 +644,27 @@ function createAnimations(animationsConfig) {
 				wasEnteringRef.current = isEntering;
 			});
 			const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
-			const normalized = (0, import_animation_helpers.normalizeTransition)(effectiveTransition);
+			const leadingRatio = getLeadingRatio(styleState?.nativeTextMetrics);
 			const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
-			const animationKey = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-			const disableAnimation = isHydrating || !animationKey;
+			const resolvedTransition = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(effectiveTransition, { animations }), animationState);
+			const disableAnimation = isHydrating || !(0, import_animation_helpers.hasTransition)(resolvedTransition);
+			const fontSizeShared = (0, import_react_native_reanimated.useSharedValue)(typeof style.fontSize === "number" ? style.fontSize : 0);
+			const publishesFontSize = !disableAnimation && typeof style.fontSize === "number";
+			const ownTextChannel = (0, import_react.useMemo)(() => ({
+				fontSize: fontSizeShared,
+				driver: "reanimated"
+			}), [fontSizeShared]);
+			const inheritedFontSize = leadingRatio !== void 0 && typeof style.fontSize !== "number" && inheritedText?.driver === "reanimated" ? inheritedText.fontSize : null;
+			const leadingFontSize = inheritedFontSize ?? fontSizeShared;
+			const leadingRatioShared = (0, import_react_native_reanimated.useSharedValue)(leadingRatio ?? 0);
+			const paintedRatioRef = (0, import_react.useRef)(leadingRatio);
+			const applyLeadingRatio = (ratio, config) => {
+				const previous = paintedRatioRef.current;
+				if (previous === ratio) return;
+				paintedRatioRef.current = ratio;
+				if (ratio === void 0) return;
+				leadingRatioShared.value = previous === void 0 || disableAnimation ? ratio : applyAnimation(ratio, config);
+			};
 			const isDark = themeName?.startsWith("dark") || false;
 			const sendExitComplete = presence?.[1];
 			const onTransitionRef = (0, import_react.useRef)(onTransition);
@@ -596,16 +689,18 @@ function createAnimations(animationsConfig) {
 			const updateCompletedRef = (0, import_react.useRef)(false);
 			const isCompletingUpdateRef = (0, import_react_native_reanimated.useSharedValue)(false);
 			const updateCycleIdShared = (0, import_react_native_reanimated.useSharedValue)(0);
+			const updateInterruptedRef = (0, import_react.useRef)(false);
 			const markUpdateKeyDone = (0, import_core.useEvent)((key, cycleId, finished) => {
-				if (!finished || cycleId !== updateCycleIdRef.current) return;
+				if (cycleId !== updateCycleIdRef.current) return;
 				if (updateCompletedRef.current) return;
+				if (!finished) updateInterruptedRef.current = true;
 				pendingUpdateKeysRef.current.delete(key);
 				if (pendingUpdateKeysRef.current.size === 0) {
 					updateCompletedRef.current = true;
 					isCompletingUpdateRef.value = false;
 					if (updateStartedRef.current) {
 						updateStartedRef.current = false;
-						emit("end", "update", true);
+						emit("end", "update", !updateInterruptedRef.current);
 					}
 				}
 			});
@@ -690,16 +785,45 @@ function createAnimations(animationsConfig) {
 			const committedRenderKeysRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
 			const lastPaintedRef = (0, import_react.useRef)({});
 			const carryRef = (0, import_react.useRef)({});
+			const exitSeedRef = (0, import_react.useRef)(null);
+			const paintedPredecessor = isExiting ? exitSeedRef.current ?? lastPaintedRef.current : lastPaintedRef.current;
+			(0, import_core.useIsomorphicLayoutEffect)(() => {
+				exitSeedRef.current = isExiting ? paintedPredecessor : null;
+			}, [isExiting, paintedPredecessor]);
 			const { animatedStyles, staticStyles, nextCarry } = (0, import_react.useMemo)(() => {
-				const animateOnly = props.animateOnly;
-				const { animated, statics } = splitAnimationStyles(style, isDark, disableAnimation, animateOnly);
+				const { animated, statics } = splitAnimationStyles(style, isDark, disableAnimation);
+				if (isExiting && animated.transform) {
+					const remaining = getAnimatedTransforms(animated.transform).map(cloneStyleRecord);
+					const previous = getAnimatedTransforms(paintedPredecessor.transform);
+					if (previous.length) {
+						animated.transform = previous.map((entry) => {
+							const key = Object.keys(entry)[0];
+							const index = remaining.findIndex((target) => key in target);
+							return index < 0 ? cloneStyleRecord(entry) : remaining.splice(index, 1)[0];
+						}).concat(remaining);
+					}
+				}
 				const nextCarry2 = cloneStyleRecord(carryRef.current);
 				for (const key in nextCarry2) {
 					if (!(key in animated)) delete nextCarry2[key];
 				}
 				for (const key in animated) {
 					if (!(key in nextCarry2)) {
-						nextCarry2[key] = cloneAnimationValue(animated[key]);
+						const target = animated[key];
+						if (isExiting && key === "transform") {
+							nextCarry2[key] = getAnimatedTransforms(target).map((transform) => {
+								const initial = cloneStyleRecord(transform);
+								for (const part in initial) {
+									const value = initial[part];
+									if (typeof value === "number" || typeof value === "string") {
+										initial[part] = paintedPredecessor[`transform:${part}`] ?? getImplicitDefault(part, value);
+									}
+								}
+								return initial;
+							});
+						} else {
+							nextCarry2[key] = cloneAnimationValue(isExiting && (typeof target === "number" || typeof target === "string") ? paintedPredecessor[key] ?? getImplicitDefault(key, target) : target);
+						}
 					}
 					statics[key] = nextCarry2[key];
 				}
@@ -712,14 +836,22 @@ function createAnimations(animationsConfig) {
 				disableAnimation,
 				style,
 				isDark,
-				props.animateOnly
+				isExiting,
+				isExiting ? paintedPredecessor : null
+			]);
+			const derivesLeading = derivesLeadingProduct(animatedStyles, leadingRatio, !!inheritedFontSize, resolvedTransition);
+			const renderSnapshot = (0, import_react.useMemo)(() => buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, paintedPredecessor, derivesLeading), [
+				animatedStyles,
+				staticStyles,
+				isExiting ? paintedPredecessor : null,
+				derivesLeading
 			]);
-			const renderSnapshot = (0, import_react.useMemo)(() => buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, lastPaintedRef.current), [animatedStyles, staticStyles]);
 			const renderSnapshotRef = (0, import_react_native_reanimated.useSharedValue)({
 				animated: {},
 				statics: {},
 				transforms: [],
 				gatedKeys: {},
+				derivesLeading: false,
 				seeds: {},
 				removedKeys: {},
 				removeTransform: false,
@@ -772,40 +904,49 @@ function createAnimations(animationsConfig) {
 				animatedStyles,
 				animationState
 			]);
-			const configRef = (0, import_react_native_reanimated.useSharedValue)({
+			const renderConfig = {
 				baseConfig,
 				propertyConfigs,
 				disableAnimation,
 				isHydrating
-			});
+			};
+			const configRef = (0, import_react_native_reanimated.useSharedValue)(renderConfig);
+			const writtenConfigRef = (0, import_react.useRef)(renderConfig);
+			const writeConfig = (next) => {
+				if (sameDriverConfig(writtenConfigRef.current, next)) return;
+				writtenConfigRef.current = next;
+				configRef.value = next;
+			};
 			(0, import_core.useIsomorphicLayoutEffect)(() => {
-				configRef.value = {
-					baseConfig,
-					propertyConfigs,
-					disableAnimation,
-					isHydrating
-				};
+				writeConfig(renderConfig);
 			}, [
 				baseConfig,
 				propertyConfigs,
 				disableAnimation,
 				isHydrating
 			]);
-			useStyleEmitter?.((nextStyle, effectiveTransition2, pseudoActive) => {
+			(0, import_core.useIsomorphicLayoutEffect)(() => {
+				if (emitterSnapshotRef.value !== null) return;
+				applyLeadingRatio(leadingRatio, propertyConfigs.lineHeight ?? baseConfig);
+			});
+			const onEmittedStyle = (nextStyle, effectiveTransition2, pseudoActive, nextMetrics) => {
 				if (isExitingJSRef.current) return;
 				pseudoActiveRef.current = pseudoActive === true;
-				const animateOnly = props.animateOnly;
 				const transitionToUse = effectiveTransition2 ?? props.transition;
-				const { baseConfig: newBase, propertyConfigs: newPropertyConfigs } = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
-				configRef.value = {
+				const emittedLeadingRatio = getLeadingRatio(nextMetrics);
+				const { baseConfig: newBase, propertyConfigs: newPropertyConfigs, resolved: emittedResolved } = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
+				const written = writtenConfigRef.current;
+				writeConfig({
 					baseConfig: newBase,
 					propertyConfigs: newPropertyConfigs,
-					disableAnimation: configRef.value.disableAnimation,
-					isHydrating: configRef.value.isHydrating
-				};
+					disableAnimation: written.disableAnimation,
+					isHydrating: written.isHydrating
+				});
 				const previousKeys = emitterKeysRef.current ?? committedRenderKeysRef.current;
-				const { animated, statics } = splitAnimationStyles(nextStyle, isDark, configRef.value.disableAnimation, animateOnly);
-				const snapshot = buildSnapshot(animated, statics, getAnimatedTransforms(animated.transform), previousKeys, lastPaintedRef.current);
+				const { animated, statics } = splitAnimationStyles(nextStyle, isDark, written.disableAnimation);
+				const emittedDerivesLeading = derivesLeadingProduct(animated, emittedLeadingRatio, !!inheritedFontSize, emittedResolved);
+				applyLeadingRatio(emittedLeadingRatio, newPropertyConfigs.lineHeight ?? newBase);
+				const snapshot = buildSnapshot(animated, statics, getAnimatedTransforms(animated.transform), previousKeys, lastPaintedRef.current, emittedDerivesLeading);
 				emitterSnapshotRef.value = snapshot.value;
 				emitterKeysRef.current = snapshot.keys;
 				lastPaintedRef.current = snapshot.painted;
@@ -816,7 +957,8 @@ function createAnimations(animationsConfig) {
 						transforms: snapshot.value.transforms
 					});
 				}
-			});
+			};
+			useStyleEmitter?.(onEmittedStyle);
 			const exitKeysRegistered = (0, import_react.useRef)(false);
 			const enterKeysRegistered = (0, import_react.useRef)(false);
 			if (!isExiting && justFinishedEntering && onTransition) {
@@ -847,6 +989,7 @@ function createAnimations(animationsConfig) {
 				if (!shouldRegisterUpdate || !previousStyleStillCurrent) return;
 				const cycleId = ++updateCycleIdRef.current;
 				pendingUpdateKeysRef.current = new Set(updateKeys);
+				updateInterruptedRef.current = false;
 				updateCompletedRef.current = updateKeys.length === 0;
 				isCompletingUpdateRef.value = updateKeys.length > 0;
 				updateCycleIdShared.value = cycleId;
@@ -905,17 +1048,22 @@ function createAnimations(animationsConfig) {
 				justFinishedEntering,
 				onTransition
 			]);
-			const mapperStateRef = (0, import_react_native_reanimated.useSharedValue)({ emitted: {} });
+			const mapperStateRef = (0, import_react_native_reanimated.useSharedValue)({
+				emitted: {},
+				ownedStatics: {}
+			});
 			const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
 				"worklet";
 				const mapperState = mapperStateRef.value;
 				const config = configRef.value;
 				if (config.disableAnimation || config.isHydrating) {
-					updateMapperState(mapperStateRef, {});
+					updateMapperState(mapperStateRef, {}, {});
 					return {};
 				}
 				const previouslyEmitted = mapperState.emitted;
 				const emitted = {};
+				const previouslyOwned = mapperState.ownedStatics;
+				const ownedStatics = {};
 				const result = {};
 				const emitterSnapshot = emitterSnapshotRef.value;
 				const snapshot = emitterSnapshot ?? renderSnapshotRef.value;
@@ -928,6 +1076,8 @@ function createAnimations(animationsConfig) {
 				const currentlyCompletingUpdate = isCompletingUpdateRef.value;
 				const currentUpdateCycleId = updateCycleIdShared.value;
 				for (const key in staticValues) {
+					if (!emitterSnapshot && !previouslyOwned[key]) continue;
+					ownedStatics[key] = true;
 					result[key] = staticValues[key];
 				}
 				for (const key in snapshot.removedKeys) {
@@ -939,11 +1089,16 @@ function createAnimations(animationsConfig) {
 					if (key === "transform") continue;
 					const targetValue = animatedValues[key];
 					emitted[key] = true;
+					if (key === "lineHeight" && snapshot.derivesLeading) continue;
 					if (typeof targetValue !== "number" && typeof targetValue !== "string") {
 						result[key] = targetValue;
 						continue;
 					}
-					result[key] = animateSnapshotValue(key, key, targetValue, config.propertyConfigs[key] ?? config.baseConfig, !!previouslyEmitted[key], snapshot.seeds[key], !!snapshot.gatedKeys[key], currentlyExiting, currentCycleId, currentlyCompletingEnter, currentEnterCycleId, currentlyCompletingUpdate, currentUpdateCycleId, markExitKeyDone, markEnterKeyDone, markUpdateKeyDone, !!COLOR_STYLE_KEYS[key]);
+					result[key] = animateSnapshotValue(key, key, targetValue, config.propertyConfigs[key] ?? config.baseConfig, !!previouslyEmitted[key], snapshot.seeds[key], !!snapshot.gatedKeys[key], currentlyExiting, currentCycleId, currentlyCompletingEnter, currentEnterCycleId, currentlyCompletingUpdate, currentUpdateCycleId, markExitKeyDone, markEnterKeyDone, markUpdateKeyDone, !!COLOR_STYLE_KEYS[key], key === "fontSize" ? fontSizeShared : void 0);
+				}
+				if (snapshot.derivesLeading) {
+					emitted.lineHeight = true;
+					result.lineHeight = leadingFontSize.value * leadingRatioShared.value;
 				}
 				const transforms = snapshot.transforms;
 				if (transforms.length > 0 || snapshot.removeTransform) {
@@ -967,7 +1122,7 @@ function createAnimations(animationsConfig) {
 						result.transform = validTransforms;
 					}
 				}
-				updateMapperState(mapperStateRef, emitted);
+				updateMapperState(mapperStateRef, emitted, ownedStatics);
 				return result;
 			}, import_core.isWeb ? [
 				renderSnapshotRef,
@@ -981,12 +1136,15 @@ function createAnimations(animationsConfig) {
 				markEnterKeyDone,
 				isCompletingUpdateRef,
 				updateCycleIdShared,
-				markUpdateKeyDone
+				markUpdateKeyDone,
+				fontSizeShared,
+				leadingRatioShared,
+				inheritedFontSize
 			] : void 0);
 			silenceAnimatedComponentDevCheck(animatedStyle);
 			if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
 				console.info("[animations-reanimated] useAnimations", {
-					animationKey,
+					resolvedTransition,
 					componentState,
 					isExiting,
 					animatedStyles,
@@ -995,7 +1153,10 @@ function createAnimations(animationsConfig) {
 					propertyConfigs
 				});
 			}
-			return { style: [staticStyles, animatedStyle] };
+			return {
+				style: [staticStyles, animatedStyle],
+				textChannel: publishesFontSize ? ownTextChannel : typeof style.fontSize === "number" ? null : inheritedText ?? null
+			};
 		}
 	};
 }