@tamagui/animations-reanimated 2.0.0-rc.9 → 2.0.0

package/dist/esm/createAnimations.mjs

@@ -1,143 +1,263 @@
-import { normalizeTransition, getEffectiveAnimation } from "@tamagui/animation-helpers";
-import { getSplitStyles, hooks, isWeb, Text, useComposedRefs, useIsomorphicLayoutEffect, useThemeWithState, View } from "@tamagui/core";
+import { getEffectiveAnimation, normalizeTransition } from "@tamagui/animation-helpers";
+import { getSplitStyles, hooks, isWeb, Text, useComposedRefs, useEvent, useIsomorphicLayoutEffect, useThemeWithState, View } from "@tamagui/core";
 import { ResetPresence, usePresence } from "@tamagui/use-presence";
 import React, { forwardRef, useMemo, useRef } from "react";
-import Animated_, { cancelAnimation, runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withDelay, withSpring, withTiming } from "react-native-reanimated";
+import Animated_, { cancelAnimation, runOnJS, runOnUI, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withDelay, withSpring, withTiming } from "react-native-reanimated";
 import { jsx } from "react/jsx-runtime";
 const getDefaultExport = module => {
-    const mod = module;
-    return (mod.__esModule || mod[Symbol.toStringTag] === "Module") && mod.default || mod;
-  },
-  Animated = getDefaultExport(Animated_),
-  resolveDynamicValue = (value, isDark) => {
-    if (value !== null && typeof value == "object" && "dynamic" in value && typeof value.dynamic == "object") {
-      const dynamic = value.dynamic;
-      return isDark ? dynamic.dark : dynamic.light;
+  const mod = module;
+  if (mod.__esModule || mod[Symbol.toStringTag] === "Module") {
+    return mod.default || mod;
+  }
+  return mod;
+};
+const Animated = getDefaultExport(Animated_);
+const silenceAnimatedComponentDevCheck = style => {
+  if (process.env.NODE_ENV !== "development" || isWeb || !style || typeof style !== "object") {
+    return;
+  }
+  Object.defineProperty(style, "_requiresAnimatedComponent", {
+    configurable: true,
+    enumerable: false,
+    value: true
+  });
+};
+const resolveDynamicValue = (value, isDark) => {
+  if (value !== null && typeof value === "object" && "dynamic" in value && typeof value.dynamic === "object") {
+    const dynamic = value.dynamic;
+    return isDark ? dynamic.dark : dynamic.light;
+  }
+  return value;
+};
+const cloneAnimationValue = value => {
+  if (Array.isArray(value)) {
+    return value.map(cloneAnimationValue);
+  }
+  if (value && typeof value === "object") {
+    const next = {};
+    for (const key in value) {
+      next[key] = cloneAnimationValue(value[key]);
     }
-    return value;
-  },
-  applyAnimation = (targetValue, config) => {
-    "worklet";
+    return next;
+  }
+  return value;
+};
+const cloneTransitionConfig = config => {
+  return cloneAnimationValue(config);
+};
+const createReanimatedConfig = config => {
+  "worklet";
 
-    const delay = config.delay;
-    let animatedValue;
-    return config.type === "timing" ? animatedValue = withTiming(targetValue, config) : animatedValue = withSpring(targetValue, config), delay && delay > 0 && (animatedValue = withDelay(delay, animatedValue)), animatedValue;
-  },
-  ANIMATABLE_PROPERTIES = {
-    // Transform
-    transform: !0,
-    // Opacity
-    opacity: !0,
-    // Dimensions
-    height: !0,
-    width: !0,
-    minWidth: !0,
-    minHeight: !0,
-    maxWidth: !0,
-    maxHeight: !0,
-    // Background
-    backgroundColor: !0,
-    // Border colors
-    borderColor: !0,
-    borderLeftColor: !0,
-    borderRightColor: !0,
-    borderTopColor: !0,
-    borderBottomColor: !0,
-    // Border radius
-    borderRadius: !0,
-    borderTopLeftRadius: !0,
-    borderTopRightRadius: !0,
-    borderBottomLeftRadius: !0,
-    borderBottomRightRadius: !0,
-    // Border width
-    borderWidth: !0,
-    borderLeftWidth: !0,
-    borderRightWidth: !0,
-    borderTopWidth: !0,
-    borderBottomWidth: !0,
-    // Text
-    color: !0,
-    fontSize: !0,
-    fontWeight: !0,
-    lineHeight: !0,
-    letterSpacing: !0,
-    // Position
-    left: !0,
-    right: !0,
-    top: !0,
-    bottom: !0,
-    // Margin
-    margin: !0,
-    marginTop: !0,
-    marginBottom: !0,
-    marginLeft: !0,
-    marginRight: !0,
-    marginHorizontal: !0,
-    marginVertical: !0,
-    // Padding
-    padding: !0,
-    paddingTop: !0,
-    paddingBottom: !0,
-    paddingLeft: !0,
-    paddingRight: !0,
-    paddingHorizontal: !0,
-    paddingVertical: !0,
-    // Flex/Gap
-    gap: !0,
-    rowGap: !0,
-    columnGap: !0,
-    flex: !0,
-    flexGrow: !0,
-    flexShrink: !0
-  },
-  canAnimateProperty = (key, value, animateOnly) => !(!ANIMATABLE_PROPERTIES[key] || value === "auto" || typeof value == "string" && value.startsWith("calc") || animateOnly && !animateOnly.includes(key));
+  const next = {};
+  const source = config;
+  for (const key in source) {
+    if (key === "type" || key === "delay") continue;
+    const value = source[key];
+    if (value !== void 0) {
+      next[key] = value;
+    }
+  }
+  return next;
+};
+const applyAnimation = (targetValue, config, callback) => {
+  "worklet";
+
+  const delay = config.delay;
+  const reanimatedConfig = createReanimatedConfig(config);
+  let animatedValue;
+  if (config.type === "timing") {
+    animatedValue = withTiming(targetValue, reanimatedConfig, callback);
+  } else {
+    animatedValue = withSpring(targetValue, reanimatedConfig, callback);
+  }
+  if (delay && delay > 0) {
+    animatedValue = withDelay(delay, animatedValue);
+  }
+  return animatedValue;
+};
+const ANIMATABLE_PROPERTIES = {
+  // Transform
+  transform: true,
+  // Opacity
+  opacity: true,
+  // Dimensions
+  height: true,
+  width: true,
+  minWidth: true,
+  minHeight: true,
+  maxWidth: true,
+  maxHeight: true,
+  // Background
+  backgroundColor: true,
+  // Border colors
+  borderColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderTopColor: true,
+  borderBottomColor: true,
+  // Border radius
+  borderRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  // Border width
+  borderWidth: true,
+  borderLeftWidth: true,
+  borderRightWidth: true,
+  borderTopWidth: true,
+  borderBottomWidth: true,
+  // Text
+  color: true,
+  fontSize: true,
+  fontWeight: true,
+  lineHeight: true,
+  letterSpacing: true,
+  // Position
+  left: true,
+  right: true,
+  top: true,
+  bottom: true,
+  // Margin
+  margin: true,
+  marginTop: true,
+  marginBottom: true,
+  marginLeft: true,
+  marginRight: true,
+  marginHorizontal: true,
+  marginVertical: true,
+  // Padding
+  padding: true,
+  paddingTop: true,
+  paddingBottom: true,
+  paddingLeft: true,
+  paddingRight: true,
+  paddingHorizontal: true,
+  paddingVertical: true,
+  // Flex/Gap
+  gap: true,
+  rowGap: true,
+  columnGap: true,
+  flex: true,
+  flexGrow: true,
+  flexShrink: true
+};
+const canAnimateProperty = (key, value, animateOnly) => {
+  if (!ANIMATABLE_PROPERTIES[key]) return false;
+  if (value === "auto") return false;
+  if (typeof value === "string" && value.startsWith("calc")) return false;
+  if (animateOnly && !animateOnly.includes(key)) return false;
+  return true;
+};
 function createWebAnimatedComponent(defaultTag) {
-  const isText = defaultTag === "span",
-    Component = Animated.createAnimatedComponent(forwardRef((propsIn, ref) => {
-      const {
-          forwardedRef,
-          render = defaultTag,
-          ...rest
-        } = propsIn,
-        hostRef = useRef(null),
-        composedRefs = useComposedRefs(forwardedRef, ref, hostRef),
-        stateRef = useRef({
-          get host() {
-            return hostRef.current;
-          }
-        }),
-        [, themeState] = useThemeWithState({}),
-        viewProps = getSplitStyles(rest, isText ? Text.staticConfig : View.staticConfig, themeState?.theme ?? {}, themeState?.name ?? "", {
-          unmounted: !1
-        }, {
-          isAnimated: !1,
-          noClass: !0
-        })?.viewProps ?? {},
-        Element = render,
-        transformedProps = hooks.usePropsTransform?.(render, viewProps, stateRef, !1);
-      return /* @__PURE__ */jsx(Element, {
-        ...transformedProps,
-        ref: composedRefs
+  const isText = defaultTag === "span";
+  const Component = Animated.createAnimatedComponent(forwardRef((propsIn, ref) => {
+    const {
+      forwardedRef,
+      render = defaultTag,
+      ...rest
+    } = propsIn;
+    const hostRef = useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref, hostRef);
+    const stateRef = useRef({
+      get host() {
+        return hostRef.current;
+      }
+    });
+    const [, themeState] = useThemeWithState({});
+    const result = getSplitStyles(rest, isText ? Text.staticConfig : View.staticConfig, themeState?.theme ?? {}, themeState?.name ?? "", {
+      unmounted: false
+    }, {
+      isAnimated: false,
+      noClass: true
+    });
+    const viewProps = result?.viewProps ?? {};
+    const Element = render;
+    const transformedProps = hooks.usePropsTransform?.(render, viewProps, stateRef, false);
+    return /* @__PURE__ */jsx(Element, {
+      ...transformedProps,
+      ref: composedRefs
+    });
+  }));
+  Component.acceptRenderProp = true;
+  return Component;
+}
+const AnimatedView = createWebAnimatedComponent("div");
+const AnimatedText = createWebAnimatedComponent("span");
+function buildTransitionConfig(transition, animations, animationState, styleKeys) {
+  const normalized = normalizeTransition(transition);
+  const effectiveKey = getEffectiveAnimation(normalized, animationState);
+  let base = cloneTransitionConfig(effectiveKey ? animations[effectiveKey] ?? {
+    type: "spring"
+  } : {
+    type: "spring"
+  });
+  if (normalized.delay) {
+    base = cloneTransitionConfig({
+      ...base,
+      delay: normalized.delay
+    });
+  }
+  if (normalized.config) {
+    base = cloneTransitionConfig({
+      ...base,
+      ...normalized.config
+    });
+    if (base.type !== "timing" && normalized.config.duration !== void 0 && normalized.config.damping === void 0 && normalized.config.stiffness === void 0 && normalized.config.mass === void 0) {
+      base = cloneTransitionConfig({
+        ...base,
+        type: "timing"
+      });
+    }
+  }
+  const propertyConfigs = {};
+  for (const key of styleKeys) {
+    const propAnimation = normalized.properties[key];
+    if (typeof propAnimation === "string") {
+      propertyConfigs[key] = cloneTransitionConfig(animations[propAnimation] ?? base);
+    } else if (propAnimation && typeof propAnimation === "object") {
+      const configType = propAnimation.type;
+      const baseForProp = configType ? animations[configType] ?? base : base;
+      propertyConfigs[key] = cloneTransitionConfig({
+        ...baseForProp,
+        ...propAnimation
       });
-    }));
-  return Component.acceptTagProp = !0, Component;
+    } else {
+      propertyConfigs[key] = cloneTransitionConfig(base);
+    }
+  }
+  return {
+    baseConfig: base,
+    propertyConfigs
+  };
+}
+function getStyleKeys(style) {
+  const keys = new Set(Object.keys(style));
+  if (style.transform && Array.isArray(style.transform)) {
+    for (const t of style.transform) {
+      if (t && typeof t === "object") {
+        keys.add(Object.keys(t)[0]);
+      }
+    }
+  }
+  return keys;
 }
-const AnimatedView = createWebAnimatedComponent("div"),
-  AnimatedText = createWebAnimatedComponent("span");
 function createAnimations(animationsConfig) {
   const animations = {};
-  for (const key in animationsConfig) animations[key] = {
-    type: "spring",
-    ...animationsConfig[key]
-  };
+  for (const key in animationsConfig) {
+    animations[key] = cloneTransitionConfig({
+      type: "spring",
+      ...animationsConfig[key]
+    });
+  }
   return {
+    needsCustomComponent: true,
     View: isWeb ? AnimatedView : Animated.View,
     Text: isWeb ? AnimatedText : Animated.Text,
-    isReactNative: !0,
-    supportsCSS: !1,
+    isReactNative: true,
     inputStyle: "value",
     outputStyle: "inline",
-    avoidReRenders: !0,
+    avoidReRenders: true,
     animations,
     usePresence,
     ResetPresence,
@@ -160,18 +280,28 @@ function createAnimations(animationsConfig) {
         setValue(next, config = {
           type: "spring"
         }, onFinish) {
-          "worklet";
+          if (config.type === "direct") {
+            sharedValue.value = next;
+            onFinish?.();
+          } else {
+            const cb = onFinish ? () => {
+              "worklet";
 
-          const handleFinish = onFinish ? () => {
-            "worklet";
+              runOnJS(onFinish)();
+            } : void 0;
+            const animationConfig = cloneTransitionConfig(config);
+            if (isWeb) {
+              sharedValue.value = applyAnimation(next, animationConfig, cb);
+            } else {
+              runOnUI((targetValue, animationConfig2) => {
+                "worklet";
 
-            runOnJS(onFinish)();
-          } : void 0;
-          config.type === "direct" ? (sharedValue.value = next, onFinish?.()) : config.type === "spring" ? sharedValue.value = withSpring(next, config, handleFinish) : sharedValue.value = withTiming(next, config, handleFinish);
+                sharedValue.value = applyAnimation(targetValue, animationConfig2, cb);
+              })(next, animationConfig);
+            }
+          }
         },
         stop() {
-          "worklet";
-
           cancelAnimation(sharedValue);
         }
       }), [sharedValue]);
@@ -184,193 +314,295 @@ function createAnimations(animationsConfig) {
     }, onValue) {
       const instance = value.getInstance();
       return useAnimatedReaction(() => instance.value, (next, prev) => {
-        prev !== next && runOnJS(onValue)(next);
+        if (prev !== next) {
+          runOnJS(onValue)(next);
+        }
       }, [onValue, instance]);
     },
     // =========================================================================
     // useAnimatedNumberStyle - Create animated styles from values
     // =========================================================================
     useAnimatedNumberStyle(val, getStyle) {
-      const instance = val.getInstance(),
-        derivedValue = useDerivedValue(() => instance.value, [instance, getStyle]);
-      return useAnimatedStyle(() => getStyle(derivedValue.value), [val, getStyle, derivedValue, instance]);
+      const instance = val.getInstance();
+      if (isWeb) {
+        return useAnimatedStyle(() => {
+          "worklet";
+
+          return getStyle(instance.value);
+        }, [instance, getStyle]);
+      }
+      const styleVal = useDerivedValue(() => {
+        "worklet";
+
+        return getStyle(instance.value);
+      });
+      const animatedStyle = useAnimatedStyle(() => {
+        "worklet";
+
+        return styleVal.value;
+      });
+      silenceAnimatedComponentDevCheck(animatedStyle);
+      return animatedStyle;
+    },
+    useAnimatedNumbersStyle(vals, getStyle) {
+      const instances = vals.map(v => v.getInstance());
+      const animatedStyle = useAnimatedStyle(() => {
+        "worklet";
+
+        const currentValues = instances.map(inst => inst.value);
+        return getStyle(...currentValues);
+      }, isWeb ? [getStyle, ...instances] : void 0);
+      silenceAnimatedComponentDevCheck(animatedStyle);
+      return animatedStyle;
     },
     // =========================================================================
     // useAnimations - Main animation hook for components
     // =========================================================================
     useAnimations(animationProps) {
       const {
-          props,
-          presence,
-          style,
-          componentState,
-          useStyleEmitter,
-          themeName
-        } = animationProps,
-        isHydrating = componentState.unmounted === !0,
-        isMounting = componentState.unmounted === "should-enter",
-        isEntering = !!componentState.unmounted,
-        isExiting = presence?.[0] === !1,
-        wasEnteringRef = useRef(isEntering),
-        justFinishedEntering = wasEnteringRef.current && !isEntering;
+        props,
+        presence,
+        style,
+        componentState,
+        useStyleEmitter,
+        themeName,
+        stateRef,
+        styleState
+      } = animationProps;
+      const isHydrating = componentState.unmounted === true;
+      const isMounting = componentState.unmounted === "should-enter";
+      const isEntering = !!componentState.unmounted;
+      const isExiting = presence?.[0] === false;
+      const wasEnteringRef = useRef(isEntering);
+      const justFinishedEntering = wasEnteringRef.current && !isEntering;
       React.useEffect(() => {
         wasEnteringRef.current = isEntering;
       });
