@tamagui/animations-react-native 3.0.0-beta.924.1 → 3.0.0

package/dist/cjs/createAnimations.native.js

@@ -26,8 +26,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var createAnimations_exports = {};
-__export(createAnimations_exports, {
+var createAnimations_native_exports = {};
+__export(createAnimations_native_exports, {
 	AnimatedText: () => AnimatedText,
 	AnimatedView: () => AnimatedView,
 	createAnimations: () => createAnimations,
@@ -36,7 +36,7 @@ __export(createAnimations_exports, {
 	useAnimatedNumberStyle: () => useAnimatedNumberStyle,
 	useAnimatedNumbersStyle: () => useAnimatedNumbersStyle
 });
-module.exports = __toCommonJS(createAnimations_exports);
+module.exports = __toCommonJS(createAnimations_native_exports);
 var import_animation_helpers = require("@tamagui/animation-helpers");
 var import_constants = require("@tamagui/constants");
 var import_use_presence = require("@tamagui/use-presence");
@@ -44,13 +44,9 @@ var import_web = require("@tamagui/web");
 var import_internal_runtime = require("@tamagui/web/internal-runtime");
 var import_react = __toESM(require("react"), 1);
 var import_react_native = require("react-native");
-function _type_of(obj) {
-	"@swc/helpers - typeof";
-	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
 var isFabric = !import_constants.isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
 var resolveDynamicValue = function(value, isDark) {
-	if (value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "dynamic" in value) {
+	if (value && typeof value === "object" && "dynamic" in value) {
 		var dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
 		return dynamicValue;
 	}
@@ -77,13 +73,31 @@ var layoutStyleKey = {
 	minWidth: true,
 	maxWidth: true
 };
-function hasAnimatedLayoutKey(style, isDark, animateOnly) {
+var textMetricStyleKey = {
+	fontSize: true,
+	lineHeight: true
+};
+var jsDriverStyleKey = {
+	...layoutStyleKey,
+	...textMetricStyleKey
+};
+function hasAnimatedLayoutKey(style, isDark, resolved) {
 	for (var key in layoutStyleKey) {
-		if (animateOnly && !animateOnly.includes(key)) continue;
+		if (!(0, import_animation_helpers.getTransitionForKey)(resolved, key)) continue;
 		if (typeof resolveDynamicValue(style[key], isDark) === "number") return true;
 	}
 	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;
 }
@@ -102,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) {
@@ -131,10 +146,14 @@ function useAnimatedNumber(initial) {
 				return finished ? onFinish() : null;
 			} : void 0;
 			if (type === "direct") {
-				val.setValue(next);
-			} else if (type === "spring") {
 				var _state_current_composite;
 				(_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
+				state.current.composite = null;
+				val.setValue(next);
+				onFinish === null || onFinish === void 0 ? void 0 : onFinish();
+			} else if (type === "spring") {
+				var _state_current_composite1;
+				(_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
 				var composite = import_react_native.Animated.spring(val, {
 					...config,
 					toValue: next,
@@ -143,8 +162,8 @@ function useAnimatedNumber(initial) {
 				composite.start(handleFinish);
 				state.current.composite = composite;
 			} else {
-				var _state_current_composite1;
-				(_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
+				var _state_current_composite2;
+				(_state_current_composite2 = state.current.composite) === null || _state_current_composite2 === void 0 ? void 0 : _state_current_composite2.stop();
 				var composite1 = import_react_native.Animated.timing(val, {
 					...config,
 					toValue: next,
@@ -186,7 +205,7 @@ var useAnimatedNumberStyle = function(value, getStyle) {
 	return usesAnimatedNode ? animatedStyle : getStyle(current);
 };
 function hasAnimatedNode(value) {
-	if (!value || (typeof value === "undefined" ? "undefined" : _type_of(value)) !== "object") return false;
+	if (!value || typeof value !== "object") return false;
 	if (typeof value.__getValue === "function") return true;
 	if (Array.isArray(value)) return value.some(hasAnimatedNode);
 	return Object.values(value).some(hasAnimatedNode);
@@ -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, 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;
@@ -232,9 +274,41 @@ function createAnimations(animations, options) {
 					cause
 				});
 			};
+			var _styleState_effectiveTransition;
+			var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
 			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);
@@ -255,8 +329,6 @@ function createAnimations(animations, options) {
 			if (justStoppedExiting) {
 				exitCycleIdRef.current++;
 			}
-			var animateOnly = props.animateOnly || [];
-			var hasTransitionOnly = !!props.animateOnly;
 			var isEntering = !!componentState.unmounted;
 			var wasEnteringRef = import_react.default.useRef(isEntering);
 			var justFinishedEntering = wasEnteringRef.current && !isEntering;
@@ -265,22 +337,43 @@ function createAnimations(animations, options) {
 			});
 			var args = [
 				JSON.stringify(style),
+				JSON.stringify(effectiveTransition),
 				componentState,
 				isExiting,
 				!!onTransition,
 				isDark,
 				justFinishedEntering,
-				hasTransitionOnly
+				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, hasTransitionOnly ? animateOnly : void 0);
+				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);
@@ -288,15 +381,25 @@ 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 (hasTransitionOnly && !animateOnly.includes(key)) {
+					if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !jsDriverStyleKey[key]) {
 						nonAnimatedStyle[key] = val;
 						continue;
 					}
-					if (layoutStyleKey[key] && typeof val !== "number") {
+					if (key !== "transform" && !(0, import_animation_helpers.getTransitionForKey)(resolved, key)) {
+						nonAnimatedStyle[key] = val;
+						continue;
+					}
+					if (jsDriverStyleKey[key] && typeof val !== "number") {
 						nonAnimatedStyle[key] = val;
 						continue;
 					}
@@ -305,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;
 					}
@@ -342,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];
@@ -364,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) {
@@ -396,7 +537,7 @@ function createAnimations(animations, options) {
 						});
 					}
 					if (value) {
-						var animationConfig = getAnimationConfig(key2, animations, props.transition, animationState);
+						var animationConfig = getAnimationConfig(key2, animations, effectiveTransition, animationState);
 						var resolve;
 						var promise = new Promise(function(res2) {
 							resolve = res2;
@@ -404,15 +545,14 @@ function createAnimations(animations, options) {
 						completions.push(promise);
 						runners.push(function() {
 							value.stopAnimation();
-							function getAnimation() {
-								return import_react_native.Animated[animationConfig.type || "spring"](value, {
-									toValue: animateToValue,
-									...animationConfig,
-									useNativeDriver: useNativeDriverForNode
-								});
-							}
-							var animation = animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
-							animation.start(function(param2) {
+							var { type: type2, delay, ...config } = animationConfig;
+							var animation = import_react_native.Animated[type2 || "spring"](value, {
+								toValue: animateToValue,
+								...config,
+								useNativeDriver: useNativeDriverForNode
+							});
+							var animation2 = delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(delay), animation]) : animation;
+							animation2.start(function(param2) {
 								var { finished } = param2;
 								if (finished || isExiting) {
 									resolve();
@@ -509,19 +649,31 @@ function createAnimations(animations, options) {
 					}
 				});
 			}, args);
-			useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function(nextStyle, _effectiveTransition, 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 useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark) && !Object.keys(animateStyles.current).some(function(key2) {
-					return layoutStyleKey[key2];
+				var emittedResolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, { animations }), "default");
+				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 {
@@ -549,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];
@@ -567,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();
 				});
@@ -595,19 +766,21 @@ function createAnimations(animations, options) {
 							animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
 						});
 					}
-					var animationConfig = getAnimationConfig(key2, animations, props.transition, "default");
+					var animationConfig = getAnimationConfig(key2, animations, emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, "default");
 					runners.push(function() {
 						value.stopAnimation();
-						var anim = import_react_native.Animated[animationConfig.type || "spring"](value, {
+						var { type: type2, delay, ...config } = animationConfig;
+						var anim = import_react_native.Animated[type2 || "spring"](value, {
 							toValue: animateToValue,
-							...animationConfig,
+							...config,
 							useNativeDriver: useNativeDriverForNode
 						});
-						(animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), anim]) : anim).start();
+						(delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(delay), anim]) : anim).start();
 					});
 					return value;
 				}
-			});
+			};
+			useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(onEmittedStyle);
 			if (process.env.NODE_ENV === "development") {
 				if (props["debug"] === "verbose") {
 					console.info(`Animated`, {
@@ -648,41 +821,37 @@ function getInterpolated(current, next) {
 		outputRange
 	};
 }
-function getAnimationConfig(key, animations, transition) {
-	var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
-	var normalized = (0, import_animation_helpers.normalizeTransition)(transition);
-	var shortKey = transformShorthands[key];
-	var _normalized_properties_key;
-	var propAnimation = (_normalized_properties_key = normalized.properties[key]) !== null && _normalized_properties_key !== void 0 ? _normalized_properties_key : normalized.properties[shortKey];
-	var animationType = null;
-	var extraConf = {};
-	if (typeof propAnimation === "string") {
-		animationType = propAnimation;
-	} else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object") {
-		animationType = propAnimation.type || (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-		extraConf = propAnimation;
-	} else {
-		animationType = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
-	}
-	if (normalized.delay && !extraConf.delay) {
-		extraConf = {
-			...extraConf,
-			delay: normalized.delay
+function entryToRN(entry) {
+	var extra = entry.timing.kind === "spring" ? entry.timing.extra : void 0;
+	if (entry.timing.kind === "spring") {
+		return {
+			type: "spring",
+			stiffness: entry.timing.stiffness,
+			damping: entry.timing.damping,
+			mass: entry.timing.mass,
+			...typeof (extra === null || extra === void 0 ? void 0 : extra.velocity) === "number" ? { velocity: extra.velocity } : null,
+			...typeof (extra === null || extra === void 0 ? void 0 : extra.overshootClamping) === "boolean" ? { overshootClamping: extra.overshootClamping } : null,
+			...entry.delayMs ? { delay: entry.delayMs } : null
 		};
 	}
-	var found = animationType ? animations[animationType] : {};
+	var bezier = (0, import_animation_helpers.easingToBezier)(entry.timing.easing);
 	return {
-		...found,
-		...normalized.config,
-		...extraConf
+		type: "timing",
+		duration: entry.timing.durationMs,
+		...bezier ? { easing: import_react_native.Easing.bezier(bezier[0], bezier[1], bezier[2], bezier[3]) } : null,
+		...entry.delayMs ? { delay: entry.delayMs } : null
 	};
 }
-var transformShorthands = {
-	x: "translateX",
-	y: "translateY",
-	translateX: "x",
-	translateY: "y"
+var snapConfig = {
+	type: "timing",
+	duration: 0
 };
+function getAnimationConfig(key, animations, transition) {
+	var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
+	var resolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(transition, { animations }), animationState);
+	var entry = (0, import_animation_helpers.getTransitionForKey)(resolved, key);
+	return entry ? entryToRN(entry) : snapConfig;
+}
 function getValue(input) {
 	var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
 	if (typeof input !== "string") {