@tamagui/animations-react-native 3.0.0-beta.1313.1 → 3.0.0-beta.1341.1

package/dist/cjs/createAnimations.native.cjs

@@ -73,6 +73,14 @@ var layoutStyleKey = {
 	minWidth: true,
 	maxWidth: true
 };
+var textMetricStyleKey = {
+	fontSize: true,
+	lineHeight: true
+};
+var jsDriverStyleKey = {
+	...layoutStyleKey,
+	...textMetricStyleKey
+};
 function hasAnimatedLayoutKey(style, isDark, resolved) {
 	for (var key in layoutStyleKey) {
 		if (!(0, import_animation_helpers.getTransitionForKey)(resolved, key)) continue;
@@ -80,6 +88,16 @@ function hasAnimatedLayoutKey(style, isDark, resolved) {
 	}
 	return false;
 }
+var getLeadingRatio = function(metrics) {
+	var ratio = metrics === null || metrics === void 0 ? void 0 : metrics.lineHeight;
+	return typeof ratio === "number" && Number.isFinite(ratio) && ratio >= 0 ? ratio : void 0;
+};
+var paintsLeadingProduct = function(style, ratio) {
+	return ratio !== void 0 && typeof style.fontSize === "number" && typeof style.lineHeight === "number";
+};
+var inheritedFontSizeNode = function(style, ratio, inheritedText) {
+	return ratio !== void 0 && typeof style.fontSize !== "number" && (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : void 0;
+};
 function isAnimatableColor(value) {
 	return typeof value === "string" && (0, import_react_native.processColor)(value) != null;
 }
@@ -98,6 +116,7 @@ var costlyToAnimateStyleKey = {
 };
 var AnimatedView = import_react_native.Animated.View;
 var AnimatedText = import_react_native.Animated.Text;
+var animatedTextInput;
 function useAnimatedNumber(initial) {
 	var state = import_react.default.useRef(null);
 	if (!state.current) {
@@ -213,8 +232,31 @@ function createAnimations(animations, options) {
 		useAnimatedNumbersStyle,
 		usePresence: import_use_presence.usePresence,
 		ResetPresence: import_use_presence.ResetPresence,
+		useTextMetrics: function(param) {
+			var { inheritedText, lineHeight } = param;
+			var node = (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : null;
+			var ratio = typeof lineHeight === "number" ? lineHeight : null;
+			var style = import_react.default.useMemo(function() {
+				return node ? ratio === null ? { fontSize: node } : {
+					fontSize: node,
+					lineHeight: import_react_native.Animated.multiply(node, ratio)
+				} : null;
+			}, [node, ratio]);
+			var textChannel = inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
+			if (!style) return {
+				style: null,
+				textChannel
+			};
+			animatedTextInput || (animatedTextInput = import_react_native.Animated.createAnimatedComponent(import_react_native.TextInput));
+			return {
+				style,
+				textChannel,
+				Text: AnimatedText,
+				TextInput: animatedTextInput
+			};
+		},
 		useAnimations: function(param) {
-			var { props, onTransition, style, componentState, presence, stateRef, styleState, useStyleEmitter } = param;
+			var { props, onTransition, style, componentState, presence, stateRef, styleState, useStyleEmitter, inheritedText } = param;
 			var _themeState_name;
 			var isDisabled = import_constants.isWeb && componentState.unmounted === true;
 			var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
@@ -237,6 +279,36 @@ function createAnimations(animations, options) {
 			var [, themeState] = (0, import_internal_runtime.useThemeWithState)({});
 			var isDark = (themeState === null || themeState === void 0 ? void 0 : themeState.scheme) === "dark" || (themeState === null || themeState === void 0 ? void 0 : (_themeState_name = themeState.name) === null || _themeState_name === void 0 ? void 0 : _themeState_name.startsWith("dark"));
 			var animateStyles = import_react.default.useRef({});
+			var leadingRatioValue = import_react.default.useRef(null);
+			var leadingRatioRef = import_react.default.useRef(void 0);
+			var paintsDerivedLeading = import_react.default.useRef(false);
+			var textChannelRef = import_react.default.useRef(null);
+			leadingRatioRef.current = getLeadingRatio(styleState === null || styleState === void 0 ? void 0 : styleState.nativeTextMetrics);
+			var paintedTextRef = import_react.default.useRef({});
+			var movesTextValue = function(key, target) {
+				if (typeof target !== "number") return false;
+				var node = animateStyles.current[key];
+				var last = node ? node["_value"] : paintedTextRef.current[key];
+				return last !== void 0 && last !== target;
+			};
+			var movesLeadingRatio = function(ratio) {
+				if (ratio === void 0) return false;
+				var node = leadingRatioValue.current;
+				var last = node ? node["_value"] : paintedTextRef.current.ratio;
+				return last !== void 0 && last !== ratio;
+			};
+			var fontSizeNode = import_react.default.useRef(null);
+			var animatedValueFor = function(key) {
+				var painted = animateStyles.current[key];
+				if (painted) return painted;
+				if (key === "fontSize" && fontSizeNode.current) return fontSizeNode.current;
+				if (textMetricStyleKey[key]) return new import_react_native.Animated.Value(paintedTextRef.current[key]);
+				return void 0;
+			};
+			var leadingRatioValueFrom = function() {
+				var _leadingRatioValue_current;
+				return (_leadingRatioValue_current = leadingRatioValue.current) !== null && _leadingRatioValue_current !== void 0 ? _leadingRatioValue_current : new import_react_native.Animated.Value(paintedTextRef.current.ratio);
+			};
 			var animatedTranforms = import_react.default.useRef([]);
 			var animationsState = import_react.default.useRef(/* @__PURE__ */ new WeakMap());
 			var pseudoActiveRef = import_react.default.useRef(false);
@@ -270,18 +342,38 @@ function createAnimations(animations, options) {
 				isExiting,
 				!!onTransition,
 				isDark,
-				justFinishedEntering
+				justFinishedEntering,
+				leadingRatioRef.current,
+				inheritedText
 			];
 			var res = import_react.default.useMemo(function() {
+				var _textChannelRef_current;
 				var runners = [];
 				var completions = [];
 				var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
 				var resolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(effectiveTransition, { animations }), animationState);
 				var nonAnimatedStyle = {};
-				var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, resolved);
+				var paintedRatio = leadingRatioRef.current;
+				var paintsProduct = paintsLeadingProduct(style, paintedRatio);
+				var movesFontSize = movesTextValue("fontSize", style.fontSize);
+				var movesLeading = paintsProduct ? movesLeadingRatio(paintedRatio) : movesTextValue("lineHeight", style.lineHeight);
+				if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
+					if (!movesFontSize) delete animateStyles.current.fontSize;
+					if (!movesLeading) delete animateStyles.current.lineHeight;
+				}
+				if (isDisabled || typeof style.fontSize !== "number" || !(0, import_animation_helpers.getTransitionForKey)(resolved, "fontSize")) {
+					fontSizeNode.current = null;
+				} else if (!fontSizeNode.current) {
+					fontSizeNode.current = new import_react_native.Animated.Value(style.fontSize);
+				}
 				var seenAnimateKeys = /* @__PURE__ */ new Set();
 				var sawTransform = false;
 				var transformCount = 0;
+				var derivesLeading = !isDisabled && paintsProduct && (movesFontSize || movesLeading) && (!!(0, import_animation_helpers.getTransitionForKey)(resolved, "fontSize") || !!(0, import_animation_helpers.getTransitionForKey)(resolved, "lineHeight"));
+				var inheritedFontSize = isDisabled ? void 0 : inheritedFontSizeNode(style, paintedRatio, inheritedText);
+				var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, resolved) && !movesFontSize && !movesLeading && !inheritedFontSize && !Object.keys(animateStyles.current).some(function(key2) {
+					return jsDriverStyleKey[key2];
+				});
 				for (var key in style) {
 					var rawVal = style[key];
 					var val = resolveDynamicValue(rawVal, isDark);
@@ -289,7 +381,17 @@ function createAnimations(animations, options) {
 					if (isDisabled) {
 						continue;
 					}
-					if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !layoutStyleKey[key]) {
+					if ((derivesLeading || inheritedFontSize) && (key === "fontSize" || key === "lineHeight")) {
+						if (key === "fontSize" && derivesLeading && !movesFontSize) {
+							nonAnimatedStyle[key] = val;
+						}
+						continue;
+					}
+					if (textMetricStyleKey[key] && !(key === "fontSize" ? movesFontSize : movesLeading)) {
+						nonAnimatedStyle[key] = val;
+						continue;
+					}
+					if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !jsDriverStyleKey[key]) {
 						nonAnimatedStyle[key] = val;
 						continue;
 					}
@@ -297,7 +399,7 @@ function createAnimations(animations, options) {
 						nonAnimatedStyle[key] = val;
 						continue;
 					}
-					if (layoutStyleKey[key] && typeof val !== "number") {
+					if (jsDriverStyleKey[key] && typeof val !== "number") {
 						nonAnimatedStyle[key] = val;
 						continue;
 					}
@@ -306,7 +408,7 @@ function createAnimations(animations, options) {
 						continue;
 					}
 					if (key !== "transform") {
-						animateStyles.current[key] = update(key, animateStyles.current[key], val);
+						animateStyles.current[key] = update(key, animatedValueFor(key), val);
 						seenAnimateKeys.add(key);
 						continue;
 					}
@@ -343,6 +445,35 @@ function createAnimations(animations, options) {
 						}
 					}
 				}
+				var ratioFactor = function() {
+					if (!movesLeading) {
+						leadingRatioValue.current = null;
+						return paintedRatio;
+					}
+					leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), paintedRatio);
+					return leadingRatioValue.current;
+				};
+				var derivedLeading;
+				if (derivesLeading) {
+					var fontSizeFactor = style.fontSize;
+					if (movesFontSize) {
+						fontSizeFactor = update("fontSize", animatedValueFor("fontSize"), style.fontSize);
+						animateStyles.current.fontSize = fontSizeFactor;
+						seenAnimateKeys.add("fontSize");
+					}
+					derivedLeading = import_react_native.Animated.multiply(fontSizeFactor, ratioFactor());
+				} else if (inheritedFontSize) {
+					derivedLeading = import_react_native.Animated.multiply(inheritedFontSize, ratioFactor());
+				} else if (!isDisabled) {
+					leadingRatioValue.current = null;
+				}
+				paintsDerivedLeading.current = !!derivedLeading;
+				var ownFontSizeNode = fontSizeNode.current;
+				var textChannel = ownFontSizeNode ? ((_textChannelRef_current = textChannelRef.current) === null || _textChannelRef_current === void 0 ? void 0 : _textChannelRef_current.fontSize) === ownFontSizeNode ? textChannelRef.current : {
+					fontSize: ownFontSizeNode,
+					driver: "react-native"
+				} : typeof style.fontSize === "number" ? null : inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
+				textChannelRef.current = textChannel;
 				if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
 					for (var k in animateStyles.current) {
 						if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
@@ -365,11 +496,20 @@ function createAnimations(animations, options) {
 						var _animationsState_current_get;
 						return [k2, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
 					})),
+					...derivedLeading ? { lineHeight: derivedLeading } : null,
 					...animatedTransformStyle
 				};
+				if (!isDisabled) {
+					paintedTextRef.current = {
+						fontSize: style.fontSize,
+						lineHeight: style.lineHeight,
+						ratio: paintedRatio
+					};
+				}
 				return {
 					runners,
 					completions,
+					textChannel,
 					style: [nonAnimatedStyle, animatedStyle]
 				};
 				function update(key2, animated, valIn) {
@@ -509,20 +649,31 @@ function createAnimations(animations, options) {
 					}
 				});
 			}, args);
