@tamagui/animations-react-native 2.7.7 → 3.0.0-beta.637.1

package/dist/esm/createAnimations.mjs

@@ -3,522 +3,582 @@ import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { ResetPresence, usePresence } from "@tamagui/use-presence";
 import { useEvent, useThemeWithState } from "@tamagui/web";
 import React from "react";
-import { Animated } from "react-native-web";
+import { Animated, processColor } from "react-native-web";
+
 const isFabric = !isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
 const resolveDynamicValue = (value, isDark) => {
-  if (value && typeof value === "object" && "dynamic" in value) {
-    const dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
-    return dynamicValue;
-  }
-  return value;
+	if (value && typeof value === "object" && "dynamic" in value) {
+		const dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
+		return dynamicValue;
+	}
+	return value;
 };
 const animatedStyleKey = {
-  transform: true,
-  opacity: true
+	transform: true,
+	opacity: true
 };
 const colorStyleKey = {
-  backgroundColor: true,
-  color: true,
-  borderColor: true,
-  borderLeftColor: true,
-  borderRightColor: true,
-  borderTopColor: true,
-  borderBottomColor: true
+	backgroundColor: true,
+	color: true,
+	borderColor: true,
+	borderLeftColor: true,
+	borderRightColor: true,
+	borderTopColor: true,
+	borderBottomColor: true
 };
 const layoutStyleKey = {
-  height: true,
-  width: true,
-  minHeight: true,
-  maxHeight: true,
-  minWidth: true,
-  maxWidth: true
+	height: true,
+	width: true,
+	minHeight: true,
+	maxHeight: true,
+	minWidth: true,
+	maxWidth: true
 };
 function hasAnimatedLayoutKey(style, isDark, animateOnly) {
-  for (const key in layoutStyleKey) {
-    if (animateOnly && !animateOnly.includes(key)) continue;
-    if (typeof resolveDynamicValue(style[key], isDark) === "number") return true;
-  }
-  return false;
+	for (const key in layoutStyleKey) {
+		if (animateOnly && !animateOnly.includes(key)) continue;
+		if (typeof resolveDynamicValue(style[key], isDark) === "number") return true;
+	}
+	return false;
 }
 function isAnimatableColor(value) {
-  if (typeof value !== "string") return false;
-  if (value === "") return false;
-  if (value.includes("var(") || value.includes("calc(")) return false;
-  return true;
+	return typeof value === "string" && processColor(value) != null;
 }
 const costlyToAnimateStyleKey = {
-  borderRadius: true,
-  borderTopLeftRadius: true,
-  borderTopRightRadius: true,
-  borderBottomLeftRadius: true,
-  borderBottomRightRadius: true,
-  borderWidth: true,
-  borderLeftWidth: true,
-  borderRightWidth: true,
-  borderTopWidth: true,
-  borderBottomWidth: true,
-  ...colorStyleKey
+	borderRadius: true,
+	borderTopLeftRadius: true,
+	borderTopRightRadius: true,
+	borderBottomLeftRadius: true,
+	borderBottomRightRadius: true,
+	borderWidth: true,
+	borderLeftWidth: true,
+	borderRightWidth: true,
+	borderTopWidth: true,
+	borderBottomWidth: true,
+	...colorStyleKey
 };
 const AnimatedView = Animated.View;
 const AnimatedText = Animated.Text;
 function useAnimatedNumber(initial) {
-  const state = React.useRef(null);
-  if (!state.current) {
-    state.current = {
-      composite: null,
-      val: new Animated.Value(initial),
-      strategy: {
-        type: "spring"
-      }
-    };
-  }
-  return {
-    getInstance() {
-      return state.current.val;
-    },
-    getValue() {
-      return state.current.val["_value"];
-    },
-    stop() {
-      state.current.composite?.stop();
-      state.current.composite = null;
-    },
-    setValue(next, {
-      type,
-      ...config
-    } = {
-      type: "spring"
-    }, onFinish) {
-      const val = state.current.val;
-      const handleFinish = onFinish ? ({
-        finished
-      }) => finished ? onFinish() : null : void 0;
-      if (type === "direct") {
-        val.setValue(next);
-      } else if (type === "spring") {
-        state.current.composite?.stop();
-        const composite = Animated.spring(val, {
-          ...config,
-          toValue: next,
-          useNativeDriver: isFabric
-        });
-        composite.start(handleFinish);
-        state.current.composite = composite;
-      } else {
-        state.current.composite?.stop();
-        const composite = Animated.timing(val, {
-          ...config,
-          toValue: next,
-          useNativeDriver: isFabric
-        });
-        composite.start(handleFinish);
-        state.current.composite = composite;
-      }
-    }
-  };
+	const state = React.useRef(null);
+	if (!state.current) {
+		state.current = {
+			composite: null,
+			val: new Animated.Value(initial),
+			strategy: { type: "spring" }
+		};
+	}
+	return {
+		getInstance() {
+			return state.current.val;
+		},
+		getValue() {
+			return state.current.val["_value"];
+		},
+		stop() {
+			state.current.composite?.stop();
+			state.current.composite = null;
+		},
+		setValue(next, { type, ...config } = { type: "spring" }, onFinish) {
+			const val = state.current.val;
+			const handleFinish = onFinish ? ({ finished }) => finished ? onFinish() : null : void 0;
+			if (type === "direct") {
+				val.setValue(next);
+			} else if (type === "spring") {
+				state.current.composite?.stop();
+				const composite = Animated.spring(val, {
+					...config,
+					toValue: next,
+					useNativeDriver: isFabric
+				});
+				composite.start(handleFinish);
+				state.current.composite = composite;
+			} else {
+				state.current.composite?.stop();
+				const composite = Animated.timing(val, {
+					...config,
+					toValue: next,
+					useNativeDriver: isFabric
+				});
+				composite.start(handleFinish);
+				state.current.composite = composite;
+			}
+		}
+	};
 }
