@tamagui/animations-reanimated 2.4.5 → 2.5.0

package/dist/esm/createAnimations.native.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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 normalizeColor from "@react-native/normalize-colors";
 import React, { forwardRef, useMemo, useRef } from "react";
 import Animated_, { cancelAnimation, runOnJS, runOnUI, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withDelay, withSpring, withTiming } from "react-native-reanimated";
 function _type_of(obj) {
@@ -47,9 +48,284 @@ var cloneAnimationValue = function (value) {
   }
   return value;
 };
+var cloneStyleRecord = function (style) {
+  var next = {};
+  for (var key in style) {
+    next[key] = cloneAnimationValue(style[key]);
+  }
+  return next;
+};
 var cloneTransitionConfig = function (config) {
   return cloneAnimationValue(config);
 };
+var getAnimatedTransforms = function (value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter(function (item) {
+    return item !== null && (typeof item === "undefined" ? "undefined" : _type_of(item)) === "object" && !Array.isArray(item);
+  });
+};
+var getRemovedAnimatedKeys = function (current, previous) {
+  var removedKeys = {};
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = previous[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var key = _step.value;
+      if (!current.has(key)) removedKeys[key] = true;
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  return removedKeys;
+};
+var getImplicitDefault = function (key, targetValue) {
+  "worklet";
+
+  var value = key === "opacity" || key === "scale" || key === "scaleX" || key === "scaleY" ? 1 : 0;
+  if (typeof targetValue !== "string") return value;
+  var suffixIndex = 0;
+  while (suffixIndex < targetValue.length) {
+    var character = targetValue[suffixIndex];
+    var code = character.charCodeAt(0);
+    if (code >= 48 && code <= 57 || character === "." || character === "-" || character === "+") {
+      suffixIndex++;
+    } else {
+      break;
+    }
+  }
+  return suffixIndex > 0 ? `${value}${targetValue.slice(suffixIndex)}` : value;
+};
+var COLOR_STYLE_KEYS = {
+  backgroundColor: true,
+  borderColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderTopColor: true,
+  borderBottomColor: true,
+  color: true
+};
+var toReanimatedColor = function (value) {
+  "worklet";
+
+  if (typeof value === "number") {
+    var color = value >>> 0;
+    var alpha = (color >>> 24 & 255) / 255;
+    var red = color >>> 16 & 255;
+    var green = color >>> 8 & 255;
+    var blue = color & 255;
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+  }
+  if (typeof value !== "string") return value;
+  var trimmed = value.trim();
+  if (trimmed === "transparent") return "rgba(0, 0, 0, 0)";
+  return trimmed;
+};
+var isReanimatedColorHistory = function (value) {
+  "worklet";
+
+  var normalized = toReanimatedColor(value);
+  return typeof normalized === "string" && normalized.startsWith("rgba(");
+};
+var normalizeAnimationColor = function (value) {
+  if (typeof value === "number") {
+    return toReanimatedColor(value);
+  }
+  if (typeof value !== "string") return;
+  var color = normalizeColor(value);
+  if (color == null) return;
+  var red = Math.round((color & 4278190080) >>> 24);
+  var green = Math.round((color & 16711680) >>> 16);
+  var blue = Math.round((color & 65280) >>> 8);
+  var alpha = (color & 255) / 255;
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+};
+var buildSnapshot = function (animated, statics, transforms, previousKeys, lastPainted) {
+  var snapshotAnimated = {};
+  var snapshotStatics = cloneStyleRecord(statics);
+  for (var key in snapshotStatics) {
+    if (!COLOR_STYLE_KEYS[key]) continue;
+    var normalized = normalizeAnimationColor(snapshotStatics[key]);
+    if (normalized !== void 0) snapshotStatics[key] = normalized;
+  }
+  for (var key1 in animated) {
+    if (key1 === "transform") continue;
+    var value = animated[key1];
+    if (COLOR_STYLE_KEYS[key1]) {
+      var normalized1 = normalizeAnimationColor(value);
+      if (normalized1 === void 0) {
+        snapshotStatics[key1] = cloneAnimationValue(value);
+        continue;
+      }
+      snapshotAnimated[key1] = normalized1;
+    } else {
+      snapshotAnimated[key1] = cloneAnimationValue(value);
+    }
+  }
+  var snapshotTransforms = transforms.map(cloneStyleRecord);
+  var keys = new Set(Object.keys(snapshotAnimated));
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = snapshotTransforms[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var transform = _step.value;
+      var key2 = Object.keys(transform)[0];
+      var value1 = key2 ? transform[key2] : void 0;
+      if (key2 && (typeof value1 === "number" || typeof value1 === "string")) {
+        keys.add(`transform:${key2}`);
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  var seeds = {};
+  var _iteratorNormalCompletion1 = true,
+    _didIteratorError1 = false,
+    _iteratorError1 = void 0;
+  try {
+    for (var _iterator1 = keys[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) {
+      var key3 = _step1.value;
+      var value2 = lastPainted[key3];
+      if (typeof value2 !== "number" && typeof value2 !== "string") continue;
+      if (value2 === "auto" || typeof value2 === "string" && value2.startsWith("calc")) {
+        continue;
+      }
+      if (COLOR_STYLE_KEYS[key3]) value2 = normalizeAnimationColor(value2);
+      if (value2 !== void 0) seeds[key3] = value2;
+    }
+  } catch (err) {
+    _didIteratorError1 = true;
+    _iteratorError1 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+        _iterator1.return();
+      }
+    } finally {
+      if (_didIteratorError1) {
+        throw _iteratorError1;
+      }
+    }
+  }
+  var gatedKeys = {};
+  var _iteratorNormalCompletion2 = true,
+    _didIteratorError2 = false,
+    _iteratorError2 = void 0;
+  try {
+    for (var _iterator2 = keys[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+      var key4 = _step2.value;
+      gatedKeys[key4] = true;
+    }
+  } catch (err) {
+    _didIteratorError2 = true;
+    _iteratorError2 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+        _iterator2.return();
+      }
+    } finally {
+      if (_didIteratorError2) {
+        throw _iteratorError2;
+      }
+    }
+  }
+  var removedKeys = getRemovedAnimatedKeys(keys, previousKeys);
+  var painted = {
+    ...snapshotStatics,
+    ...snapshotAnimated
+  };
+  var staticTransforms = getAnimatedTransforms(snapshotStatics.transform);
+  delete painted.transform;
+  var _iteratorNormalCompletion3 = true,
+    _didIteratorError3 = false,
+    _iteratorError3 = void 0;
+  try {
+    for (var _iterator3 = staticTransforms[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+      var transform1 = _step3.value;
+      var key5 = Object.keys(transform1)[0];
+      if (key5) painted[`transform:${key5}`] = transform1[key5];
+    }
+  } catch (err) {
+    _didIteratorError3 = true;
+    _iteratorError3 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
+        _iterator3.return();
+      }
+    } finally {
+      if (_didIteratorError3) {
+        throw _iteratorError3;
+      }
+    }
+  }
+  var _iteratorNormalCompletion4 = true,
+    _didIteratorError4 = false,
+    _iteratorError4 = void 0;
+  try {
+    for (var _iterator4 = snapshotTransforms[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+      var transform2 = _step4.value;
+      var key6 = Object.keys(transform2)[0];
+      if (key6) painted[`transform:${key6}`] = transform2[key6];
+    }
+  } catch (err) {
+    _didIteratorError4 = true;
+    _iteratorError4 = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion4 && _iterator4.return != null) {
+        _iterator4.return();
+      }
+    } finally {
+      if (_didIteratorError4) {
+        throw _iteratorError4;
+      }
+    }
+  }
+  return {
+    value: {
+      animated: snapshotAnimated,
+      statics: snapshotStatics,
+      transforms: snapshotTransforms,
+      gatedKeys,
+      seeds,
+      removedKeys,
+      removeTransform: Object.keys(removedKeys).some(function (key7) {
+        return key7.startsWith("transform:");
+      }),
+      clearValue: isWeb ? "" : null
+    },
+    painted,
+    keys
+  };
+};
+var getGatedKeys = function (snapshot) {
+  return Object.keys(snapshot.gatedKeys);
+};
 var createReanimatedConfig = function (config) {
   "worklet";
 
@@ -64,9 +340,10 @@ var createReanimatedConfig = function (config) {
   }
   return next;
 };