-			useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function(nextStyle, emittedTransition, pseudoActive) {
+			var onEmittedStyle = function(nextStyle, emittedTransition, pseudoActive, nextMetrics) {
 				pseudoActiveRef.current = pseudoActive === true;
 				var runners = [];
 				var seenAnimateKeys = /* @__PURE__ */ new Set();
 				var transformCount = 0;
 				var animatedShapeChanged = false;
 				var emittedResolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, { animations }), "default");
-				var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark, emittedResolved) && !Object.keys(animateStyles.current).some(function(key2) {
-					return layoutStyleKey[key2];
+				var emittedRatio = getLeadingRatio(nextMetrics);
+				var emitterPaintsProduct = paintsLeadingProduct(nextStyle, emittedRatio);
+				var emitterMovesFontSize = movesTextValue("fontSize", nextStyle.fontSize);
+				var emitterMovesLeading = emitterPaintsProduct ? movesLeadingRatio(emittedRatio) : movesTextValue("lineHeight", nextStyle.lineHeight);
+				var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark, emittedResolved) && !emitterMovesFontSize && !emitterMovesLeading && !inheritedFontSizeNode(nextStyle, emittedRatio, inheritedText) && !Object.keys(animateStyles.current).some(function(key2) {
+					return jsDriverStyleKey[key2];
 				});
+				var emitterDerivesLeading = emitterPaintsProduct && (emitterMovesFontSize || emitterMovesLeading) && (!!(0, import_animation_helpers.getTransitionForKey)(emittedResolved, "fontSize") || !!(0, import_animation_helpers.getTransitionForKey)(emittedResolved, "lineHeight"));
 				for (var key in nextStyle) {
 					var rawVal = nextStyle[key];
 					var val = resolveDynamicValue(rawVal, isDark);
 					if (val === void 0) continue;
+					if (emitterDerivesLeading && (key === "fontSize" || key === "lineHeight")) {
+						continue;
+					}
+					if (textMetricStyleKey[key] && !(key === "fontSize" ? emitterMovesFontSize : emitterMovesLeading)) {
+						continue;
+					}
 					if (key === "transform" && Array.isArray(val)) {
 						var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
 						try {
@@ -550,14 +701,28 @@ function createAnimations(animations, options) {
 								}
 							}
 						}
-					} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || layoutStyleKey[key]) {
-						if (layoutStyleKey[key] && typeof val !== "number") continue;
+					} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || jsDriverStyleKey[key]) {
+						if (jsDriverStyleKey[key] && typeof val !== "number") continue;
 						if (colorStyleKey[key] && !isAnimatableColor(val)) continue;
 						if (!animateStyles.current[key]) animatedShapeChanged = true;
-						animateStyles.current[key] = update(key, animateStyles.current[key], val);
+						animateStyles.current[key] = update(key, animatedValueFor(key), val);
 						seenAnimateKeys.add(key);
 					}
 				}