-      const normalized = normalizeTransition(props.transition),
-        animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default",
-        animationKey = getEffectiveAnimation(normalized, animationState),
-        disableAnimation = isHydrating || !animationKey,
-        isDark = themeName?.startsWith("dark") || !1,
-        sendExitComplete = presence?.[1],
-        exitProgress = useSharedValue(0),
-        animatedTargetsRef = useSharedValue(null),
-        staticTargetsRef = useSharedValue(null),
-        transformTargetsRef = useSharedValue(null),
-        {
-          animatedStyles,
-          staticStyles
-        } = useMemo(() => {
-          const animated = {},
-            staticStyles2 = {},
-            animateOnly = props.animateOnly;
-          for (const key in style) {
-            const rawValue = style[key],
-              value = resolveDynamicValue(rawValue, isDark);
-            if (value !== void 0) {
-              if (disableAnimation) {
-                staticStyles2[key] = value;
-                continue;
-              }
-              canAnimateProperty(key, value, animateOnly) ? animated[key] = value : staticStyles2[key] = value;
-            }
+      const effectiveTransition = styleState?.effectiveTransition ?? props.transition;
+      const normalized = normalizeTransition(effectiveTransition);
+      const animationState = isExiting ? "exit" : isMounting || justFinishedEntering ? "enter" : "default";
+      const animationKey = getEffectiveAnimation(normalized, animationState);
+      const disableAnimation = isHydrating || !animationKey;
+      const isDark = themeName?.startsWith("dark") || false;
+      const sendExitComplete = presence?.[1];
+      const exitCycleIdRef = useRef(0);
+      const pendingExitKeysRef = useRef(/* @__PURE__ */new Set());
+      const exitCompletedRef = useRef(false);
+      const wasExitingRef = useRef(false);
+      const justStartedExiting = isExiting && !wasExitingRef.current;
+      const justStoppedExiting = !isExiting && wasExitingRef.current;
+      const markExitKeyDone = useEvent((key, cycleId, finished) => {
+        if (cycleId !== exitCycleIdRef.current) return;
+        if (exitCompletedRef.current) return;
+        pendingExitKeysRef.current.delete(key);
+        if (pendingExitKeysRef.current.size === 0) {
+          exitCompletedRef.current = true;
+          sendExitComplete?.();
+        }
+      });
+      const isExitingRef = useSharedValue(isExiting);
+      const exitCycleIdShared = useSharedValue(exitCycleIdRef.current);
+      if (justStartedExiting) {
+        exitCycleIdRef.current++;
+        exitCompletedRef.current = false;
+        pendingExitKeysRef.current.clear();
+      }
+      if (justStoppedExiting) {
+        exitCycleIdRef.current++;
+        pendingExitKeysRef.current.clear();
+      }
+      useIsomorphicLayoutEffect(() => {
+        isExitingRef.value = isExiting;
+        exitCycleIdShared.value = exitCycleIdRef.current;
+      }, [isExiting, exitCycleIdRef.current]);
+      React.useEffect(() => {
+        wasExitingRef.current = isExiting;
+      });
+      const animatedTargetsRef = useSharedValue(null);
+      const staticTargetsRef = useSharedValue(null);
+      const transformTargetsRef = useSharedValue(null);
+      const {
+        animatedStyles,
+        staticStyles
+      } = useMemo(() => {
+        const animated = {};
+        const staticStyles2 = {};
+        const animateOnly = props.animateOnly;
+        for (const key in style) {
+          const rawValue = style[key];
+          const value = resolveDynamicValue(rawValue, isDark);
+          if (value === void 0) continue;
+          if (disableAnimation) {
+            staticStyles2[key] = cloneAnimationValue(value);
+            continue;
           }
-          if (isMounting) for (const key in animated) staticStyles2[key] = animated[key];
+          if (canAnimateProperty(key, value, animateOnly)) {
+            animated[key] = cloneAnimationValue(value);
+          } else {
+            staticStyles2[key] = cloneAnimationValue(value);
+          }
+        }
+        if (isMounting) {
+          for (const key in animated) {
+            staticStyles2[key] = animated[key];
+          }
+        }
+        return {
+          animatedStyles: animated,
+          staticStyles: staticStyles2
+        };
+      }, [disableAnimation, style, isDark, isMounting, props.animateOnly]);
+      const {
+        baseConfig,
+        propertyConfigs
+      } = useMemo(() => {
+        if (isHydrating) {
           return {
-            animatedStyles: animated,
-            staticStyles: staticStyles2
-          };
-        }, [disableAnimation, style, isDark, isMounting, props.animateOnly]),
-        {
-          baseConfig,
-          propertyConfigs
-        } = useMemo(() => {
-          if (isHydrating) return {
             baseConfig: {
               type: "timing",
               duration: 0
             },
             propertyConfigs: {}
           };
-          const normalized2 = normalizeTransition(props.transition),
-            effectiveKey = getEffectiveAnimation(normalized2, animationState);
-          let base = effectiveKey ? animations[effectiveKey] ?? {
-            type: "spring"
-          } : {
-            type: "spring"
-          };
-          normalized2.delay && (base = {
-            ...base,
-            delay: normalized2.delay
-          }), normalized2.config && (base = {
-            ...base,
-            ...normalized2.config
-          });
-          const overrides = {};
-          for (const key in normalized2.properties) {
-            const animationNameOrConfig = normalized2.properties[key];
-            if (typeof animationNameOrConfig == "string") overrides[key] = animations[animationNameOrConfig] ?? base;else if (animationNameOrConfig && typeof animationNameOrConfig == "object") {
-              const configType = animationNameOrConfig.type,
-                baseForProp = configType ? animations[configType] ?? base : base;
-              overrides[key] = {
-                ...baseForProp,
-                ...animationNameOrConfig
-              };
-            }
-          }
-          const configs = {},
-            allKeys = new Set(Object.keys(animatedStyles));
-          if (animatedStyles.transform && Array.isArray(animatedStyles.transform)) for (const t of animatedStyles.transform) allKeys.add(Object.keys(t)[0]);
-          for (const key of allKeys) configs[key] = overrides[key] ?? base;
-          return {
-            baseConfig: base,
-            propertyConfigs: configs
-          };
-        }, [isHydrating, props.transition, animatedStyles, animationState]),
-        configRef = useSharedValue({
-          baseConfig,
-          propertyConfigs,
-          disableAnimation,
-          isHydrating
-        });
+        }
+        return buildTransitionConfig(props.transition, animations, animationState, getStyleKeys(animatedStyles));
+      }, [isHydrating, props.transition, animatedStyles, animationState]);
+      const configRef = useSharedValue({
+        baseConfig,
+        propertyConfigs,
+        disableAnimation,
+        isHydrating
+      });
       useIsomorphicLayoutEffect(() => {
-        configRef.set({
+        configRef.value = {
           baseConfig,
           propertyConfigs,
           disableAnimation,
           isHydrating
-        });
-      }, [baseConfig, propertyConfigs, disableAnimation, isHydrating]), useStyleEmitter?.(nextStyle => {
-        const animateOnly = props.animateOnly,
-          animated = {},
-          statics = {},
-          transforms = [];
+        };
+      }, [baseConfig, propertyConfigs, disableAnimation, isHydrating]);
+      useStyleEmitter?.((nextStyle, effectiveTransition2) => {
+        const animateOnly = props.animateOnly;
+        const animated = {};
+        const statics = {};
+        const transforms = [];
+        const transitionToUse = effectiveTransition2 ?? props.transition;
+        const {
+          baseConfig: newBase,
+          propertyConfigs: newPropertyConfigs
+        } = buildTransitionConfig(transitionToUse, animations, animationState, getStyleKeys(nextStyle));
+        configRef.value = {
+          baseConfig: newBase,
+          propertyConfigs: newPropertyConfigs,
+          disableAnimation: configRef.value.disableAnimation,
+          isHydrating: configRef.value.isHydrating
+        };
         for (const key in nextStyle) {
-          const rawValue = nextStyle[key],
-            value = resolveDynamicValue(rawValue, isDark);
-          if (value != null) {
-            if (configRef.get().disableAnimation) {
-              statics[key] = value;
-              continue;
+          const rawValue = nextStyle[key];
+          const value = resolveDynamicValue(rawValue, isDark);
+          if (value == void 0) continue;
+          if (configRef.value.disableAnimation) {
+            statics[key] = cloneAnimationValue(value);
+            continue;
+          }
+          if (key === "transform" && Array.isArray(value)) {
+            for (const t of value) {
+              if (t && typeof t === "object") {
+                const tKey = Object.keys(t)[0];
+                const tVal = t[tKey];
+                if (typeof tVal === "number" || typeof tVal === "string") {
+                  transforms.push(cloneAnimationValue(t));
+                }
+              }
             }
-            if (key === "transform" && Array.isArray(value)) {
-              for (const t of value) if (t && typeof t == "object") {
-                const tKey = Object.keys(t)[0],
-                  tVal = t[tKey];
-                (typeof tVal == "number" || typeof tVal == "string") && transforms.push(t);
+            continue;
+          }
+          if (canAnimateProperty(key, value, animateOnly)) {
+            animated[key] = cloneAnimationValue(value);
+          } else {
+            statics[key] = cloneAnimationValue(value);
+          }
+        }
+        animatedTargetsRef.value = animated;
+        staticTargetsRef.value = statics;
+        transformTargetsRef.value = transforms;
+        if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
+          console.info("[animations-reanimated] useStyleEmitter update", {
+            animated,
+            statics,
+            transforms
+          });
+        }
+      });
+      const exitKeysRegistered = useRef(false);
+      if (justStartedExiting && sendExitComplete) {
+        const exitKeys = [];
+        const animateOnly = props.animateOnly;
+        for (const key in animatedStyles) {
+          if (key === "transform") continue;
+          if (canAnimateProperty(key, animatedStyles[key], animateOnly)) {
+            exitKeys.push(key);
+          }
+        }
+        const transforms = animatedStyles.transform;
+        if (transforms && Array.isArray(transforms)) {
+          for (const t of transforms) {
+            if (!t) continue;
+            const tKey = Object.keys(t)[0];
+            if (tKey) {
+              if (animateOnly && !animateOnly.includes(tKey)) {
+                continue;
               }
-              continue;
+              exitKeys.push(`transform:${tKey}`);
             }
-            canAnimateProperty(key, value, animateOnly) ? animated[key] = value : statics[key] = value;
           }
         }
-        animatedTargetsRef.set(animated), staticTargetsRef.set(statics), transformTargetsRef.set(transforms), process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("[animations-reanimated] useStyleEmitter update", {
-          animated,
-          statics,
-          transforms
-        });
-      }), React.useEffect(() => {
-        if (!isExiting || !sendExitComplete) return;
-        const config = configRef.get().baseConfig;
-        return config.type === "timing" ? exitProgress.set(withTiming(1, config, finished => {
-          "worklet";
-
-          finished && runOnJS(sendExitComplete)();
-        })) : exitProgress.set(withSpring(1, config, finished => {
-          "worklet";
-
-          finished && runOnJS(sendExitComplete)();
-        })), () => {
-          cancelAnimation(exitProgress);
-        };
-      }, [isExiting, sendExitComplete]);
+        pendingExitKeysRef.current = new Set(exitKeys);
+        exitKeysRegistered.current = exitKeys.length > 0;
+      }
+      React.useEffect(() => {
+        if (!justStartedExiting || !sendExitComplete) return;
+        if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
+          if (!exitCompletedRef.current) {
+            exitCompletedRef.current = true;
+            sendExitComplete();
+          }
+        }
+      }, [justStartedExiting, sendExitComplete]);
       const animatedStyle = useAnimatedStyle(() => {
         "worklet";
 
-        if (disableAnimation || isHydrating) return {};
-        const result = {},
-          config = configRef.get(),
-          emitterAnimated = animatedTargetsRef.value,
-          emitterStatic = staticTargetsRef.value,
-          emitterTransforms = transformTargetsRef.value,
-          hasEmitterUpdates = emitterAnimated !== null,
-          animatedValues = hasEmitterUpdates ? emitterAnimated : animatedStyles,
-          staticValues = hasEmitterUpdates ? emitterStatic : {};
-        for (const key in staticValues) result[key] = staticValues[key];
+        if (disableAnimation || isHydrating) {
+          return {};
+        }
+        const result = {};
+        const config = configRef.value;
+        const emitterAnimated = animatedTargetsRef.value;
+        const emitterStatic = staticTargetsRef.value;
+        const emitterTransforms = transformTargetsRef.value;
+        const hasEmitterUpdates = emitterAnimated !== null;
+        const animatedValues = hasEmitterUpdates ? emitterAnimated : animatedStyles;
+        const staticValues = hasEmitterUpdates ? emitterStatic : {};
+        const currentlyExiting = isExitingRef.value;
+        const currentCycleId = exitCycleIdShared.value;
+        for (const key in staticValues) {
+          result[key] = staticValues[key];
+        }
         for (const key in animatedValues) {
           if (key === "transform") continue;
-          const targetValue = animatedValues[key],
-            propConfig = config.propertyConfigs[key] ?? config.baseConfig;
-          result[key] = applyAnimation(targetValue, propConfig);
+          const targetValue = animatedValues[key];
+          const propConfig = config.propertyConfigs[key] ?? config.baseConfig;
+          let callback;
+          if (currentlyExiting) {
+            const capturedKey = key;
+            const capturedCycleId = currentCycleId;
+            callback = finished => {
+              "worklet";
+
+              runOnJS(markExitKeyDone)(capturedKey, capturedCycleId, finished ?? false);
+            };
+          }
+          result[key] = applyAnimation(targetValue, propConfig, callback);
         }
         const transforms = hasEmitterUpdates ? emitterTransforms : animatedStyles.transform;
         if (transforms && Array.isArray(transforms)) {
@@ -380,30 +612,46 @@ function createAnimations(animationsConfig) {
             const keys = Object.keys(t);
             if (keys.length === 0) continue;
             const value = t[keys[0]];
-            if (typeof value == "number" || typeof value == "string") {
-              const transformKey = Object.keys(t)[0],
-                targetValue = t[transformKey],
-                propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig;
+            if (typeof value === "number" || typeof value === "string") {
+              const transformKey = Object.keys(t)[0];
+              const targetValue = t[transformKey];
+              const propConfig = config.propertyConfigs[transformKey] ?? config.baseConfig;
+              let callback;
+              if (currentlyExiting) {
+                const capturedKey = `transform:${transformKey}`;
+                const capturedCycleId = currentCycleId;
+                callback = finished => {
+                  "worklet";
+
+                  runOnJS(markExitKeyDone)(capturedKey, capturedCycleId, finished ?? false);
+                };
+              }
               validTransforms.push({
-                [transformKey]: applyAnimation(targetValue, propConfig)
+                [transformKey]: applyAnimation(targetValue, propConfig, callback)
               });
             }
           }
-          validTransforms.length > 0 && (result.transform = validTransforms);
+          if (validTransforms.length > 0) {
+            result.transform = validTransforms;
+          }
         }
         return result;
-      }, [animatedStyles, baseConfig, propertyConfigs, disableAnimation, isHydrating,
-      // Pass SharedValues so the mapper watches them on web (see useAnimatedStyle.ts line 470-472)
-      animatedTargetsRef, staticTargetsRef, transformTargetsRef]);
-      return process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile" && console.info("[animations-reanimated] useAnimations", {
-        animationKey,
-        componentState,
-        isExiting,
-        animatedStyles,
-        staticStyles,
-        baseConfig,
-        propertyConfigs
-      }), {
+      }, isWeb ? [animatedStyles, baseConfig, propertyConfigs, disableAnimation, isHydrating,
+      // pass SharedValues so the mapper watches them on web (no babel plugin)
+      animatedTargetsRef, staticTargetsRef, transformTargetsRef, isExitingRef, exitCycleIdShared, markExitKeyDone] : void 0);
+      silenceAnimatedComponentDevCheck(animatedStyle);
+      if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
+        console.info("[animations-reanimated] useAnimations", {
+          animationKey,
+          componentState,
+          isExiting,
+          animatedStyles,
+          staticStyles,
+          baseConfig,
+          propertyConfigs
+        });
+      }
+      return {
         style: [staticStyles, animatedStyle]
       };
     }