-const useAnimatedNumberReaction = ({
-  value
-}, onValue) => {
-  const onChange = useEvent(current => {
-    onValue(current.value);
-  });
-  React.useEffect(() => {
-    const id = value.getInstance().addListener(onChange);
-    return () => {
-      value.getInstance().removeListener(id);
-    };
-  }, [value, onChange]);
+const useAnimatedNumberReaction = ({ value }, onValue) => {
+	const onChange = useEvent((current) => {
+		onValue(current.value);
+	});
+	React.useEffect(() => {
+		const id = value.getInstance().addListener(onChange);
+		return () => {
+			value.getInstance().removeListener(id);
+		};
+	}, [value, onChange]);
 };
 const useAnimatedNumberStyle = (value, getStyle) => {
-  return getStyle(value.getInstance());
+	const instance = value.getInstance();
+	const animatedStyle = getStyle(instance);
+	const usesAnimatedNode = hasAnimatedNode(animatedStyle);
+	const [current, setCurrent] = React.useState(value.getValue());
+	React.useEffect(() => {
+		if (usesAnimatedNode) return;
+		const id = instance.addListener(({ value: next }) => {
+			setCurrent(next);
+		});
+		return () => {
+			instance.removeListener(id);
+		};
+	}, [instance, usesAnimatedNode]);
+	return usesAnimatedNode ? animatedStyle : getStyle(current);
 };
+function hasAnimatedNode(value) {
+	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);
+}
 const useAnimatedNumbersStyle = (vals, getStyle) => {
-  return getStyle(...vals.map(v => v.getInstance()));
+	return getStyle(...vals.map((v) => v.getInstance()));
 };
 function createAnimations(animations, options) {
-  const nativeDriver = options?.useNativeDriver ?? isFabric;
-  return {
-    isReactNative: true,
-    inputStyle: "value",
-    outputStyle: "inline",
-    avoidReRenders: true,
-    animations,
-    needsCustomComponent: true,
-    View: AnimatedView,
-    Text: AnimatedText,
-    useAnimatedNumber,
-    useAnimatedNumberReaction,
-    useAnimatedNumberStyle,
-    useAnimatedNumbersStyle,
-    usePresence,
-    ResetPresence,
-    useAnimations: ({
-      props,
-      onDidAnimate,
-      style,
-      componentState,
-      presence,
-      stateRef,
-      useStyleEmitter
-    }) => {
-      const isDisabled = isWeb && componentState.unmounted === true;
-      const isExiting = presence?.[0] === false;
-      const sendExitComplete = presence?.[1];
-      const [, themeState] = useThemeWithState({});
-      const isDark = themeState?.scheme === "dark" || themeState?.name?.startsWith("dark");
-      const animateStyles = React.useRef({});
-      const animatedTranforms = React.useRef([]);
-      const animationsState = React.useRef(/* @__PURE__ */new WeakMap());
-      const pseudoActiveRef = React.useRef(false);
-      const exitCycleIdRef = React.useRef(0);
-      const exitCompletedRef = React.useRef(false);
-      const wasExitingRef = React.useRef(false);
-      const justStartedExiting = isExiting && !wasExitingRef.current;
-      const justStoppedExiting = !isExiting && wasExitingRef.current;
-      if (justStartedExiting) {
-        exitCycleIdRef.current++;
-        exitCompletedRef.current = false;
-      }
-      if (justStoppedExiting) {
-        exitCycleIdRef.current++;
-      }
-      const animateOnly = props.animateOnly || [];
-      const hasTransitionOnly = !!props.animateOnly;
-      const isEntering = !!componentState.unmounted;
-      const wasEnteringRef = React.useRef(isEntering);
-      const justFinishedEntering = wasEnteringRef.current && !isEntering;
-      React.useEffect(() => {
-        wasEnteringRef.current = isEntering;
-      });
-      const args = [JSON.stringify(style), componentState, isExiting, !!onDidAnimate, isDark, justFinishedEntering, hasTransitionOnly];
-      const res = React.useMemo(() => {
-        const runners = [];
-        const completions = [];
-        const animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
-        const nonAnimatedStyle = {};
-        const useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, hasTransitionOnly ? animateOnly : void 0);
-        const seenAnimateKeys = /* @__PURE__ */new Set();
-        let sawTransform = false;
-        let transformCount = 0;
-        for (const key in style) {
-          const rawVal = style[key];
-          const val = resolveDynamicValue(rawVal, isDark);
-          if (val === void 0) continue;
-          if (isDisabled) {
-            continue;
-          }
-          if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !layoutStyleKey[key]) {
-            nonAnimatedStyle[key] = val;
-            continue;
-          }
-          if (hasTransitionOnly && !animateOnly.includes(key)) {
-            nonAnimatedStyle[key] = val;
-            continue;
-          }
-          if (layoutStyleKey[key] && typeof val !== "number") {
-            nonAnimatedStyle[key] = val;
-            continue;
-          }
-          if (colorStyleKey[key] && !isAnimatableColor(val)) {
-            nonAnimatedStyle[key] = val;
-            continue;
-          }
-          if (key !== "transform") {
-            animateStyles.current[key] = update(key, animateStyles.current[key], val);
-            seenAnimateKeys.add(key);
-            continue;
-          }
-          if (!val) continue;
-          if (typeof val === "string") {
-            console.warn(`Warning: Tamagui can't animate string transforms yet!`);
-            continue;
-          }
-          sawTransform = true;
-          for (const transform of val) {
-            if (!transform) continue;
-            const index = transformCount++;
-            const tkey = Object.keys(transform)[0];
-            const currentTransform = animatedTranforms.current[index]?.[tkey];
-            animatedTranforms.current[index] = {
-              [tkey]: update(tkey, currentTransform, transform[tkey])
-            };
-            animatedTranforms.current = [...animatedTranforms.current];
-          }
-        }
-        if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
-          for (const k in animateStyles.current) {
-            if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
-          }
-          if (!sawTransform) {
-            if (animatedTranforms.current.length) animatedTranforms.current = [];
-          } else if (animatedTranforms.current.length > transformCount) {
-            animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
-          }
-        }
-        const animatedTransformStyle = animatedTranforms.current.length > 0 ? {
-          transform: animatedTranforms.current.map(r => {
-            const key = Object.keys(r)[0];
-            const val = animationsState.current.get(r[key])?.interpolation || r[key];
-            return {
-              [key]: val
-            };
-          })
-        } : {};
-        const animatedStyle = {
-          ...Object.fromEntries(Object.entries(animateStyles.current).map(([k, v]) => [k, animationsState.current.get(v)?.interpolation || v])),
-          ...animatedTransformStyle
-        };
-        return {
-          runners,
-          completions,
-          style: [nonAnimatedStyle, animatedStyle]
-        };
-        function update(key, animated, valIn) {
-          const isColorStyleKey = colorStyleKey[key];
-          const [val, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
-          let animateToValue = val;
-          const value = animated || new Animated.Value(val);
-          const curInterpolation = animationsState.current.get(value);
-          let interpolateArgs;
-          if (type) {
-            interpolateArgs = getInterpolated(curInterpolation?.current ?? value["_value"], val, type);
-            animationsState.current.set(value, {
-              interpolation: value.interpolate(interpolateArgs),
-              current: val
-            });
-          }
-          if (isColorStyleKey) {
-            animateToValue = curInterpolation?.animateToValue ? 0 : 1;
-            interpolateArgs = getColorInterpolated(curInterpolation?.current,
-            // valIn is the next color
-            valIn, animateToValue);
-            animationsState.current.set(value, {
-              current: valIn,
-              interpolation: value.interpolate(interpolateArgs),
-              animateToValue: curInterpolation?.animateToValue ? 0 : 1
-            });
-          }
-          if (value) {
-            const animationConfig = getAnimationConfig(key, animations, props.transition, animationState);
-            let resolve;
-            const promise = new Promise(res2 => {
-              resolve = res2;
-            });
-            completions.push(promise);
-            runners.push(() => {
-              value.stopAnimation();
-              function getAnimation() {
-                return Animated[animationConfig.type || "spring"](value, {
-                  toValue: animateToValue,
-                  ...animationConfig,
-                  useNativeDriver: useNativeDriverForNode
-                });
-              }
-              const animation = animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
-              animation.start(({
-                finished
-              }) => {
-                if (finished || isExiting) {
-                  resolve();
-                }
-              });
-            });
-          }
-          if (process.env.NODE_ENV === "development") {
-            if (props["debug"] === "verbose") {
-              console.info(" \u{1F4A0} animate", key, `from (${value["_value"]}) to`, valIn, `(${val})`, "type", type, "interpolate", interpolateArgs);
-            }
-          }
-          return value;
-        }
-      }, args);
-      React.useEffect(() => {
-        wasExitingRef.current = isExiting;
-      });
-      useIsomorphicLayoutEffect(() => {
-        res.runners.forEach(r => r());
-        const cycleId = exitCycleIdRef.current;
-        if (res.completions.length === 0) {
-          onDidAnimate?.();
-          if (isExiting && !exitCompletedRef.current) {
-            exitCompletedRef.current = true;
-            sendExitComplete?.();
-          }
-          return;
-        }
-        let cancel = false;
-        Promise.all(res.completions).then(() => {
-          if (cancel) return;
-          if (isExiting && cycleId !== exitCycleIdRef.current) return;
-          if (isExiting && exitCompletedRef.current) return;
-          onDidAnimate?.();
-          if (isExiting) {
-            exitCompletedRef.current = true;
-            sendExitComplete?.();
-          }
-        });
-        return () => {
-          cancel = true;
-        };
-      }, args);
-      useStyleEmitter?.((nextStyle, _effectiveTransition, pseudoActive) => {
-        pseudoActiveRef.current = pseudoActive === true;
-        const runners = [];
-        const seenAnimateKeys = /* @__PURE__ */new Set();
-        let transformCount = 0;
-        let animatedShapeChanged = false;
-        const useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark) && !Object.keys(animateStyles.current).some(key => layoutStyleKey[key]);
-        for (const key in nextStyle) {
-          const rawVal = nextStyle[key];
-          const val = resolveDynamicValue(rawVal, isDark);
-          if (val === void 0) continue;
-          if (key === "transform" && Array.isArray(val)) {
-            for (const transform of val) {
-              if (!transform) continue;
-              const index = transformCount++;
-              const tkey = Object.keys(transform)[0];
-              const currentTransform = animatedTranforms.current[index]?.[tkey];
-              if (!currentTransform) animatedShapeChanged = true;
-              animatedTranforms.current[index] = {
-                [tkey]: update(tkey, currentTransform, transform[tkey])
-              };
-            }
-          } else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || layoutStyleKey[key]) {
-            if (layoutStyleKey[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);
-            seenAnimateKeys.add(key);
-          }
-        }
-        for (const key in animateStyles.current) {
-          if (!seenAnimateKeys.has(key)) {
-            delete animateStyles.current[key];
-            animatedShapeChanged = true;
-          }
-        }
-        if (animatedTranforms.current.length > transformCount) {
-          animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
-          animatedShapeChanged = true;
-        }
-        runners.forEach(r => r());
-        if (animatedShapeChanged && stateRef.current.nextState) {
-          stateRef.current.baseSetStateShallow?.(stateRef.current.nextState);
-        }
-        function update(key, animated, valIn) {
-          const isColor = colorStyleKey[key];
-          const [numVal, type] = isColor ? [0, void 0] : getValue(valIn);
-          let animateToValue = numVal;
-          const value = animated || new Animated.Value(numVal);
-          const curInterpolation = animationsState.current.get(value);
-          if (type) {
-            animationsState.current.set(value, {
-              interpolation: value.interpolate(getInterpolated(curInterpolation?.current ?? value["_value"], numVal, type)),
-              current: numVal
-            });
-          }
-          if (isColor) {
-            animateToValue = curInterpolation?.animateToValue ? 0 : 1;
-            animationsState.current.set(value, {
-              current: valIn,
-              interpolation: value.interpolate(getColorInterpolated(curInterpolation?.current, valIn, animateToValue)),
-              animateToValue: curInterpolation?.animateToValue ? 0 : 1
-            });
-          }
-          const animationConfig = getAnimationConfig(key, animations, props.transition, "default");
-          runners.push(() => {
-            value.stopAnimation();
-            const anim = Animated[animationConfig.type || "spring"](value, {
-              toValue: animateToValue,
-              ...animationConfig,
-              useNativeDriver: useNativeDriverForNode
-            });
-            (animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), anim]) : anim).start();
-          });
-          return value;
-        }
-      });
-      if (process.env.NODE_ENV === "development") {
-        if (props["debug"] === "verbose") {
-          console.info(`Animated`, {
-            response: res,
-            inputStyle: style,
-            isExiting
-          });
-        }
-      }
-      return res;
-    }
-  };
+	const nativeDriver = options?.useNativeDriver ?? isFabric;
+	return {
+		isReactNative: true,
+		inputStyle: "value",
+		outputStyle: "inline",
+		avoidReRenders: true,
+		animations,
+		needsCustomComponent: true,
+		View: AnimatedView,
+		Text: AnimatedText,
+		useAnimatedNumber,
+		useAnimatedNumberReaction,
+		useAnimatedNumberStyle,
+		useAnimatedNumbersStyle,
+		usePresence,
+		ResetPresence,
+		useAnimations: ({ props, onTransition, style, componentState, presence, stateRef, useStyleEmitter }) => {
+			const isDisabled = isWeb && componentState.unmounted === true;
+			const isExiting = presence?.[0] === false;
+			const sendExitComplete = presence?.[1];
+			const onTransitionRef = React.useRef(onTransition);
+			onTransitionRef.current = onTransition;
+			const emit = (phase, cause, finished) => {
+				onTransitionRef.current?.(phase === "end" ? {
+					phase,
+					cause,
+					finished
+				} : {
+					phase,
+					cause
+				});
+			};
+			const [, themeState] = useThemeWithState({});
+			const isDark = themeState?.scheme === "dark" || themeState?.name?.startsWith("dark");
+			const animateStyles = React.useRef({});
+			const animatedTranforms = React.useRef([]);
+			const animationsState = React.useRef(/* @__PURE__ */ new WeakMap());
+			const pseudoActiveRef = React.useRef(false);
+			const exitCycleIdRef = React.useRef(0);
+			const exitCompletedRef = React.useRef(false);
+			const wasExitingRef = React.useRef(false);
+			const enterStartedRef = React.useRef(false);
+			const exitStartedRef = React.useRef(false);
+			const updateInFlightRef = React.useRef(false);
+			const updateCycleIdRef = React.useRef(0);
+			const prevStyleSigRef = React.useRef(null);
+			const justStartedExiting = isExiting && !wasExitingRef.current;
+			const justStoppedExiting = !isExiting && wasExitingRef.current;
+			if (justStartedExiting) {
+				exitCycleIdRef.current++;
+				exitCompletedRef.current = false;
+			}
+			if (justStoppedExiting) {
+				exitCycleIdRef.current++;
+			}
+			const animateOnly = props.animateOnly || [];
+			const hasTransitionOnly = !!props.animateOnly;
+			const isEntering = !!componentState.unmounted;
+			const wasEnteringRef = React.useRef(isEntering);
+			const justFinishedEntering = wasEnteringRef.current && !isEntering;
+			React.useEffect(() => {
+				wasEnteringRef.current = isEntering;
+			});
+			const args = [
+				JSON.stringify(style),
+				componentState,
+				isExiting,
+				!!onTransition,
+				isDark,
+				justFinishedEntering,
+				hasTransitionOnly
+			];
+			const res = React.useMemo(() => {
+				const runners = [];
+				const completions = [];
+				const animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
+				const nonAnimatedStyle = {};
+				const useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, hasTransitionOnly ? animateOnly : void 0);
+				const seenAnimateKeys = /* @__PURE__ */ new Set();
+				let sawTransform = false;
+				let transformCount = 0;
+				for (const key in style) {
+					const rawVal = style[key];
+					const val = resolveDynamicValue(rawVal, isDark);
+					if (val === void 0) continue;
+					if (isDisabled) {
+						continue;
+					}
+					if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !layoutStyleKey[key]) {
+						nonAnimatedStyle[key] = val;
+						continue;
+					}
+					if (hasTransitionOnly && !animateOnly.includes(key)) {
+						nonAnimatedStyle[key] = val;
+						continue;
+					}
+					if (layoutStyleKey[key] && typeof val !== "number") {
+						nonAnimatedStyle[key] = val;
+						continue;
+					}
+					if (colorStyleKey[key] && !isAnimatableColor(val)) {
+						nonAnimatedStyle[key] = val;
+						continue;
+					}
+					if (key !== "transform") {
+						animateStyles.current[key] = update(key, animateStyles.current[key], val);
+						seenAnimateKeys.add(key);
+						continue;
+					}
+					if (!val) continue;
+					if (typeof val === "string") {
+						console.warn(`Warning: Tamagui can't animate string transforms yet!`);
+						continue;
+					}
+					sawTransform = true;
+					for (const transform of val) {
+						if (!transform) continue;
+						const index = transformCount++;
+						const tkey = Object.keys(transform)[0];
+						const currentTransform = animatedTranforms.current[index]?.[tkey];
+						animatedTranforms.current[index] = { [tkey]: update(tkey, currentTransform, transform[tkey]) };
+						animatedTranforms.current = [...animatedTranforms.current];
+					}
+				}
+				if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
+					for (const k in animateStyles.current) {
+						if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
+					}
+					if (!sawTransform) {
+						if (animatedTranforms.current.length) animatedTranforms.current = [];
+					} else if (animatedTranforms.current.length > transformCount) {
+						animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
+					}
+				}
+				const animatedTransformStyle = animatedTranforms.current.length > 0 ? { transform: animatedTranforms.current.map((r) => {
+					const key = Object.keys(r)[0];
+					const val = animationsState.current.get(r[key])?.interpolation || r[key];
+					return { [key]: val };
+				}) } : {};
+				const animatedStyle = {
+					...Object.fromEntries(Object.entries(animateStyles.current).map(([k, v]) => [k, animationsState.current.get(v)?.interpolation || v])),
+					...animatedTransformStyle
+				};
+				return {
+					runners,
+					completions,
+					style: [nonAnimatedStyle, animatedStyle]
+				};
+				function update(key, animated, valIn) {
+					const isColorStyleKey = colorStyleKey[key];
+					const [val, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
+					let animateToValue = val;
+					const value = animated || new Animated.Value(val);
+					const curInterpolation = animationsState.current.get(value);
+					let interpolateArgs;
+					if (type) {
+						interpolateArgs = getInterpolated(curInterpolation?.current ?? value["_value"], val, type);
+						animationsState.current.set(value, {
+							interpolation: value.interpolate(interpolateArgs),
+							current: val
+						});
+					}
+					if (isColorStyleKey) {
+						animateToValue = curInterpolation?.animateToValue ? 0 : 1;
+						interpolateArgs = getColorInterpolated(curInterpolation?.current, valIn, animateToValue);
+						animationsState.current.set(value, {
+							current: valIn,
+							interpolation: value.interpolate(interpolateArgs),
+							animateToValue: curInterpolation?.animateToValue ? 0 : 1
+						});
+					}
+					if (value) {
+						const animationConfig = getAnimationConfig(key, animations, props.transition, animationState);
+						let resolve;
+						const promise = new Promise((res2) => {
+							resolve = res2;
+						});
+						completions.push(promise);
+						runners.push(() => {
+							value.stopAnimation();
+							function getAnimation() {
+								return Animated[animationConfig.type || "spring"](value, {
+									toValue: animateToValue,
+									...animationConfig,
+									useNativeDriver: useNativeDriverForNode
+								});
+							}
+							const animation = animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
+							animation.start(({ finished }) => {
+								if (finished || isExiting) {
+									resolve();
+								}
+							});
+						});
+					}
+					if (process.env.NODE_ENV === "development") {
+						if (props["debug"] === "verbose") {
+							console.info(" 💠 animate", key, `from (${value["_value"]}) to`, valIn, `(${val})`, "type", type, "interpolate", interpolateArgs);
+						}
+					}
+					return value;
+				}
+			}, args);
+			React.useEffect(() => {
+				wasExitingRef.current = isExiting;
+			});
+			useIsomorphicLayoutEffect(() => {
+				if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
+					exitStartedRef.current = false;
+					emit("end", "exit", false);
+				}
+			}, [justStoppedExiting]);
+			useIsomorphicLayoutEffect(() => {
+				res.runners.forEach((r) => r());
+				const cycleId = exitCycleIdRef.current;
+				const cause = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "update";
+				if (cause === "exit") {
+					if (enterStartedRef.current) {
+						enterStartedRef.current = false;
+						emit("end", "enter", false);
+					}
+					if (updateInFlightRef.current) {
+						updateInFlightRef.current = false;
+						updateCycleIdRef.current++;
+						emit("end", "update", false);
+					}
+				}
+				if (cause === "update") {
+					const sig = args[0];
+					if (prevStyleSigRef.current === null || prevStyleSigRef.current === sig) {
+						prevStyleSigRef.current = sig;
+						return;
+					}
+					prevStyleSigRef.current = sig;
+					if (res.completions.length === 0) return;
+					if (updateInFlightRef.current) {
+						emit("end", "update", false);
+					}
+					updateInFlightRef.current = true;
+					const uid = ++updateCycleIdRef.current;
+					emit("start", "update");
+					Promise.all(res.completions).then(() => {
+						if (uid !== updateCycleIdRef.current) return;
+						updateInFlightRef.current = false;
+						emit("end", "update", true);
+					});
+					return;
+				}
+				prevStyleSigRef.current = args[0];
+				if (res.completions.length === 0) {
+					emit("start", cause);
+					emit("end", cause, true);
+					if (isExiting && !exitCompletedRef.current) {
+						exitCompletedRef.current = true;
+						sendExitComplete?.();
+					}
+					return;
+				}
+				if (cause === "enter" && !enterStartedRef.current) {
+					enterStartedRef.current = true;
+					emit("start", "enter");
+				}
+				if (cause === "exit" && !exitStartedRef.current) {
+					exitStartedRef.current = true;
+					emit("start", "exit");
+				}
+				Promise.all(res.completions).then(() => {
+					if (isExiting && cycleId !== exitCycleIdRef.current) return;
+					if (isExiting && exitCompletedRef.current) return;
+					if (isExiting) {
+						if (exitStartedRef.current) {
+							exitStartedRef.current = false;
+							emit("end", "exit", true);
+						}
+						exitCompletedRef.current = true;
+						sendExitComplete?.();
+					} else if (enterStartedRef.current) {
+						enterStartedRef.current = false;
+						emit("end", "enter", true);
+					}
+				});
+			}, args);
+			useStyleEmitter?.((nextStyle, _effectiveTransition, pseudoActive) => {
+				pseudoActiveRef.current = pseudoActive === true;
+				const runners = [];
+				const seenAnimateKeys = /* @__PURE__ */ new Set();
+				let transformCount = 0;
+				let animatedShapeChanged = false;
+				const useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark) && !Object.keys(animateStyles.current).some((key) => layoutStyleKey[key]);
+				for (const key in nextStyle) {
+					const rawVal = nextStyle[key];
+					const val = resolveDynamicValue(rawVal, isDark);
+					if (val === void 0) continue;
+					if (key === "transform" && Array.isArray(val)) {
+						for (const transform of val) {
+							if (!transform) continue;
+							const index = transformCount++;
+							const tkey = Object.keys(transform)[0];
+							const currentTransform = animatedTranforms.current[index]?.[tkey];
+							if (!currentTransform) animatedShapeChanged = true;
+							animatedTranforms.current[index] = { [tkey]: update(tkey, currentTransform, transform[tkey]) };
+						}
+					} else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || layoutStyleKey[key]) {
+						if (layoutStyleKey[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);
+						seenAnimateKeys.add(key);
+					}
+				}
+				for (const key in animateStyles.current) {
+					if (!seenAnimateKeys.has(key)) {
+						delete animateStyles.current[key];
+						animatedShapeChanged = true;
+					}
+				}
+				if (animatedTranforms.current.length > transformCount) {
+					animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
+					animatedShapeChanged = true;
+				}
+				runners.forEach((r) => r());
+				if (animatedShapeChanged && stateRef.current.nextState) {
+					stateRef.current.baseSetStateShallow?.(stateRef.current.nextState);
+				}
+				function update(key, animated, valIn) {
+					const isColor = colorStyleKey[key];
+					const [numVal, type] = isColor ? [0, void 0] : getValue(valIn);
+					let animateToValue = numVal;
+					const value = animated || new Animated.Value(numVal);
+					const curInterpolation = animationsState.current.get(value);
+					if (type) {
+						animationsState.current.set(value, {
+							interpolation: value.interpolate(getInterpolated(curInterpolation?.current ?? value["_value"], numVal, type)),
+							current: numVal
+						});
+					}
+					if (isColor) {
+						animateToValue = curInterpolation?.animateToValue ? 0 : 1;
+						animationsState.current.set(value, {
+							current: valIn,
+							interpolation: value.interpolate(getColorInterpolated(curInterpolation?.current, valIn, animateToValue)),
+							animateToValue: curInterpolation?.animateToValue ? 0 : 1
+						});
+					}
+					const animationConfig = getAnimationConfig(key, animations, props.transition, "default");
+					runners.push(() => {
+						value.stopAnimation();
+						const anim = Animated[animationConfig.type || "spring"](value, {
+							toValue: animateToValue,
+							...animationConfig,
+							useNativeDriver: useNativeDriverForNode
+						});
+						(animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), anim]) : anim).start();
+					});
+					return value;
+				}
+			});
+			if (process.env.NODE_ENV === "development") {
+				if (props["debug"] === "verbose") {
+					console.info(`Animated`, {
+						response: res,
+						inputStyle: style,
+						isExiting
+					});
+				}
+			}
+			return res;
+		}
+	};
 }
 function getColorInterpolated(currentColor, nextColor, animateToValue) {
-  const inputRange = [0, 1];
-  const outputRange = [currentColor ? currentColor : nextColor, nextColor];
-  if (animateToValue === 0) {
-    outputRange.reverse();
-  }
-  return {
-    inputRange,
-    outputRange
-  };
+	const inputRange = [0, 1];
+	const outputRange = [currentColor ? currentColor : nextColor, nextColor];
+	if (animateToValue === 0) {
+		outputRange.reverse();
+	}
+	return {
+		inputRange,
+		outputRange
+	};
 }
 function getInterpolated(current, next, postfix = "deg") {
-  if (next === current) {
-    current = next - 1e-9;
-  }
-  const inputRange = [current, next];
-  const outputRange = [`${current}${postfix}`, `${next}${postfix}`];
-  if (next < current) {
-    inputRange.reverse();
-    outputRange.reverse();
-  }
-  return {
-    inputRange,
-    outputRange
-  };
+	if (next === current) {
+		current = next - 1e-9;
+	}
+	const inputRange = [current, next];
+	const outputRange = [`${current}${postfix}`, `${next}${postfix}`];
+	if (next < current) {
+		inputRange.reverse();
+		outputRange.reverse();
+	}
+	return {
+		inputRange,
+		outputRange
+	};
 }
 function getAnimationConfig(key, animations, transition, animationState = "default") {
-  const normalized = normalizeTransition(transition);
-  const shortKey = transformShorthands[key];
-  const propAnimation = normalized.properties[key] ?? normalized.properties[shortKey];
-  let animationType = null;
-  let extraConf = {};
-  if (typeof propAnimation === "string") {
-    animationType = propAnimation;
-  } else if (propAnimation && typeof propAnimation === "object") {
-    animationType = propAnimation.type || getEffectiveAnimation(normalized, animationState);
-    extraConf = propAnimation;
-  } else {
-    animationType = getEffectiveAnimation(normalized, animationState);
-  }
-  if (normalized.delay && !extraConf.delay) {
-    extraConf = {
-      ...extraConf,
-      delay: normalized.delay
-    };
-  }
-  const found = animationType ? animations[animationType] : {};
-  return {
-    ...found,
-    // Apply global spring config overrides (from transition={['bouncy', { stiffness: 1000 }]})
-    ...normalized.config,
-    // Property-specific config takes highest precedence
-    ...extraConf
-  };
+	const normalized = normalizeTransition(transition);
+	const shortKey = transformShorthands[key];
+	const propAnimation = normalized.properties[key] ?? normalized.properties[shortKey];
+	let animationType = null;
+	let extraConf = {};
+	if (typeof propAnimation === "string") {
+		animationType = propAnimation;
+	} else if (propAnimation && typeof propAnimation === "object") {
+		animationType = propAnimation.type || getEffectiveAnimation(normalized, animationState);
+		extraConf = propAnimation;
+	} else {
+		animationType = getEffectiveAnimation(normalized, animationState);
+	}
+	if (normalized.delay && !extraConf.delay) {
+		extraConf = {
+			...extraConf,
+			delay: normalized.delay
+		};
+	}
+	const found = animationType ? animations[animationType] : {};
+	return {
+		...found,
+		...normalized.config,
+		...extraConf
+	};
 }
 const transformShorthands = {
-  x: "translateX",
-  y: "translateY",
-  translateX: "x",
-  translateY: "y"
+	x: "translateX",
+	y: "translateY",
+	translateX: "x",
+	translateY: "y"
 };
 function getValue(input, isColor = false) {
-  if (typeof input !== "string") {
-    return [input];
-  }
-  const [_, number, after] = input.match(/([-0-9]+)(deg|%|px)/) ?? [];
-  return [+number, after];
+	if (typeof input !== "string") {
+		return [input];
+	}
+	const [_, number, after] = input.match(/(-?(?:\d+\.?\d*|\.\d+))(deg|%|px)?/) ?? [];
+	return [+number, after];
 }
+
 export { AnimatedText, AnimatedView, createAnimations, useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle, useAnimatedNumbersStyle };
 //# sourceMappingURL=createAnimations.mjs.map