+				if (emitterDerivesLeading) {
+					if (emitterMovesFontSize) {
+						if (!animateStyles.current.fontSize) animatedShapeChanged = true;
+						animateStyles.current.fontSize = update("fontSize", animatedValueFor("fontSize"), nextStyle.fontSize);
+						seenAnimateKeys.add("fontSize");
+					}
+					if (emitterMovesLeading) {
+						if (!leadingRatioValue.current) animatedShapeChanged = true;
+						leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), emittedRatio);
+					}
+				}
+				if (emitterDerivesLeading !== paintsDerivedLeading.current) {
+					animatedShapeChanged = true;
+				}
 				for (var key1 in animateStyles.current) {
 					if (!seenAnimateKeys.has(key1)) {
 						delete animateStyles.current[key1];
@@ -568,6 +733,11 @@ function createAnimations(animations, options) {
 					animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
 					animatedShapeChanged = true;
 				}
+				paintedTextRef.current = {
+					fontSize: nextStyle.fontSize,
+					lineHeight: nextStyle.lineHeight,
+					ratio: emittedRatio
+				};
 				runners.forEach(function(r) {
 					return r();
 				});
@@ -609,7 +779,8 @@ function createAnimations(animations, options) {
 					});
 					return value;
 				}
-			});
+			};
+			useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(onEmittedStyle);
 			if (process.env.NODE_ENV === "development") {
 				if (props["debug"] === "verbose") {
 					console.info(`Animated`, {

package/dist/cjs/createAnimations.native.js

@@ -73,6 +73,14 @@ var layoutStyleKey = {
 	minWidth: true,
 	maxWidth: true
 };
+var textMetricStyleKey = {
+	fontSize: true,
+	lineHeight: true
+};
+var jsDriverStyleKey = {
+	...layoutStyleKey,
+	...textMetricStyleKey
+};
 function hasAnimatedLayoutKey(style, isDark, resolved) {
 	for (var key in layoutStyleKey) {
 		if (!(0, import_animation_helpers.getTransitionForKey)(resolved, key)) continue;
@@ -80,6 +88,16 @@ function hasAnimatedLayoutKey(style, isDark, resolved) {
 	}
 	return false;
 }
+var getLeadingRatio = function(metrics) {
+	var ratio = metrics === null || metrics === void 0 ? void 0 : metrics.lineHeight;
+	return typeof ratio === "number" && Number.isFinite(ratio) && ratio >= 0 ? ratio : void 0;
+};
+var paintsLeadingProduct = function(style, ratio) {
+	return ratio !== void 0 && typeof style.fontSize === "number" && typeof style.lineHeight === "number";
+};
+var inheritedFontSizeNode = function(style, ratio, inheritedText) {
+	return ratio !== void 0 && typeof style.fontSize !== "number" && (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : void 0;
+};
 function isAnimatableColor(value) {
 	return typeof value === "string" && (0, import_react_native.processColor)(value) != null;
 }
@@ -98,6 +116,7 @@ var costlyToAnimateStyleKey = {
 };
 var AnimatedView = import_react_native.Animated.View;
 var AnimatedText = import_react_native.Animated.Text;
+var animatedTextInput;
 function useAnimatedNumber(initial) {
 	var state = import_react.default.useRef(null);
 	if (!state.current) {
@@ -213,8 +232,31 @@ function createAnimations(animations, options) {
 		useAnimatedNumbersStyle,
 		usePresence: import_use_presence.usePresence,
 		ResetPresence: import_use_presence.ResetPresence,
+		useTextMetrics: function(param) {
+			var { inheritedText, lineHeight } = param;
+			var node = (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : null;
+			var ratio = typeof lineHeight === "number" ? lineHeight : null;
+			var style = import_react.default.useMemo(function() {
+				return node ? ratio === null ? { fontSize: node } : {
+					fontSize: node,
+					lineHeight: import_react_native.Animated.multiply(node, ratio)
+				} : null;
+			}, [node, ratio]);
+			var textChannel = inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
+			if (!style) return {
+				style: null,
+				textChannel
+			};
+			animatedTextInput || (animatedTextInput = import_react_native.Animated.createAnimatedComponent(import_react_native.TextInput));
+			return {
+				style,
+				textChannel,
+				Text: AnimatedText,
+				TextInput: animatedTextInput
+			};
+		},
 		useAnimations: function(param) {
-			var { props, onTransition, style, componentState, presence, stateRef, styleState, useStyleEmitter } = param;
+			var { props, onTransition, style, componentState, presence, stateRef, styleState, useStyleEmitter, inheritedText } = param;
 			var _themeState_name;
 			var isDisabled = import_constants.isWeb && componentState.unmounted === true;
 			var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
@@ -237,6 +279,36 @@ function createAnimations(animations, options) {
 			var [, themeState] = (0, import_internal_runtime.useThemeWithState)({});
 			var isDark = (themeState === null || themeState === void 0 ? void 0 : themeState.scheme) === "dark" || (themeState === null || themeState === void 0 ? void 0 : (_themeState_name = themeState.name) === null || _themeState_name === void 0 ? void 0 : _themeState_name.startsWith("dark"));
 			var animateStyles = import_react.default.useRef({});
+			var leadingRatioValue = import_react.default.useRef(null);
+			var leadingRatioRef = import_react.default.useRef(void 0);
+			var paintsDerivedLeading = import_react.default.useRef(false);
+			var textChannelRef = import_react.default.useRef(null);
+			leadingRatioRef.current = getLeadingRatio(styleState === null || styleState === void 0 ? void 0 : styleState.nativeTextMetrics);
+			var paintedTextRef = import_react.default.useRef({});
+			var movesTextValue = function(key, target) {
+				if (typeof target !== "number") return false;
+				var node = animateStyles.current[key];
+				var last = node ? node["_value"] : paintedTextRef.current[key];
+				return last !== void 0 && last !== target;
+			};
+			var movesLeadingRatio = function(ratio) {
+				if (ratio === void 0) return false;
+				var node = leadingRatioValue.current;
+				var last = node ? node["_value"] : paintedTextRef.current.ratio;
+				return last !== void 0 && last !== ratio;
+			};
+			var fontSizeNode = import_react.default.useRef(null);
+			var animatedValueFor = function(key) {
+				var painted = animateStyles.current[key];
+				if (painted) return painted;
+				if (key === "fontSize" && fontSizeNode.current) return fontSizeNode.current;
+				if (textMetricStyleKey[key]) return new import_react_native.Animated.Value(paintedTextRef.current[key]);
+				return void 0;
+			};
+			var leadingRatioValueFrom = function() {
+				var _leadingRatioValue_current;
+				return (_leadingRatioValue_current = leadingRatioValue.current) !== null && _leadingRatioValue_current !== void 0 ? _leadingRatioValue_current : new import_react_native.Animated.Value(paintedTextRef.current.ratio);
+			};
 			var animatedTranforms = import_react.default.useRef([]);
 			var animationsState = import_react.default.useRef(/* @__PURE__ */ new WeakMap());
 			var pseudoActiveRef = import_react.default.useRef(false);
@@ -270,18 +342,38 @@ function createAnimations(animations, options) {
 				isExiting,
 				!!onTransition,
 				isDark,
-				justFinishedEntering
+				justFinishedEntering,
+				leadingRatioRef.current,
+				inheritedText
 			];
 			var res = import_react.default.useMemo(function() {
+				var _textChannelRef_current;
 				var runners = [];
 				var completions = [];
 				var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
 				var resolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(effectiveTransition, { animations }), animationState);
 				var nonAnimatedStyle = {};
-				var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, resolved);
+				var paintedRatio = leadingRatioRef.current;
+				var paintsProduct = paintsLeadingProduct(style, paintedRatio);
+				var movesFontSize = movesTextValue("fontSize", style.fontSize);
+				var movesLeading = paintsProduct ? movesLeadingRatio(paintedRatio) : movesTextValue("lineHeight", style.lineHeight);
+				if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
+					if (!movesFontSize) delete animateStyles.current.fontSize;
+					if (!movesLeading) delete animateStyles.current.lineHeight;
+				}
+				if (isDisabled || typeof style.fontSize !== "number" || !(0, import_animation_helpers.getTransitionForKey)(resolved, "fontSize")) {
+					fontSizeNode.current = null;
+				} else if (!fontSizeNode.current) {
+					fontSizeNode.current = new import_react_native.Animated.Value(style.fontSize);
+				}
 				var seenAnimateKeys = /* @__PURE__ */ new Set();
 				var sawTransform = false;
 				var transformCount = 0;
+				var derivesLeading = !isDisabled && paintsProduct && (movesFontSize || movesLeading) && (!!(0, import_animation_helpers.getTransitionForKey)(resolved, "fontSize") || !!(0, import_animation_helpers.getTransitionForKey)(resolved, "lineHeight"));
+				var inheritedFontSize = isDisabled ? void 0 : inheritedFontSizeNode(style, paintedRatio, inheritedText);
+				var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, resolved) && !movesFontSize && !movesLeading && !inheritedFontSize && !Object.keys(animateStyles.current).some(function(key2) {
+					return jsDriverStyleKey[key2];
+				});
 				for (var key in style) {
 					var rawVal = style[key];
 					var val = resolveDynamicValue(rawVal, isDark);
@@ -289,7 +381,17 @@ function createAnimations(animations, options) {
 					if (isDisabled) {
 						continue;
 					}
-					if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !layoutStyleKey[key]) {
+					if ((derivesLeading || inheritedFontSize) && (key === "fontSize" || key === "lineHeight")) {
+						if (key === "fontSize" && derivesLeading && !movesFontSize) {
+							nonAnimatedStyle[key] = val;
+						}
+						continue;
+					}
+					if (textMetricStyleKey[key] && !(key === "fontSize" ? movesFontSize : movesLeading)) {
+						nonAnimatedStyle[key] = val;
+						continue;
+					}
+					if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !jsDriverStyleKey[key]) {
 						nonAnimatedStyle[key] = val;
 						continue;
 					}
@@ -297,7 +399,7 @@ function createAnimations(animations, options) {
 						nonAnimatedStyle[key] = val;
 						continue;
 					}
-					if (layoutStyleKey[key] && typeof val !== "number") {
+					if (jsDriverStyleKey[key] && typeof val !== "number") {
 						nonAnimatedStyle[key] = val;
 						continue;
 					}
@@ -306,7 +408,7 @@ function createAnimations(animations, options) {
 						continue;
 					}
 					if (key !== "transform") {
-						animateStyles.current[key] = update(key, animateStyles.current[key], val);
+						animateStyles.current[key] = update(key, animatedValueFor(key), val);
 						seenAnimateKeys.add(key);
 						continue;
 					}
@@ -343,6 +445,35 @@ function createAnimations(animations, options) {
 						}
 					}
 				}
+				var ratioFactor = function() {
+					if (!movesLeading) {
+						leadingRatioValue.current = null;
+						return paintedRatio;
+					}
+					leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), paintedRatio);
+					return leadingRatioValue.current;
+				};
+				var derivedLeading;
+				if (derivesLeading) {
+					var fontSizeFactor = style.fontSize;
+					if (movesFontSize) {
+						fontSizeFactor = update("fontSize", animatedValueFor("fontSize"), style.fontSize);
+						animateStyles.current.fontSize = fontSizeFactor;
+						seenAnimateKeys.add("fontSize");
+					}
+					derivedLeading = import_react_native.Animated.multiply(fontSizeFactor, ratioFactor());
+				} else if (inheritedFontSize) {
+					derivedLeading = import_react_native.Animated.multiply(inheritedFontSize, ratioFactor());
+				} else if (!isDisabled) {
+					leadingRatioValue.current = null;
+				}
+				paintsDerivedLeading.current = !!derivedLeading;
+				var ownFontSizeNode = fontSizeNode.current;
+				var textChannel = ownFontSizeNode ? ((_textChannelRef_current = textChannelRef.current) === null || _textChannelRef_current === void 0 ? void 0 : _textChannelRef_current.fontSize) === ownFontSizeNode ? textChannelRef.current : {
+					fontSize: ownFontSizeNode,
+					driver: "react-native"
+				} : typeof style.fontSize === "number" ? null : inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
+				textChannelRef.current = textChannel;
 				if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
 					for (var k in animateStyles.current) {
 						if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
@@ -365,11 +496,20 @@ function createAnimations(animations, options) {
 						var _animationsState_current_get;
 						return [k2, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
 					})),
+					...derivedLeading ? { lineHeight: derivedLeading } : null,
 					...animatedTransformStyle
 				};
+				if (!isDisabled) {
+					paintedTextRef.current = {
+						fontSize: style.fontSize,
+						lineHeight: style.lineHeight,
+						ratio: paintedRatio
+					};
+				}
 				return {
 					runners,
 					completions,
+					textChannel,
 					style: [nonAnimatedStyle, animatedStyle]
 				};
 				function update(key2, animated, valIn) {
@@ -509,20 +649,31 @@ function createAnimations(animations, options) {
 					}
 				});
 			}, args);
-			useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function(nextStyle, emittedTransition, pseudoActive) {
+			var onEmittedStyle = function(nextStyle, emittedTransition, pseudoActive, nextMetrics) {
 				pseudoActiveRef.current = pseudoActive === true;
 				var runners = [];
 				var seenAnimateKeys = /* @__PURE__ */ new Set();
 				var transformCount = 0;
 				var animatedShapeChanged = false;
 				var emittedResolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, { animations }), "default");
-				var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark, emittedResolved) && !Object.keys(animateStyles.current).some(function(key2) {
-					return layoutStyleKey[key2];
+				var emittedRatio = getLeadingRatio(nextMetrics);
+				var emitterPaintsProduct = paintsLeadingProduct(nextStyle, emittedRatio);
+				var emitterMovesFontSize = movesTextValue("fontSize", nextStyle.fontSize);
+				var emitterMovesLeading = emitterPaintsProduct ? movesLeadingRatio(emittedRatio) : movesTextValue("lineHeight", nextStyle.lineHeight);
+				var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark, emittedResolved) && !emitterMovesFontSize && !emitterMovesLeading && !inheritedFontSizeNode(nextStyle, emittedRatio, inheritedText) && !Object.keys(animateStyles.current).some(function(key2) {
+					return jsDriverStyleKey[key2];
 				});
+				var emitterDerivesLeading = emitterPaintsProduct && (emitterMovesFontSize || emitterMovesLeading) && (!!(0, import_animation_helpers.getTransitionForKey)(emittedResolved, "fontSize") || !!(0, import_animation_helpers.getTransitionForKey)(emittedResolved, "lineHeight"));
 				for (var key in nextStyle) {
 					var rawVal = nextStyle[key];
 					var val = resolveDynamicValue(rawVal, isDark);
 					if (val === void 0) continue;
+					if (emitterDerivesLeading && (key === "fontSize" || key === "lineHeight")) {
+						continue;
+					}
+					if (textMetricStyleKey[key] && !(key === "fontSize" ? emitterMovesFontSize : emitterMovesLeading)) {
+						continue;
+					}
 					if (key === "transform" && Array.isArray(val)) {
 						var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
 						try {
@@ -550,14 +701,28 @@ function createAnimations(animations, options) {
 								}
 							}
 						}
-					} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || layoutStyleKey[key]) {
-						if (layoutStyleKey[key] && typeof val !== "number") continue;
+					} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || jsDriverStyleKey[key]) {
+						if (jsDriverStyleKey[key] && typeof val !== "number") continue;
 						if (colorStyleKey[key] && !isAnimatableColor(val)) continue;
 						if (!animateStyles.current[key]) animatedShapeChanged = true;
-						animateStyles.current[key] = update(key, animateStyles.current[key], val);
+						animateStyles.current[key] = update(key, animatedValueFor(key), val);
 						seenAnimateKeys.add(key);
 					}
 				}
+				if (emitterDerivesLeading) {
+					if (emitterMovesFontSize) {
+						if (!animateStyles.current.fontSize) animatedShapeChanged = true;
+						animateStyles.current.fontSize = update("fontSize", animatedValueFor("fontSize"), nextStyle.fontSize);
+						seenAnimateKeys.add("fontSize");
+					}
+					if (emitterMovesLeading) {
+						if (!leadingRatioValue.current) animatedShapeChanged = true;
+						leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), emittedRatio);
+					}
+				}
+				if (emitterDerivesLeading !== paintsDerivedLeading.current) {
+					animatedShapeChanged = true;
+				}
 				for (var key1 in animateStyles.current) {
 					if (!seenAnimateKeys.has(key1)) {
 						delete animateStyles.current[key1];
@@ -568,6 +733,11 @@ function createAnimations(animations, options) {
 					animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
 					animatedShapeChanged = true;
 				}
+				paintedTextRef.current = {
+					fontSize: nextStyle.fontSize,
+					lineHeight: nextStyle.lineHeight,
+					ratio: emittedRatio
+				};
 				runners.forEach(function(r) {
 					return r();
 				});
@@ -609,7 +779,8 @@ function createAnimations(animations, options) {
 					});
 					return value;
 				}
-			});
+			};
+			useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(onEmittedStyle);
 			if (process.env.NODE_ENV === "development") {
 				if (props["debug"] === "verbose") {
 					console.info(`Animated`, {