Add pushAnimationMutations to the AnimationBackend (#56401)

Bartlomiej Bloniarz · meta-codesync[bot] · commit e4f050997324 · 2026-04-13T10:22:05.000-07:00
Summary: Pull Request resolved: #56401 Add `pushAnimationMutations(Callback)` to the AnimationBackend as a targeted alternative to `trigger()`. The existing `trigger()` method has two problems: 1. **Blast radius**: It calls `onAnimationFrame()` which invokes ALL registered callbacks. When one animation frontend (e.g. Animated) calls `trigger()` in response to an event, every other frontend (e.g. Reanimated) also spins up unnecessarily. 2. **Broken timestamp on iOS**: `trigger()` uses `std::chrono::steady_clock` which on iOS maps to a different kernel clock than what `CADisplayLink` uses for vsync timestamps. These clocks have different baselines and can diverge over time (e.g. after device sleep), causing animations to see time jumps. `pushAnimationMutations(Callback)` fixes both issues: - Executes only the provided callback, not all registered ones - Uses `AnimationChoreographer::now()` which delegates to `HighResTimeStamp`, providing a timestamp from the same clock as the vsync path on each platform Also refactors `onAnimationFrame` to use `unpackMutations`/`applySurfaceUpdates` helpers, avoiding intermediate vector/set merging when accumulating mutations from multiple callbacks. ## Changelog: [General][Added] - Add pushAnimationMutations to AnimationBackend for targeted event-driven animation updates Reviewed By: zeyap Differential Revision: D100164749 fbshipit-source-id: 53d36ed316614baa835707a45361ae8f3b828d26
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp b/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp
@@ -515,7 +515,10 @@ void NativeAnimatedNodesManager::handleAnimatedEvent(
     // frames.
     if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
       if (auto animationBackend = animationBackend_.lock()) {
-        animationBackend->trigger();
+        animationBackend->pushAnimationMutations(
+            [this](AnimationTimestamp timestamp) -> AnimationMutations {
+              return pullAnimationMutations(timestamp);
+            });
       }
     } else {
       onRender();
diff --git a/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.cpp b/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.cpp
@@ -51,31 +51,27 @@ AnimationBackend::AnimationBackend(
   react_native_assert(uiManager_.expired() == false);
 }
 
-void AnimationBackend::onAnimationFrame(AnimationTimestamp timestamp) {
-  std::vector<CallbackWithId> callbacksCopy;
-  std::unordered_map<SurfaceId, SurfaceUpdates> surfaceUpdates;
-  std::set<SurfaceId> asyncFlushSurfaces;
+void AnimationBackend::unpackMutations(
+    AnimationMutations& mutations,
+    std::unordered_map<SurfaceId, SurfaceUpdates>& surfaceUpdates,
+    std::set<SurfaceId>& asyncFlushSurfaces) {
+  for (auto& mutation : mutations.batch) {
+    const auto family = mutation.family;
+    react_native_assert(family != nullptr);
 
-  {
-    std::lock_guard lock(mutex_);
-    callbacksCopy = callbacks;
+    auto& [families, updates, hasLayoutUpdates] =
+        surfaceUpdates[family->getSurfaceId()];
+    hasLayoutUpdates |= mutation.hasLayoutUpdates;
+    families.insert(family);
+    updates[mutation.tag] = std::move(mutation.props);
   }
 
-  for (auto& callbackWithId : callbacksCopy) {
-    auto mutations = callbackWithId.callback(timestamp);
-    asyncFlushSurfaces.merge(mutations.asyncFlushSurfaces);
-    for (auto& mutation : mutations.batch) {
-      const auto family = mutation.family;
-      react_native_assert(family != nullptr);
-
-      auto& [families, updates, hasLayoutUpdates] =
-          surfaceUpdates[family->getSurfaceId()];
-      hasLayoutUpdates |= mutation.hasLayoutUpdates;
-      families.insert(family);
-      updates[mutation.tag] = std::move(mutation.props);
-    }
-  }
+  asyncFlushSurfaces.merge(mutations.asyncFlushSurfaces);
+}
 
+void AnimationBackend::applySurfaceUpdates(
+    std::unordered_map<SurfaceId, SurfaceUpdates>& surfaceUpdates,
+    const std::set<SurfaceId>& asyncFlushSurfaces) {
   animatedPropsRegistry_->update(surfaceUpdates);
 
   for (auto& [surfaceId, updates] : surfaceUpdates) {
@@ -89,6 +85,30 @@ void AnimationBackend::onAnimationFrame(AnimationTimestamp timestamp) {
   requestAsyncFlushForSurfaces(asyncFlushSurfaces);
 }
 
+void AnimationBackend::applyMutations(AnimationMutations mutations) {
+  std::unordered_map<SurfaceId, SurfaceUpdates> surfaceUpdates;
+  std::set<SurfaceId> asyncFlushSurfaces;
+  unpackMutations(mutations, surfaceUpdates, asyncFlushSurfaces);
+  applySurfaceUpdates(surfaceUpdates, asyncFlushSurfaces);
+}
+
+void AnimationBackend::onAnimationFrame(AnimationTimestamp timestamp) {
+  std::vector<CallbackWithId> callbacksCopy;
+
+  {
+    std::lock_guard lock(mutex_);
+    callbacksCopy = callbacks;
+  }
+
+  std::unordered_map<SurfaceId, SurfaceUpdates> surfaceUpdates;
+  std::set<SurfaceId> asyncFlushSurfaces;
+  for (auto& callbackWithId : callbacksCopy) {
+    auto mutations = callbackWithId.callback(timestamp);
+    unpackMutations(mutations, surfaceUpdates, asyncFlushSurfaces);
+  }
+  applySurfaceUpdates(surfaceUpdates, asyncFlushSurfaces);
+}
+
 CallbackId AnimationBackend::start(const Callback& callback) {
   std::lock_guard lock(mutex_);
 
@@ -123,6 +143,12 @@ void AnimationBackend::trigger() {
   onAnimationFrame(std::chrono::steady_clock::now().time_since_epoch());
 }
 
+void AnimationBackend::pushAnimationMutations(const Callback& callback) {
+  auto timestamp = animationChoreographer_->now();
+  auto mutations = callback(timestamp);
+  applyMutations(std::move(mutations));
+}
+
 void AnimationBackend::commitUpdates(
     SurfaceId surfaceId,
     SurfaceUpdates& surfaceUpdates) {
diff --git a/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.h b/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.h
@@ -59,10 +59,19 @@ class AnimationBackend : public UIManagerAnimationBackend {
 
   void onAnimationFrame(AnimationTimestamp timestamp) override;
   void trigger() override;
+  void pushAnimationMutations(const Callback &callback) override;
   CallbackId start(const Callback &callback) override;
   void stop(CallbackId callbackId) override;
 
  private:
+  void unpackMutations(
+      AnimationMutations &mutations,
+      std::unordered_map<SurfaceId, SurfaceUpdates> &surfaceUpdates,
+      std::set<SurfaceId> &asyncFlushSurfaces);
+  void applySurfaceUpdates(
+      std::unordered_map<SurfaceId, SurfaceUpdates> &surfaceUpdates,
+      const std::set<SurfaceId> &asyncFlushSurfaces);
+  void applyMutations(AnimationMutations mutations);
   std::vector<CallbackWithId> callbacks;
   std::shared_ptr<AnimatedPropsRegistry> animatedPropsRegistry_;
   std::shared_ptr<AnimationChoreographer> animationChoreographer_;
diff --git a/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationChoreographer.h b/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationChoreographer.h
@@ -8,6 +8,7 @@
 #pragma once
 
 #include <react/renderer/uimanager/UIManagerAnimationBackend.h>
+#include <react/timing/primitives.h>
 
 namespace facebook::react {
 
@@ -21,6 +22,10 @@ class AnimationChoreographer {
 
   virtual void resume() = 0;
   virtual void pause() = 0;
+  virtual AnimationTimestamp now() const
+  {
+    return HighResTimeStamp::now().toChronoSteadyClockTimePoint().time_since_epoch();
+  }
   void setAnimationBackend(std::weak_ptr<UIManagerAnimationBackend> animationBackend)
   {
     animationBackend_ = animationBackend;
diff --git a/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerAnimationBackend.h b/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerAnimationBackend.h
@@ -31,6 +31,7 @@ class UIManagerAnimationBackend {
   virtual void stop(CallbackId callbackId) = 0;
   virtual void clearRegistry(SurfaceId surfaceId) = 0;
   virtual void trigger() = 0;
+  virtual void pushAnimationMutations(const Callback &callback) = 0;
   virtual void registerJSInvoker(std::shared_ptr<CallInvoker> jsInvoker) = 0;
 };
 
diff --git a/private/react-native-fantom/tester/src/TesterAnimationChoreographer.h b/private/react-native-fantom/tester/src/TesterAnimationChoreographer.h
@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <functional>
+
 #include <react/renderer/animationbackend/AnimationChoreographer.h>
 #include <react/renderer/core/ReactPrimitives.h>
 #include <react/runtime/ReactInstanceConfig.h>
@@ -19,8 +21,22 @@ class TesterAnimationChoreographer : public AnimationChoreographer {
   void pause() override;
   void runUITick(AnimationTimestamp timestamp);
 
+  AnimationTimestamp now() const override
+  {
+    if (clockProvider_) {
+      return clockProvider_();
+    }
+    return AnimationChoreographer::now();
+  }
+
+  void setClockProvider(std::function<AnimationTimestamp()> clockProvider)
+  {
+    clockProvider_ = std::move(clockProvider);
+  }
+
  private:
   bool isPaused_{false};
+  std::function<AnimationTimestamp()> clockProvider_;
 };
 
 } // namespace facebook::react
diff --git a/scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api b/scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api
@@ -1546,6 +1546,7 @@ class facebook::react::AnimationBackend : public facebook::react::UIManagerAnima
   public virtual facebook::react::CallbackId start(const facebook::react::UIManagerAnimationBackend::Callback& callback) override;
   public virtual void clearRegistry(facebook::react::SurfaceId surfaceId) override;
   public virtual void onAnimationFrame(facebook::react::AnimationTimestamp timestamp) override;
+  public virtual void pushAnimationMutations(const facebook::react::UIManagerAnimationBackend::Callback& callback) override;
   public virtual void registerJSInvoker(std::shared_ptr<facebook::react::CallInvoker> jsInvoker) override;
   public virtual void stop(facebook::react::CallbackId callbackId) override;
   public virtual void trigger() override;
@@ -1562,6 +1563,7 @@ class facebook::react::AnimationBackendCommitHook : public facebook::react::UIMa
 }
 
 class facebook::react::AnimationChoreographer {
+  public virtual facebook::react::AnimationTimestamp now() const;
   public virtual void pause() = 0;
   public virtual void resume() = 0;
   public virtual ~AnimationChoreographer() = default;
@@ -2814,7 +2816,7 @@ class facebook::react::JReactHostInspectorTarget : public jni::HybridClass<faceb
   public static void registerNatives();
   public virtual facebook::react::jsinspector_modern::HostTargetMetadata getMetadata() override;
   public virtual facebook::react::jsinspector_modern::HostTargetTracingDelegate* getTracingDelegate() override;
-  public virtual void captureScreenshot(const facebook::react::jsinspector_modern::HostTargetDelegate::PageCaptureScreenshotRequest&, const std::function<void(std::optional<std::string> base64Data)>& callback) override;
+  public virtual std::optional<std::string> captureScreenshot(const facebook::react::jsinspector_modern::HostTargetDelegate::PageCaptureScreenshotRequest&) override;
   public virtual void onReload(const facebook::react::jsinspector_modern::HostTargetDelegate::PageReloadRequest& request) override;
   public virtual void onSetPausedInDebuggerMessage(const facebook::react::jsinspector_modern::HostTargetDelegate::OverlaySetPausedInDebuggerMessageRequest& request) override;
   public void loadNetworkResource(const facebook::react::jsinspector_modern::LoadNetworkResourceRequest& params, facebook::react::jsinspector_modern::ScopedExecutor<facebook::react::jsinspector_modern::NetworkRequestListener> executor) override;
@@ -5211,6 +5213,7 @@ class facebook::react::UIManagerAnimationBackend {
   public virtual facebook::react::CallbackId start(const facebook::react::UIManagerAnimationBackend::Callback& callback) = 0;
   public virtual void clearRegistry(facebook::react::SurfaceId surfaceId) = 0;
   public virtual void onAnimationFrame(facebook::react::AnimationTimestamp timestamp) = 0;
+  public virtual void pushAnimationMutations(const facebook::react::UIManagerAnimationBackend::Callback& callback) = 0;
   public virtual void registerJSInvoker(std::shared_ptr<facebook::react::CallInvoker> jsInvoker) = 0;
   public virtual void stop(facebook::react::CallbackId callbackId) = 0;
   public virtual void trigger() = 0;
@@ -10379,7 +10382,7 @@ class facebook::react::jsinspector_modern::HostTargetDelegate : public facebook:
   public facebook::react::jsinspector_modern::HostTargetDelegate& operator=(facebook::react::jsinspector_modern::HostTargetDelegate&&) = delete;
   public virtual facebook::react::jsinspector_modern::HostTargetMetadata getMetadata() = 0;
   public virtual facebook::react::jsinspector_modern::HostTargetTracingDelegate* getTracingDelegate();
-  public virtual void captureScreenshot(const facebook::react::jsinspector_modern::HostTargetDelegate::PageCaptureScreenshotRequest&, const std::function<void(std::optional<std::string> base64Data)>& callback);
+  public virtual std::optional<std::string> captureScreenshot(const facebook::react::jsinspector_modern::HostTargetDelegate::PageCaptureScreenshotRequest&);
   public virtual void loadNetworkResource(const facebook::react::jsinspector_modern::LoadNetworkResourceRequest&, facebook::react::jsinspector_modern::ScopedExecutor<facebook::react::jsinspector_modern::NetworkRequestListener>) override;
   public virtual void onReload(const facebook::react::jsinspector_modern::HostTargetDelegate::PageReloadRequest& request) = 0;
   public virtual void onSetPausedInDebuggerMessage(const facebook::react::jsinspector_modern::HostTargetDelegate::OverlaySetPausedInDebuggerMessageRequest& request) = 0;
@@ -12930,6 +12933,8 @@ class facebook::yoga::StyleSizeLength {
 class facebook::yoga::StyleValueHandle {
   public constexpr bool isAuto() const;
   public constexpr bool isDefined() const;
+  public constexpr bool isPercent() const;
+  public constexpr bool isPoint() const;
   public constexpr bool isUndefined() const;
   public static constexpr facebook::yoga::StyleValueHandle ofAuto();
 }
@@ -12938,6 +12943,7 @@ class facebook::yoga::StyleValuePool {
   public facebook::yoga::FloatOptional getNumber(facebook::yoga::StyleValueHandle handle) const;
   public facebook::yoga::StyleLength getLength(facebook::yoga::StyleValueHandle handle) const;
   public facebook::yoga::StyleSizeLength getSize(facebook::yoga::StyleValueHandle handle) const;
+  public float getStoredValue(facebook::yoga::StyleValueHandle handle) const;
   public void store(facebook::yoga::StyleValueHandle& handle, facebook::yoga::FloatOptional number);
   public void store(facebook::yoga::StyleValueHandle& handle, facebook::yoga::StyleLength length);
   public void store(facebook::yoga::StyleValueHandle& handle, facebook::yoga::StyleSizeLength sizeValue);
diff --git a/scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api b/scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api
@@ -1545,6 +1545,7 @@ class facebook::react::AnimationBackend : public facebook::react::UIManagerAnima
   public virtual facebook::react::CallbackId start(const facebook::react::UIManagerAnimationBackend::Callback& callback) override;
   public virtual void clearRegistry(facebook::react::SurfaceId surfaceId) override;
   public virtual void onAnimationFrame(facebook::react::AnimationTimestamp timestamp) override;
+  public virtual void pushAnimationMutations(const facebook::react::UIManagerAnimationBackend::Callback& callback) override;
   public virtual void registerJSInvoker(std::shared_ptr<facebook::react::CallInvoker> jsInvoker) override;
   public virtual void stop(facebook::react::CallbackId callbackId) override;
   public virtual void trigger() override;
@@ -1561,6 +1562,7 @@ class facebook::react::AnimationBackendCommitHook : public facebook::react::UIMa
 }
 
 class facebook::react::AnimationChoreographer {
+  public virtual facebook::react::AnimationTimestamp now() const;
   public virtual void pause() = 0;
   public virtual void resume() = 0;
   public virtual ~AnimationChoreographer() = default;
@@ -2811,7 +2813,7 @@ class facebook::react::JReactHostInspectorTarget : public jni::HybridClass<faceb
   public static void registerNatives();
   public virtual facebook::react::jsinspector_modern::HostTargetMetadata getMetadata() override;
   public virtual facebook::react::jsinspector_modern::HostTargetTracingDelegate* getTracingDelegate() override;
-  public virtual void captureScreenshot(const facebook::react::jsinspector_modern::HostTargetDelegate::PageCaptureScreenshotRequest&, const std::function<void(std::optional<std::string> base64Data)>& callback) override;
+  public virtual std::optional<std::string> captureScreenshot(const facebook::react::jsinspector_modern::HostTargetDelegate::PageCaptureScreenshotRequest&) override;
   public virtual void onReload(const facebook::react::jsinspector_modern::HostTargetDelegate::PageReloadRequest& request) override;
   public virtual void onSetPausedInDebuggerMessage(const facebook::react::jsinspector_modern::HostTargetDelegate::OverlaySetPausedInDebuggerMessageRequest& request) override;
   public void loadNetworkResource(const facebook::react::jsinspector_modern::LoadNetworkResourceRequest& params, facebook::react::jsinspector_modern::ScopedExecutor<facebook::react::jsinspector_modern::NetworkRequestListener> executor) override;
@@ -5202,6 +5204,7 @@ class facebook::react::UIManagerAnimationBackend {
   public virtual facebook::react::CallbackId start(const facebook::react::UIManagerAnimationBackend::Callback& callback) = 0;
   public virtual void clearRegistry(facebook::react::SurfaceId surfaceId) = 0;
   public virtual void onAnimationFrame(facebook::react::AnimationTimestamp timestamp) = 0;
+  public virtual void pushAnimationMutations(const facebook::react::UIManagerAnimationBackend::Callback& callback) = 0;
   public virtual void registerJSInvoker(std::shared_ptr<facebook::react::CallInvoker> jsInvoker) = 0;
   public virtual void stop(facebook::react::CallbackId callbackId) = 0;
   public virtual void trigger() = 0;
@@ -10235,7 +10238,7 @@ class facebook::react::jsinspector_modern::HostTargetDelegate : public facebook:
   public facebook::react::jsinspector_modern::HostTargetDelegate& operator=(facebook::react::jsinspector_modern::HostTargetDelegate&&) = delete;
   public virtual facebook::react::jsinspector_modern::HostTargetMetadata getMetadata() = 0;
   public virtual facebook::react::jsinspector_modern::HostTargetTracingDelegate* getTracingDelegate();
-  public virtual void captureScreenshot(const facebook::react::jsinspector_modern::HostTargetDelegate::PageCaptureScreenshotRequest&, const std::function<void(std::optional<std::string> base64Data)>& callback);
+  public virtual std::optional<std::string> captureScreenshot(const facebook::react::jsinspector_modern::HostTargetDelegate::PageCaptureScreenshotRequest&);
   public virtual void loadNetworkResource(const facebook::react::jsinspector_modern::LoadNetworkResourceRequest&, facebook::react::jsinspector_modern::ScopedExecutor<facebook::react::jsinspector_modern::NetworkRequestListener>) override;
   public virtual void onReload(const facebook::react::jsinspector_modern::HostTargetDelegate::PageReloadRequest& request) = 0;
   public virtual void onSetPausedInDebuggerMessage(const facebook::react::jsinspector_modern::HostTargetDelegate::OverlaySetPausedInDebuggerMessageRequest& request) = 0;
@@ -12786,6 +12789,8 @@ class facebook::yoga::StyleSizeLength {
 class facebook::yoga::StyleValueHandle {
   public constexpr bool isAuto() const;
   public constexpr bool isDefined() const;
+  public constexpr bool isPercent() const;
+  public constexpr bool isPoint() const;
   public constexpr bool isUndefined() const;
   public static constexpr facebook::yoga::StyleValueHandle ofAuto();
 }
@@ -12794,6 +12799,7 @@ class facebook::yoga::StyleValuePool {
   public facebook::yoga::FloatOptional getNumber(facebook::yoga::StyleValueHandle handle) const;
   public facebook::yoga::StyleLength getLength(facebook::yoga::StyleValueHandle handle) const;
   public facebook::yoga::StyleSizeLength getSize(facebook::yoga::StyleValueHandle handle) const;
+  public float getStoredValue(facebook::yoga::StyleValueHandle handle) const;
   public void store(facebook::yoga::StyleValueHandle& handle, facebook::yoga::FloatOptional number);
   public void store(facebook::yoga::StyleValueHandle& handle, facebook::yoga::StyleLength length);
   public void store(facebook::yoga::StyleValueHandle& handle, facebook::yoga::StyleSizeLength sizeValue);
diff --git a/scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api b/scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api
diff --git a/scripts/cxx-api/api-snapshots/ReactAppleReleaseCxx.api b/scripts/cxx-api/api-snapshots/ReactAppleReleaseCxx.api
diff --git a/scripts/cxx-api/api-snapshots/ReactCommonDebugCxx.api b/scripts/cxx-api/api-snapshots/ReactCommonDebugCxx.api
diff --git a/scripts/cxx-api/api-snapshots/ReactCommonReleaseCxx.api b/scripts/cxx-api/api-snapshots/ReactCommonReleaseCxx.api