-var applyAnimation = function (targetValue, config, callback) {
+var applyAnimation = function (targetValue, config, callback, seedValue) {
   "worklet";
 
+  var validateStartAsColor = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : false;
   var delay = config.delay;
   var reanimatedConfig = createReanimatedConfig(config);
   var animatedValue;
@@ -75,11 +352,44 @@ var applyAnimation = function (targetValue, config, callback) {
   } else {
     animatedValue = withSpring(targetValue, reanimatedConfig, callback);
   }
+  if (seedValue !== void 0 || validateStartAsColor) {
+    var innerOnStart = animatedValue.onStart;
+    animatedValue.onStart = function (animation, value, timestamp, previousAnimation) {
+      "worklet";
+
+      var startValue = validateStartAsColor ? isReanimatedColorHistory(value) ? toReanimatedColor(value) : seedValue !== null && seedValue !== void 0 ? seedValue : targetValue : seedValue;
+      innerOnStart(animation, startValue, timestamp, previousAnimation);
+    };
+  }
   if (delay && delay > 0) {
     animatedValue = withDelay(delay, animatedValue);
   }
   return animatedValue;
 };
+var animateSnapshotValue = function (key, implicitKey, targetValue, config, previouslyEmitted, seedValue, gated, currentlyExiting, exitCycleId, currentlyCompletingAnimation, didAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone) {
+  "worklet";
+
+  var validateStartAsColor = arguments.length > 13 && arguments[13] !== void 0 ? arguments[13] : false;
+  var cycleGated = gated && (currentlyExiting || currentlyCompletingAnimation);
+  if (!previouslyEmitted && seedValue === void 0 && !cycleGated) {
+    return targetValue;
+  }
+  var callback;
+  if (gated && currentlyExiting) {
+    callback = function (finished) {
+      "worklet";
+
+      runOnJS(markExitKeyDone)(key, exitCycleId, finished !== null && finished !== void 0 ? finished : false);
+    };
+  } else if (gated && currentlyCompletingAnimation) {
+    callback = function (finished) {
+      "worklet";
+
+      runOnJS(markDidAnimateKeyDone)(key, didAnimateCycleId, finished !== null && finished !== void 0 ? finished : false);
+    };
+  }
+  return applyAnimation(targetValue, config, callback, previouslyEmitted ? void 0 : seedValue !== null && seedValue !== void 0 ? seedValue : getImplicitDefault(implicitKey, targetValue), validateStartAsColor);
+};
 var ANIMATABLE_PROPERTIES = {
   // Transform
   transform: true,
@@ -154,6 +464,23 @@ var canAnimateProperty = function (key, value, animateOnly) {
   if (animateOnly && !animateOnly.includes(key)) return false;
   return true;
 };
+var splitAnimationStyles = function (style, isDark, disableAnimation, animateOnly) {
+  var animated = {};
+  var statics = {};
+  for (var key in style) {
+    var value = resolveDynamicValue(style[key], isDark);
+    if (value === void 0) continue;
+    if (!disableAnimation && canAnimateProperty(key, value, animateOnly)) {
+      animated[key] = cloneAnimationValue(value);
+    } else {
+      statics[key] = cloneAnimationValue(value);
+    }
+  }
+  return {
+    animated,
+    statics
+  };
+};
 function createWebAnimatedComponent(defaultTag) {
   var isText = defaultTag === "span";
   var Component = Animated.createAnimatedComponent(/* @__PURE__ */forwardRef(function (propsIn, ref) {
@@ -429,7 +756,8 @@ function createAnimations(animationsConfig) {
         useStyleEmitter,
         themeName,
         stateRef,
-        styleState
+        styleState,
+        onDidAnimate
       } = animationProps;
       var isHydrating = componentState.unmounted === true;
       var isMounting = componentState.unmounted === "should-enter";
@@ -448,16 +776,36 @@ function createAnimations(animationsConfig) {
       var disableAnimation = isHydrating || !animationKey;
       var isDark = (themeName === null || themeName === void 0 ? void 0 : themeName.startsWith("dark")) || false;
       var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
+      var onDidAnimateRef = useRef(onDidAnimate);
+      useIsomorphicLayoutEffect(function () {
+        onDidAnimateRef.current = onDidAnimate;
+      }, [onDidAnimate]);
+      var didAnimateCycleIdRef = useRef(0);
+      var pendingDidAnimateKeysRef = useRef(/* @__PURE__ */new Set());
+      var didAnimateCompletedRef = useRef(false);
+      var isCompletingAnimationRef = useSharedValue(false);
+      var didAnimateCycleIdShared = useSharedValue(0);
+      var markDidAnimateKeyDone = useEvent(function (key2, cycleId, finished) {
+        if (!finished || cycleId !== didAnimateCycleIdRef.current) return;
+        if (didAnimateCompletedRef.current) return;
+        pendingDidAnimateKeysRef.current.delete(key2);
+        if (pendingDidAnimateKeysRef.current.size === 0) {
+          var _onDidAnimateRef_current;
+          didAnimateCompletedRef.current = true;
+          isCompletingAnimationRef.value = false;
+          (_onDidAnimateRef_current = onDidAnimateRef.current) === null || _onDidAnimateRef_current === void 0 ? void 0 : _onDidAnimateRef_current.call(onDidAnimateRef);
+        }
+      });
       var exitCycleIdRef = useRef(0);
       var pendingExitKeysRef = useRef(/* @__PURE__ */new Set());
       var exitCompletedRef = useRef(false);
       var wasExitingRef = useRef(false);
       var justStartedExiting = isExiting && !wasExitingRef.current;
       var justStoppedExiting = !isExiting && wasExitingRef.current;
-      var markExitKeyDone = useEvent(function (key3, cycleId, finished) {
+      var markExitKeyDone = useEvent(function (key2, cycleId, finished) {
         if (cycleId !== exitCycleIdRef.current) return;
         if (exitCompletedRef.current) return;
-        pendingExitKeysRef.current.delete(key3);
+        pendingExitKeysRef.current.delete(key2);
         if (pendingExitKeysRef.current.size === 0) {
           exitCompletedRef.current = true;
           sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
@@ -469,6 +817,9 @@ function createAnimations(animationsConfig) {
         exitCycleIdRef.current++;
         exitCompletedRef.current = false;
         pendingExitKeysRef.current.clear();
+        didAnimateCycleIdRef.current++;
+        pendingDidAnimateKeysRef.current.clear();
+        didAnimateCompletedRef.current = true;
       }
       if (justStoppedExiting) {
         exitCycleIdRef.current++;
@@ -477,52 +828,87 @@ function createAnimations(animationsConfig) {
       useIsomorphicLayoutEffect(function () {
         isExitingRef.value = isExiting;
         exitCycleIdShared.value = exitCycleIdRef.current;
-      }, [isExiting, exitCycleIdRef.current]);
+        if (justStartedExiting) {
+          isCompletingAnimationRef.value = false;
+          didAnimateCycleIdShared.value = didAnimateCycleIdRef.current;
+        }
+      }, [isExiting, exitCycleIdRef.current, justStartedExiting]);
       React.useEffect(function () {
         wasExitingRef.current = isExiting;
       });
-      var animatedTargetsRef = useSharedValue(null);
-      var staticTargetsRef = useSharedValue(null);
-      var transformTargetsRef = useSharedValue(null);
+      var committedRenderKeysRef = useRef(/* @__PURE__ */new Set());
+      var lastPaintedRef = useRef({});
+      var carryRef = useRef({});
       var {
         animatedStyles,
-        staticStyles
+        staticStyles,
+        nextCarry
       } = useMemo(function () {
-        var animated = {};
-        var staticStyles2 = {};
-        var animateOnly2 = props.animateOnly;
-        for (var key3 in style) {
-          var rawValue = style[key3];
-          var value = resolveDynamicValue(rawValue, isDark);
-          if (value === void 0) continue;
-          if (disableAnimation) {
-            staticStyles2[key3] = cloneAnimationValue(value);
-            continue;
-          }
-          if (canAnimateProperty(key3, value, animateOnly2)) {
-            animated[key3] = cloneAnimationValue(value);
-          } else {
-            staticStyles2[key3] = cloneAnimationValue(value);
-          }
+        var animateOnly = props.animateOnly;
+        var {
+          animated,
+          statics
+        } = splitAnimationStyles(style, isDark, disableAnimation, animateOnly);
+        var nextCarry2 = cloneStyleRecord(carryRef.current);
+        for (var key2 in nextCarry2) {
+          if (!(key2 in animated)) delete nextCarry2[key2];
         }
-        if (isMounting) {
-          for (var key1 in animated) {
-            staticStyles2[key1] = animated[key1];
+        for (var key1 in animated) {
+          if (!(key1 in nextCarry2)) {
+            nextCarry2[key1] = cloneAnimationValue(animated[key1]);
           }
+          statics[key1] = nextCarry2[key1];
         }
         return {
           animatedStyles: animated,
-          staticStyles: staticStyles2
+          staticStyles: statics,
+          nextCarry: nextCarry2
         };
-      }, [disableAnimation, style, isDark, isMounting, props.animateOnly]);
+      }, [disableAnimation, style, isDark, props.animateOnly]);
+      var renderSnapshot = useMemo(function () {
+        return buildSnapshot(animatedStyles, staticStyles, getAnimatedTransforms(animatedStyles.transform), committedRenderKeysRef.current, lastPaintedRef.current);
+      }, [animatedStyles, staticStyles]);
+      var renderSnapshotRef = useSharedValue({
+        animated: {},
+        statics: {},
+        transforms: [],
+        gatedKeys: {},
+        seeds: {},
+        removedKeys: {},
+        removeTransform: false,
+        clearValue: isWeb ? "" : null
+      });
+      var emitterSnapshotRef = useSharedValue(null);
+      var emitterKeysRef = useRef(null);
+      useIsomorphicLayoutEffect(function () {
+        carryRef.current = nextCarry;
+        committedRenderKeysRef.current = renderSnapshot.keys;
+        lastPaintedRef.current = renderSnapshot.painted;
+      }, [nextCarry, renderSnapshot]);
       var pseudoActiveRef = useRef(false);
       var isExitingJSRef = useRef(false);
       isExitingJSRef.current = isExiting;
+      var publishedSnapshotRef = useRef(null);
       useIsomorphicLayoutEffect(function () {
-        if ((isExiting || !pseudoActiveRef.current) && animatedTargetsRef.value !== null) {
-          animatedTargetsRef.value = null;
-          staticTargetsRef.value = null;
-          transformTargetsRef.value = null;
+        var droppingLatch = (isExiting || !pseudoActiveRef.current) && emitterSnapshotRef.value !== null;
+        var emitterKeys = droppingLatch ? emitterKeysRef.current : null;
+        if (droppingLatch || publishedSnapshotRef.current !== renderSnapshot.value) {
+          var removedKeys = emitterKeys ? {
+            ...renderSnapshot.value.removedKeys,
+            ...getRemovedAnimatedKeys(renderSnapshot.keys, emitterKeys)
+          } : renderSnapshot.value.removedKeys;
+          renderSnapshotRef.value = {
+            ...renderSnapshot.value,
+            removedKeys,
+            removeTransform: Object.keys(removedKeys).some(function (key2) {
+              return key2.startsWith("transform:");
+            })
+          };
+          publishedSnapshotRef.current = renderSnapshot.value;
+        }
+        if (droppingLatch) {
+          emitterSnapshotRef.value = null;
+          emitterKeysRef.current = null;
         }
       });
       var {
@@ -557,10 +943,7 @@ function createAnimations(animationsConfig) {
       useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function (nextStyle, effectiveTransition2, pseudoActive) {
         if (isExitingJSRef.current) return;
         pseudoActiveRef.current = pseudoActive === true;
-        var animateOnly2 = props.animateOnly;
-        var animated = {};
-        var statics = {};
-        var transforms2 = [];
+        var animateOnly = props.animateOnly;
         var transitionToUse = effectiveTransition2 !== null && effectiveTransition2 !== void 0 ? effectiveTransition2 : props.transition;
         var {
           baseConfig: newBase,
@@ -572,107 +955,54 @@ function createAnimations(animationsConfig) {
           disableAnimation: configRef.value.disableAnimation,
           isHydrating: configRef.value.isHydrating
         };
-        for (var key3 in nextStyle) {
-          var rawValue = nextStyle[key3];
-          var value = resolveDynamicValue(rawValue, isDark);
-          if (value == void 0) continue;
-          if (configRef.value.disableAnimation) {
-            statics[key3] = cloneAnimationValue(value);
-            continue;
-          }
-          if (key3 === "transform" && Array.isArray(value)) {
-            var _iteratorNormalCompletion2 = true,
-              _didIteratorError2 = false,
-              _iteratorError2 = void 0;
-            try {
-              for (var _iterator2 = value[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-                var t2 = _step2.value;
-                if (t2 && (typeof t2 === "undefined" ? "undefined" : _type_of(t2)) === "object") {
-                  var tKey2 = Object.keys(t2)[0];
-                  var tVal = t2[tKey2];
-                  if (typeof tVal === "number" || typeof tVal === "string") {
-                    transforms2.push(cloneAnimationValue(t2));
-                  }
-                }
-              }
-            } catch (err) {
-              _didIteratorError2 = true;
-              _iteratorError2 = err;
-            } finally {
-              try {
-                if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
-                  _iterator2.return();
-                }
-              } finally {
-                if (_didIteratorError2) {
-                  throw _iteratorError2;
-                }
-              }
-            }
-            continue;
-          }
-          if (canAnimateProperty(key3, value, animateOnly2)) {
-            animated[key3] = cloneAnimationValue(value);
-          } else {
-            statics[key3] = cloneAnimationValue(value);
-          }
-        }
-        animatedTargetsRef.value = animated;
-        staticTargetsRef.value = statics;
-        transformTargetsRef.value = transforms2;
+        var _emitterKeysRef_current;
+        var previousKeys = (_emitterKeysRef_current = emitterKeysRef.current) !== null && _emitterKeysRef_current !== void 0 ? _emitterKeysRef_current : committedRenderKeysRef.current;
+        var {
+          animated,
+          statics
+        } = splitAnimationStyles(nextStyle, isDark, configRef.value.disableAnimation, animateOnly);
+        var snapshot = buildSnapshot(animated, statics, getAnimatedTransforms(animated.transform), previousKeys, lastPaintedRef.current);
+        emitterSnapshotRef.value = snapshot.value;
+        emitterKeysRef.current = snapshot.keys;
+        lastPaintedRef.current = snapshot.painted;
         if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
           console.info("[animations-reanimated] useStyleEmitter update", {
             animated,
             statics,
-            transforms: transforms2
+            transforms: snapshot.value.transforms
           });
         }
       });
       var exitKeysRegistered = useRef(false);
       if (justStartedExiting && sendExitComplete) {
-        var exitKeys = [];
-        var animateOnly = props.animateOnly;
-        for (var key2 in animatedStyles) {
-          if (key2 === "transform") continue;
-          if (canAnimateProperty(key2, animatedStyles[key2], animateOnly)) {
-            exitKeys.push(key2);
-          }
-        }
-        var transforms = animatedStyles.transform;
-        if (transforms && Array.isArray(transforms)) {
-          var _iteratorNormalCompletion = true,
-            _didIteratorError = false,
-            _iteratorError = void 0;
-          try {
-            for (var _iterator = transforms[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-              var t = _step.value;
-              if (!t) continue;
-              var tKey = Object.keys(t)[0];
-              if (tKey) {
-                if (animateOnly && !animateOnly.includes(tKey)) {
-                  continue;
-                }
-                exitKeys.push(`transform:${tKey}`);
-              }
-            }
-          } catch (err) {
-            _didIteratorError = true;
-            _iteratorError = err;
-          } finally {
-            try {
-              if (!_iteratorNormalCompletion && _iterator.return != null) {
-                _iterator.return();
-              }
-            } finally {
-              if (_didIteratorError) {
-                throw _iteratorError;
-              }
-            }
-          }
-        }
+        var exitKeys = getGatedKeys(renderSnapshot.value);
         pendingExitKeysRef.current = new Set(exitKeys);
         exitKeysRegistered.current = exitKeys.length > 0;
       }
+      var previousDidAnimateStyleRef = useRef(null);
+      var didAnimateStyle = onDidAnimate ? JSON.stringify(style) : null;
+      var previousDidAnimateStyle = previousDidAnimateStyleRef.current;
+      var shouldRegisterDidAnimate = didAnimateStyle !== null && previousDidAnimateStyle !== null && previousDidAnimateStyle !== didAnimateStyle && !isExiting && !isEntering && !justFinishedEntering;
+      var didAnimateKeys = shouldRegisterDidAnimate ? getGatedKeys(renderSnapshot.value) : [];
+      useIsomorphicLayoutEffect(function () {
+        if (didAnimateStyle === null) {
+          previousDidAnimateStyleRef.current = null;
+          isCompletingAnimationRef.value = false;
+          return;
+        }
+        var previousStyleStillCurrent = previousDidAnimateStyleRef.current === previousDidAnimateStyle;
+        previousDidAnimateStyleRef.current = didAnimateStyle;
+        if (!shouldRegisterDidAnimate || !previousStyleStillCurrent) return;
+        var cycleId = ++didAnimateCycleIdRef.current;
+        pendingDidAnimateKeysRef.current = new Set(didAnimateKeys);
+        didAnimateCompletedRef.current = didAnimateKeys.length === 0;
+        isCompletingAnimationRef.value = didAnimateKeys.length > 0;
+        didAnimateCycleIdShared.value = cycleId;
+        if (didAnimateKeys.length === 0) {
+          var _onDidAnimateRef_current;
+          (_onDidAnimateRef_current = onDidAnimateRef.current) === null || _onDidAnimateRef_current === void 0 ? void 0 : _onDidAnimateRef_current.call(onDidAnimateRef);
+        }
+      }, [didAnimateStyle, shouldRegisterDidAnimate]);
       React.useEffect(function () {
         if (!justStartedExiting || !sendExitComplete) return;
         if (!exitKeysRegistered.current && pendingExitKeysRef.current.size === 0) {
@@ -682,99 +1012,97 @@ function createAnimations(animationsConfig) {
           }
         }
       }, [justStartedExiting, sendExitComplete]);
+      var mapperStateRef = useSharedValue({
+        emitted: {}
+      });
       var animatedStyle = useAnimatedStyle(function () {
         "worklet";
 
-        var _loop = function (key12) {
-          if (key12 === "transform") return "continue";
-          var targetValue = animatedValues[key12];
-          var _config_propertyConfigs_key;
-          var propConfig = (_config_propertyConfigs_key = config.propertyConfigs[key12]) !== null && _config_propertyConfigs_key !== void 0 ? _config_propertyConfigs_key : config.baseConfig;
-          var callback = void 0;
-          if (currentlyExiting) {
-            var capturedKey = key12;
-            var capturedCycleId = currentCycleId;
-            callback = function (finished) {
-              "worklet";
-
-              runOnJS(markExitKeyDone)(capturedKey, capturedCycleId, finished !== null && finished !== void 0 ? finished : false);
-            };
-          }
-          result[key12] = applyAnimation(targetValue, propConfig, callback);
-        };
-        if (disableAnimation || isHydrating) {
+        var mapperState = mapperStateRef.value;
+        var config = configRef.value;
+        if (config.disableAnimation || config.isHydrating) {
+          mapperState.emitted = {};
           return {};
         }
+        var previouslyEmitted = mapperState.emitted;
+        var emitted = {};
         var result = {};
-        var config = configRef.value;
-        var emitterAnimated = animatedTargetsRef.value;
-        var emitterStatic = staticTargetsRef.value;
-        var emitterTransforms = transformTargetsRef.value;
-        var hasEmitterUpdates = emitterAnimated !== null;
-        var animatedValues = hasEmitterUpdates ? emitterAnimated : animatedStyles;
-        var staticValues = hasEmitterUpdates ? emitterStatic : staticStyles;
+        var emitterSnapshot = emitterSnapshotRef.value;
+        var snapshot = emitterSnapshot !== null && emitterSnapshot !== void 0 ? emitterSnapshot : renderSnapshotRef.value;
+        var animatedValues = snapshot.animated;
+        var staticValues = snapshot.statics;
         var currentlyExiting = isExitingRef.value;
         var currentCycleId = exitCycleIdShared.value;
-        for (var key3 in staticValues) {
-          result[key3] = staticValues[key3];
+        var currentlyCompletingAnimation = isCompletingAnimationRef.value;
+        var currentDidAnimateCycleId = didAnimateCycleIdShared.value;
+        for (var key2 in staticValues) {
+          result[key2] = staticValues[key2];
+        }
+        for (var key1 in snapshot.removedKeys) {
+          if (!key1.startsWith("transform:") && !(key1 in staticValues)) {
+            result[key1] = snapshot.clearValue;
+          }
         }
-        for (var key1 in animatedValues) _loop(key1);
-        var transforms2 = hasEmitterUpdates ? emitterTransforms : animatedStyles.transform;
-        if (transforms2 && Array.isArray(transforms2)) {
+        for (var key22 in animatedValues) {
+          if (key22 === "transform") continue;
+          var targetValue = animatedValues[key22];
+          emitted[key22] = true;
+          if (typeof targetValue !== "number" && typeof targetValue !== "string") {
+            result[key22] = targetValue;
+            continue;
+          }
+          var _config_propertyConfigs_key;
+          result[key22] = animateSnapshotValue(key22, key22, targetValue, (_config_propertyConfigs_key = config.propertyConfigs[key22]) !== null && _config_propertyConfigs_key !== void 0 ? _config_propertyConfigs_key : config.baseConfig, !!previouslyEmitted[key22], snapshot.seeds[key22], !!snapshot.gatedKeys[key22], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone, !!COLOR_STYLE_KEYS[key22]);
+        }
+        var transforms = snapshot.transforms;
+        if (transforms.length > 0 || snapshot.removeTransform) {
           var validTransforms = [];
-          var _iteratorNormalCompletion2 = true,
-            _didIteratorError2 = false,
-            _iteratorError2 = void 0;
+          var _iteratorNormalCompletion = true,
+            _didIteratorError = false,
+            _iteratorError = void 0;
           try {
-            var _loop1 = function () {
-              var t2 = _step2.value;
-              if (!t2) return "continue";
-              var keys = Object.keys(t2);
-              if (keys.length === 0) return "continue";
-              var value = t2[keys[0]];
+            for (var _iterator = transforms[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+              var t = _step.value;
+              if (!t) continue;
+              var keys = Object.keys(t);
+              if (keys.length === 0) continue;
+              var transformKey = keys[0];
+              var value = t[transformKey];
               if (typeof value === "number" || typeof value === "string") {
-                var transformKey = Object.keys(t2)[0];
-                var targetValue = t2[transformKey];
                 var _config_propertyConfigs_transformKey;
                 var propConfig = (_config_propertyConfigs_transformKey = config.propertyConfigs[transformKey]) !== null && _config_propertyConfigs_transformKey !== void 0 ? _config_propertyConfigs_transformKey : config.baseConfig;
-                var callback = void 0;
-                if (currentlyExiting) {
-                  var capturedKey = `transform:${transformKey}`;
-                  var capturedCycleId = currentCycleId;
-                  callback = function (finished) {
-                    "worklet";
-
-                    runOnJS(markExitKeyDone)(capturedKey, capturedCycleId, finished !== null && finished !== void 0 ? finished : false);
-                  };
-                }
+                var subKey = `transform:${transformKey}`;
+                emitted[subKey] = true;
                 validTransforms.push({
-                  [transformKey]: applyAnimation(targetValue, propConfig, callback)
+                  [transformKey]: animateSnapshotValue(subKey, transformKey, value, propConfig, !!previouslyEmitted[subKey], snapshot.seeds[subKey], !!snapshot.gatedKeys[subKey], currentlyExiting, currentCycleId, currentlyCompletingAnimation, currentDidAnimateCycleId, markExitKeyDone, markDidAnimateKeyDone)
                 });
+              } else {
+                validTransforms.push(t);
               }
-            };
-            for (var _iterator2 = transforms2[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) _loop1();
+            }
           } catch (err) {
-            _didIteratorError2 = true;
-            _iteratorError2 = err;
+            _didIteratorError = true;
+            _iteratorError = err;
           } finally {
             try {
-              if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
-                _iterator2.return();
+              if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
               }
             } finally {
-              if (_didIteratorError2) {
-                throw _iteratorError2;
+              if (_didIteratorError) {
+                throw _iteratorError;
               }
             }
           }
-          if (validTransforms.length > 0) {
+          if (validTransforms.length > 0 || !("transform" in staticValues)) {
             result.transform = validTransforms;
           }
         }
+        mapperState.emitted = emitted;
         return result;
-      }, isWeb ? [animatedStyles, staticStyles, baseConfig, propertyConfigs, disableAnimation, isHydrating,
-      // pass SharedValues so the mapper watches them on web (no babel plugin)
-      animatedTargetsRef, staticTargetsRef, transformTargetsRef, isExitingRef, exitCycleIdShared, markExitKeyDone] : void 0);
+      }, isWeb ? [
+      // pass SharedValues so the stable mapper watches them on web (no babel plugin)
+      renderSnapshotRef, emitterSnapshotRef, configRef, isExitingRef, exitCycleIdShared, markExitKeyDone, isCompletingAnimationRef, didAnimateCycleIdShared, markDidAnimateKeyDone] : void 0);
       silenceAnimatedComponentDevCheck(animatedStyle);
       if (process.env.NODE_ENV === "development" && props.debug && props.debug !== "profile") {
         console.info("[animations-reanimated] useAnimations", {