react-native-tvos 0.82.1-0 → 0.83.0-0

package/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp

@@ -25,6 +25,7 @@
 #include <react/renderer/animated/nodes/InterpolationAnimatedNode.h>
 #include <react/renderer/animated/nodes/ModulusAnimatedNode.h>
 #include <react/renderer/animated/nodes/MultiplicationAnimatedNode.h>
+#include <react/renderer/animated/nodes/ObjectAnimatedNode.h>
 #include <react/renderer/animated/nodes/PropsAnimatedNode.h>
 #include <react/renderer/animated/nodes/RoundAnimatedNode.h>
 #include <react/renderer/animated/nodes/StyleAnimatedNode.h>
@@ -34,6 +35,10 @@
 #include <react/renderer/animated/nodes/ValueAnimatedNode.h>
 #include <react/renderer/core/EventEmitter.h>
 
+#ifdef RN_USE_ANIMATION_BACKEND
+#include <react/renderer/animationbackend/AnimatedPropsBuilder.h>
+#endif
+
 namespace facebook::react {
 
 // Global function pointer for getting current time. Current time
@@ -63,15 +68,19 @@ void mergeObjects(folly::dynamic& out, const folly::dynamic& objectToMerge) {
 
 } // namespace
 
+thread_local bool NativeAnimatedNodesManager::isOnRenderThread_{false};
+
 NativeAnimatedNodesManager::NativeAnimatedNodesManager(
     DirectManipulationCallback&& directManipulationCallback,
     FabricCommitCallback&& fabricCommitCallback,
     StartOnRenderCallback&& startOnRenderCallback,
-    StopOnRenderCallback&& stopOnRenderCallback) noexcept
+    StopOnRenderCallback&& stopOnRenderCallback,
+    FrameRateListenerCallback&& frameRateListenerCallback) noexcept
     : directManipulationCallback_(std::move(directManipulationCallback)),
       fabricCommitCallback_(std::move(fabricCommitCallback)),
       startOnRenderCallback_(std::move(startOnRenderCallback)),
-      stopOnRenderCallback_(std::move(stopOnRenderCallback)) {
+      stopOnRenderCallback_(std::move(stopOnRenderCallback)),
+      frameRateListenerCallback_(std::move(frameRateListenerCallback)) {
   if (!fabricCommitCallback_) {
     LOG(WARNING)
         << "C++ Animated was setup without commit callback. This may lead to issue where buttons are not tappable when animation is driven by onScroll event.";
@@ -88,8 +97,12 @@ NativeAnimatedNodesManager::NativeAnimatedNodesManager(
   }
 }
 
+NativeAnimatedNodesManager::NativeAnimatedNodesManager(
+    std::shared_ptr<UIManagerAnimationBackend> animationBackend) noexcept
+    : animationBackend_(animationBackend) {}
+
 NativeAnimatedNodesManager::~NativeAnimatedNodesManager() noexcept {
-  stopRenderCallbackIfNeeded();
+  stopRenderCallbackIfNeeded(true);
 }
 
 std::optional<double> NativeAnimatedNodesManager::getValue(Tag tag) noexcept {
@@ -145,6 +158,8 @@ std::unique_ptr<AnimatedNode> NativeAnimatedNodesManager::animatedNode(
       return std::make_unique<DiffClampAnimatedNode>(tag, config, *this);
     case AnimatedNodeType::Round:
       return std::make_unique<RoundAnimatedNode>(tag, config, *this);
+    case AnimatedNodeType::Object:
+      return std::make_unique<ObjectAnimatedNode>(tag, config, *this);
     default:
       LOG(WARNING) << "Cannot create AnimatedNode of type " << typeName
                    << ", it's not implemented yet";
@@ -152,9 +167,28 @@ std::unique_ptr<AnimatedNode> NativeAnimatedNodesManager::animatedNode(
   }
 }
 
+void NativeAnimatedNodesManager::createAnimatedNodeAsync(
+    Tag tag,
+    const folly::dynamic& config) noexcept {
+  if (isOnRenderThread_) {
+    LOG(ERROR)
+        << "createAnimatedNodeAsync should not be called on render thread";
+    return;
+  }
+  auto node = animatedNode(tag, config);
+  if (node) {
+    std::lock_guard<std::mutex> lock(animatedNodesCreatedAsyncMutex_);
+    animatedNodesCreatedAsync_.emplace(tag, std::move(node));
+  }
+}
+
 void NativeAnimatedNodesManager::createAnimatedNode(
     Tag tag,
     const folly::dynamic& config) noexcept {
+  if (!isOnRenderThread_) {
+    LOG(ERROR) << "createAnimatedNode should only be called on render thread";
+    return;
+  }
   auto node = animatedNode(tag, config);
   if (node) {
     std::lock_guard<std::mutex> lock(connectedAnimatedNodesMutex_);
@@ -407,8 +441,6 @@ void NativeAnimatedNodesManager::removeAnimatedEventFromView(
   }
 }
 
-static thread_local bool isOnRenderThread_{false};
-
 void NativeAnimatedNodesManager::handleAnimatedEvent(
     Tag viewTag,
     const std::string& eventName,
@@ -461,7 +493,7 @@ void NativeAnimatedNodesManager::handleAnimatedEvent(
     // when there are no active animations. Calling
     // `startRenderCallbackIfNeeded` will call platform specific code to
     // register UI tick listener.
-    startRenderCallbackIfNeeded();
+    startRenderCallbackIfNeeded(false);
     // Calling startOnRenderCallback_ will register a UI tick listener.
     // The UI ticker listener will not be called until the next frame.
     // That's why, in case this is called from the UI thread, we need to
@@ -486,7 +518,19 @@ NativeAnimatedNodesManager::ensureEventEmitterListener() noexcept {
   return eventEmitterListener_;
 }
 
-void NativeAnimatedNodesManager::startRenderCallbackIfNeeded() {
+void NativeAnimatedNodesManager::startRenderCallbackIfNeeded(bool isAsync) {
+  if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
+#ifdef RN_USE_ANIMATION_BACKEND
+    if (auto animationBackend = animationBackend_.lock()) {
+      std::static_pointer_cast<AnimationBackend>(animationBackend)
+          ->start(
+              [this](float /*f*/) { return pullAnimationMutations(); },
+              isAsync);
+    }
+#endif
+
+    return;
+  }
   // This method can be called from either the UI thread or JavaScript thread.
   // It ensures `startOnRenderCallback_` is called exactly once using atomic
   // operations. We use std::atomic_bool rather than std::mutex to avoid
@@ -499,11 +543,18 @@ void NativeAnimatedNodesManager::startRenderCallbackIfNeeded() {
   }
 
   if (startOnRenderCallback_) {
-    startOnRenderCallback_([this]() { onRender(); });
+    startOnRenderCallback_([this]() { onRender(); }, isAsync);
   }
 }
 
-void NativeAnimatedNodesManager::stopRenderCallbackIfNeeded() noexcept {
+void NativeAnimatedNodesManager::stopRenderCallbackIfNeeded(
+    bool isAsync) noexcept {
+  if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
+    if (auto animationBackend = animationBackend_.lock()) {
+      animationBackend->stop(isAsync);
+    }
+    return;
+  }
   // When multiple threads reach this point, only one thread should call
   // stopOnRenderCallback_. This synchronization is primarily needed during
   // destruction of NativeAnimatedNodesManager. In normal operation,
@@ -512,7 +563,11 @@ void NativeAnimatedNodesManager::stopRenderCallbackIfNeeded() noexcept {
 
   if (isRenderCallbackStarted) {
     if (stopOnRenderCallback_) {
-      stopOnRenderCallback_();
+      stopOnRenderCallback_(isAsync);
+    }
+
+    if (frameRateListenerCallback_) {
+      frameRateListenerCallback_(false);
     }
   }
 }
@@ -560,9 +615,10 @@ void NativeAnimatedNodesManager::updateNodes(
 #endif
         const auto connectedToFinishedAnimation =
             is_node_connected_to_finished_animation(node, nodeTag, false);
-        nodesQueue.emplace_back(NodesQueueItem{
-            .node = node,
-            .connectedToFinishedAnimation = connectedToFinishedAnimation});
+        nodesQueue.emplace_back(
+            NodesQueueItem{
+                .node = node,
+                .connectedToFinishedAnimation = connectedToFinishedAnimation});
       }
     }
   }
@@ -583,9 +639,10 @@ void NativeAnimatedNodesManager::updateNodes(
         const auto connectedToFinishedAnimation =
             is_node_connected_to_finished_animation(
                 child, childTag, nextNode.connectedToFinishedAnimation);
-        nodesQueue.emplace_back(NodesQueueItem{
-            .node = child,
-            .connectedToFinishedAnimation = connectedToFinishedAnimation});
+        nodesQueue.emplace_back(
+            NodesQueueItem{
+                .node = child,
+                .connectedToFinishedAnimation = connectedToFinishedAnimation});
       }
     }
   }
@@ -615,9 +672,10 @@ void NativeAnimatedNodesManager::updateNodes(
 #endif
         const auto connectedToFinishedAnimation =
             is_node_connected_to_finished_animation(node, nodeTag, false);
-        nodesQueue.emplace_back(NodesQueueItem{
-            .node = node,
-            .connectedToFinishedAnimation = connectedToFinishedAnimation});
+        nodesQueue.emplace_back(
+            NodesQueueItem{
+                .node = node,
+                .connectedToFinishedAnimation = connectedToFinishedAnimation});
       }
     }
   }
@@ -649,9 +707,10 @@ void NativeAnimatedNodesManager::updateNodes(
         const auto connectedToFinishedAnimation =
             is_node_connected_to_finished_animation(
                 child, childTag, nextNode.connectedToFinishedAnimation);
-        nodesQueue.emplace_back(NodesQueueItem{
-            .node = child,
-            .connectedToFinishedAnimation = connectedToFinishedAnimation});
+        nodesQueue.emplace_back(
+            NodesQueueItem{
+                .node = child,
+                .connectedToFinishedAnimation = connectedToFinishedAnimation});
       }
 #ifdef REACT_NATIVE_DEBUG
       else if (child->bfsColor == animatedGraphBFSColor_) {
@@ -739,7 +798,8 @@ folly::dynamic NativeAnimatedNodesManager::managedProps(
     if (const auto node = getAnimatedNode<PropsAnimatedNode>(iter->second)) {
       return node->props();
     }
-  } else {
+  } else if (!ReactNativeFeatureFlags::
+                 overrideBySynchronousMountPropsAtMountingAndroid()) {
     std::lock_guard<std::mutex> lockUnsyncedDirectViewProps(
         unsyncedDirectViewPropsMutex_);
     if (auto it = unsyncedDirectViewProps_.find(tag);
@@ -758,7 +818,8 @@ bool NativeAnimatedNodesManager::hasManagedProps() const noexcept {
       return true;
     }
   }
-  {
+  if (!ReactNativeFeatureFlags::
+          overrideBySynchronousMountPropsAtMountingAndroid()) {
     std::lock_guard<std::mutex> lock(unsyncedDirectViewPropsMutex_);
     if (!unsyncedDirectViewProps_.empty()) {
       return true;
@@ -768,10 +829,13 @@ bool NativeAnimatedNodesManager::hasManagedProps() const noexcept {
 }
 
 void NativeAnimatedNodesManager::onManagedPropsRemoved(Tag tag) noexcept {
-  std::lock_guard<std::mutex> lock(unsyncedDirectViewPropsMutex_);
-  if (auto iter = unsyncedDirectViewProps_.find(tag);
-      iter != unsyncedDirectViewProps_.end()) {
-    unsyncedDirectViewProps_.erase(iter);
+  if (!ReactNativeFeatureFlags::
+          overrideBySynchronousMountPropsAtMountingAndroid()) {
+    std::lock_guard<std::mutex> lock(unsyncedDirectViewPropsMutex_);
+    if (auto iter = unsyncedDirectViewProps_.find(tag);
+        iter != unsyncedDirectViewProps_.end()) {
+      unsyncedDirectViewProps_.erase(iter);
+    }
   }
 }
 
@@ -811,6 +875,15 @@ void NativeAnimatedNodesManager::schedulePropsCommit(
     const folly::dynamic& props,
     bool layoutStyleUpdated,
     bool forceFabricCommit) noexcept {
+  if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
+    if (layoutStyleUpdated) {
+      mergeObjects(updateViewProps_[viewTag], props);
+    } else {
+      mergeObjects(updateViewPropsDirect_[viewTag], props);
+    }
+    return;
+  }
+
   // When fabricCommitCallback_ & directManipulationCallback_ are both
   // available, we commit layout props via Fabric and the other using direct
   // manipulation. If only fabricCommitCallback_ is available, we commit all
@@ -825,21 +898,168 @@ void NativeAnimatedNodesManager::schedulePropsCommit(
     mergeObjects(updateViewPropsDirect_[viewTag], props);
   } else if (!layoutStyleUpdated && directManipulationCallback_ != nullptr) {
     mergeObjects(updateViewPropsDirect_[viewTag], props);
-    {
+    if (!ReactNativeFeatureFlags::
+            overrideBySynchronousMountPropsAtMountingAndroid()) {
       std::lock_guard<std::mutex> lock(unsyncedDirectViewPropsMutex_);
       mergeObjects(unsyncedDirectViewProps_[viewTag], props);
     }
   }
 }
 
+#ifdef RN_USE_ANIMATION_BACKEND
+AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
+  if (!ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
+    return {};
+  }
+  TraceSection s(
+      "NativeAnimatedNodesManager::pullAnimations",
+      "numActiveAnimations",
+      activeAnimations_.size());
+
+  isOnRenderThread_ = true;
+
+  // Run operations scheduled from AnimatedModule
+  std::vector<UiTask> operations;
+  {
+    std::lock_guard<std::mutex> lock(uiTasksMutex_);
+    std::swap(operations_, operations);
+  }
+
+  for (auto& task : operations) {
+    task();
+  }
+
+  AnimationMutations mutations;
+
+  // Step through the animation loop
+  if (isAnimationUpdateNeeded()) {
+    auto microseconds = std::chrono::duration_cast<std::chrono::microseconds>(
+                            g_now().time_since_epoch())
+                            .count();
+
+    auto timestamp = static_cast<double>(microseconds) / 1000.0;
+    bool containsChange = false;
+    AnimatedPropsBuilder propsBuilder;
+    {
+      // copied from onAnimationFrame
+      // Run all active animations
+      auto hasFinishedAnimations = false;
+      std::set<int> finishedAnimationValueNodes;
+      for (const auto& [_id, driver] : activeAnimations_) {
+        driver->runAnimationStep(timestamp);
+
+        if (driver->getIsComplete()) {
+          hasFinishedAnimations = true;
+          const auto shouldRemoveJsSync =
+              ReactNativeFeatureFlags::cxxNativeAnimatedRemoveJsSync() &&
+              !ReactNativeFeatureFlags::disableFabricCommitInCXXAnimated();
+          if (shouldRemoveJsSync) {
+            finishedAnimationValueNodes.insert(driver->getAnimatedValueTag());
+          }
+        }
+      }
+
+      // Update all animated nodes
+      updateNodes(finishedAnimationValueNodes);
+
+      // remove finished animations
+      if (hasFinishedAnimations) {
+        std::vector<int> finishedAnimations;
+        for (const auto& [animationId, driver] : activeAnimations_) {
+          if (driver->getIsComplete()) {
+            if (getAnimatedNode<ValueAnimatedNode>(
+                    driver->getAnimatedValueTag()) != nullptr) {
+              driver->stopAnimation();
+            }
+            finishedAnimations.emplace_back(animationId);
+          }
+        }
+        for (const auto& id : finishedAnimations) {
+          activeAnimations_.erase(id);
+        }
+      }
+
+      for (auto& [tag, props] : updateViewPropsDirect_) {
+        // TODO: also handle layout props (updateViewProps_). It is skipped for
+        // now, because the backend requires shadowNodeFamilies to be able to
+        // commit to the ShadowTree
+        propsBuilder.storeDynamic(props);
+        mutations.push_back(
+            AnimationMutation{tag, nullptr, propsBuilder.get()});
+        containsChange = true;
+      }
+    }
+
+    if (!containsChange) {
+      // The last animation tick didn't result in any changes to the UI.
+      // It is safe to assume any event animation that was in progress has
+      // completed.
+
+      // Step 1: gather all animations driven by events.
+      std::set<int> finishedAnimationValueNodes;
+      for (auto& [key, drivers] : eventDrivers_) {
+        for (auto& driver : drivers) {
+          finishedAnimationValueNodes.insert(driver->getAnimatedNodeTag());
+          if (auto node = getAnimatedNode<ValueAnimatedNode>(
+                  driver->getAnimatedNodeTag())) {
+            updatedNodeTags_.insert(node->tag());
+          }
+        }
+      }
+
+      // Step 2: update all nodes that are connected to the finished animations.
+      updateNodes(finishedAnimationValueNodes);
+
+      isEventAnimationInProgress_ = false;
+
+      for (auto& [tag, props] : updateViewPropsDirect_) {
+        // TODO: handle layout props
+        propsBuilder.storeDynamic(props);
+        mutations.push_back(
+            AnimationMutation{tag, nullptr, propsBuilder.get()});
+      }
+    }
+  } else {
+    // There is no active animation. Stop the render callback.
+    stopRenderCallbackIfNeeded(false);
+  }
+  return mutations;
+}
+#endif
+
 void NativeAnimatedNodesManager::onRender() {
+  if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
+    return;
+  }
   TraceSection s(
       "NativeAnimatedNodesManager::onRender",
       "numActiveAnimations",
       activeAnimations_.size());
 
+  if (frameRateListenerCallback_) {
+    frameRateListenerCallback_(true);
+  }
+
   isOnRenderThread_ = true;
 
+  {
+    // Flush async created animated nodes
+    std::unordered_map<Tag, std::unique_ptr<AnimatedNode>>
+        animatedNodesCreatedAsync;
+    {
+      std::lock_guard<std::mutex> lock(animatedNodesCreatedAsyncMutex_);
+      std::swap(animatedNodesCreatedAsync, animatedNodesCreatedAsync_);
+    }
+
+    if (!animatedNodesCreatedAsync.empty()) {
+      std::lock_guard<std::mutex> lock(connectedAnimatedNodesMutex_);
+      for (auto& [tag, node] : animatedNodesCreatedAsync) {
+        animatedNodes_.insert({tag, std::move(node)});
+        updatedNodeTags_.insert(tag);
+      }
+    }
+  }
+
   // Run operations scheduled from AnimatedModule
   std::vector<UiTask> operations;
   {
@@ -887,7 +1107,7 @@ void NativeAnimatedNodesManager::onRender() {
     }
   } else {
     // There is no active animation. Stop the render callback.
-    stopRenderCallbackIfNeeded();
+    stopRenderCallbackIfNeeded(false);
   }
 }
 

package/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.h

@@ -7,13 +7,21 @@
 
 #pragma once
 
+#if __has_include("FBReactNativeSpecJSI.h") // CocoaPod headers on Apple
+#include "FBReactNativeSpecJSI.h"
+#else
 #include <FBReactNativeSpec/FBReactNativeSpecJSI.h>
+#endif
 #include <folly/dynamic.h>
 #include <react/bridging/Function.h>
 #include <react/debug/flags.h>
 #include <react/renderer/animated/EventEmitterListener.h>
 #include <react/renderer/animated/event_drivers/EventAnimationDriver.h>
+#ifdef RN_USE_ANIMATION_BACKEND
+#include <react/renderer/animationbackend/AnimationBackend.h>
+#endif
 #include <react/renderer/core/ReactPrimitives.h>
+#include <react/renderer/uimanager/UIManagerAnimationBackend.h>
 #include <chrono>
 #include <memory>
 #include <mutex>
@@ -36,42 +44,38 @@ class Scheduler;
 using ValueListenerCallback = std::function<void(double)>;
 using UiTask = std::function<void()>;
 
-using EndResult = NativeAnimatedTurboModuleEndResult<
-    bool,
-    std::optional<double>,
-    std::optional<double>>;
+using EndResult = NativeAnimatedTurboModuleEndResult<bool, std::optional<double>, std::optional<double>>;
 
 using AnimationEndCallback = AsyncCallback<EndResult>;
 
 template <>
-struct Bridging<EndResult>
-    : NativeAnimatedTurboModuleEndResultBridging<EndResult> {};
+struct Bridging<EndResult> : NativeAnimatedTurboModuleEndResultBridging<EndResult> {};
 
 class NativeAnimatedNodesManager {
  public:
-  using DirectManipulationCallback =
-      std::function<void(Tag, const folly::dynamic&)>;
-  using FabricCommitCallback =
-      std::function<void(std::unordered_map<Tag, folly::dynamic>&)>;
-  using StartOnRenderCallback = std::function<void(std::function<void()>&&)>;
-  using StopOnRenderCallback = std::function<void()>;
+  using DirectManipulationCallback = std::function<void(Tag, const folly::dynamic &)>;
+  using FabricCommitCallback = std::function<void(std::unordered_map<Tag, folly::dynamic> &)>;
+  using StartOnRenderCallback = std::function<void(std::function<void()> &&, bool isAsync)>;
+  using StopOnRenderCallback = std::function<void(bool isAsync)>;
+  using FrameRateListenerCallback = std::function<void(bool /* shouldEnableListener */)>;
 
   explicit NativeAnimatedNodesManager(
-      DirectManipulationCallback&& directManipulationCallback,
-      FabricCommitCallback&& fabricCommitCallback,
-      StartOnRenderCallback&& startOnRenderCallback = nullptr,
-      StopOnRenderCallback&& stopOnRenderCallback = nullptr) noexcept;
+      DirectManipulationCallback &&directManipulationCallback,
+      FabricCommitCallback &&fabricCommitCallback,
+      StartOnRenderCallback &&startOnRenderCallback = nullptr,
+      StopOnRenderCallback &&stopOnRenderCallback = nullptr,
+      FrameRateListenerCallback &&frameRateListenerCallback = nullptr) noexcept;
+
+  explicit NativeAnimatedNodesManager(std::shared_ptr<UIManagerAnimationBackend> animationBackend) noexcept;
 
   ~NativeAnimatedNodesManager() noexcept;
 
-  template <
-      typename T,
-      typename = std::enable_if_t<std::is_base_of_v<AnimatedNode, T>>>
-  T* getAnimatedNode(Tag tag) const
+  template <typename T, typename = std::enable_if_t<std::is_base_of_v<AnimatedNode, T>>>
+  T *getAnimatedNode(Tag tag) const
     requires(std::is_base_of_v<AnimatedNode, T>)
   {
     if (auto it = animatedNodes_.find(tag); it != animatedNodes_.end()) {
-      return static_cast<T*>(it->second.get());
+      return static_cast<T *>(it->second.get());
     }
     return nullptr;
   }
@@ -80,7 +84,10 @@ class NativeAnimatedNodesManager {
 
 #pragma mark - Graph
 
-  void createAnimatedNode(Tag tag, const folly::dynamic& config) noexcept;
+  // Called from JS thread
+  void createAnimatedNodeAsync(Tag tag, const folly::dynamic &config) noexcept;
+
+  void createAnimatedNode(Tag tag, const folly::dynamic &config) noexcept;
 
   void connectAnimatedNodes(Tag parentTag, Tag childTag) noexcept;
 
@@ -102,6 +109,10 @@ class NativeAnimatedNodesManager {
 
   void setAnimatedNodeOffset(Tag tag, double offset);
 
+#ifdef RN_USE_ANIMATION_BACKEND
+  AnimationMutations pullAnimationMutations();
+#endif
+
 #pragma mark - Drivers
 
   void startAnimatingNode(
@@ -110,35 +121,26 @@ class NativeAnimatedNodesManager {
       folly::dynamic config,
       std::optional<AnimationEndCallback> endCallback) noexcept;
 
-  void stopAnimation(
-      int animationId,
-      bool isTrackingAnimation = false) noexcept;
+  void stopAnimation(int animationId, bool isTrackingAnimation = false) noexcept;
 
-  void addAnimatedEventToView(
-      Tag viewTag,
-      const std::string& eventName,
-      const folly::dynamic& eventMapping) noexcept;
+  void addAnimatedEventToView(Tag viewTag, const std::string &eventName, const folly::dynamic &eventMapping) noexcept;
 
-  void removeAnimatedEventFromView(
-      Tag viewTag,
-      const std::string& eventName,
-      Tag animatedValueTag) noexcept;
+  void removeAnimatedEventFromView(Tag viewTag, const std::string &eventName, Tag animatedValueTag) noexcept;
 
-  std::shared_ptr<EventEmitterListener> getEventEmitterListener() noexcept {
+  std::shared_ptr<EventEmitterListener> getEventEmitterListener() noexcept
+  {
     return ensureEventEmitterListener();
   }
 
 #pragma mark - Listeners
 
-  void startListeningToAnimatedNodeValue(
-      Tag tag,
-      ValueListenerCallback&& callback) noexcept;
+  void startListeningToAnimatedNodeValue(Tag tag, ValueListenerCallback &&callback) noexcept;
 
   void stopListeningToAnimatedNodeValue(Tag tag) noexcept;
 
   void schedulePropsCommit(
       Tag viewTag,
-      const folly::dynamic& props,
+      const folly::dynamic &props,
       bool layoutStyleUpdated,
       bool forceFabricCommit) noexcept;
 
@@ -156,7 +158,8 @@ class NativeAnimatedNodesManager {
    */
   bool commitProps();
 
-  void scheduleOnUI(UiTask&& task) {
+  void scheduleOnUI(UiTask &&task)
+  {
     {
       std::lock_guard<std::mutex> lock(uiTasksMutex_);
       operations_.push_back(std::move(task));
@@ -165,15 +168,14 @@ class NativeAnimatedNodesManager {
     // Whenever a batch is flushed to the UI thread, start the onRender
     // callbacks to guarantee they run at least once. E.g., to execute
     // setValue calls.
-    startRenderCallbackIfNeeded();
+    startRenderCallbackIfNeeded(true);
   }
 
   void onRender();
 
-  void startRenderCallbackIfNeeded();
+  void startRenderCallbackIfNeeded(bool isAsync);
 
-  void updateNodes(
-      const std::set<int>& finishedAnimationValueNodes = {}) noexcept;
+  void updateNodes(const std::set<int> &finishedAnimationValueNodes = {}) noexcept;
 
   folly::dynamic managedProps(Tag tag) const noexcept;
 
@@ -184,7 +186,7 @@ class NativeAnimatedNodesManager {
   bool isOnRenderThread() const noexcept;
 
  private:
-  void stopRenderCallbackIfNeeded() noexcept;
+  void stopRenderCallbackIfNeeded(bool isAsync) noexcept;
 
   bool onAnimationFrame(double timestamp);
 
@@ -194,15 +196,16 @@ class NativeAnimatedNodesManager {
 
   std::shared_ptr<EventEmitterListener> ensureEventEmitterListener() noexcept;
 
-  void handleAnimatedEvent(
-      Tag tag,
-      const std::string& eventName,
-      const EventPayload& payload) noexcept;
+  void handleAnimatedEvent(Tag tag, const std::string &eventName, const EventPayload &payload) noexcept;
+
+  std::weak_ptr<UIManagerAnimationBackend> animationBackend_;
+
+  std::unique_ptr<AnimatedNode> animatedNode(Tag tag, const folly::dynamic &config) noexcept;
 
-  std::unique_ptr<AnimatedNode> animatedNode(
-      Tag tag,
-      const folly::dynamic& config) noexcept;
+  static thread_local bool isOnRenderThread_;
 
+  std::mutex animatedNodesCreatedAsyncMutex_;
+  std::unordered_map<Tag, std::unique_ptr<AnimatedNode>> animatedNodesCreatedAsync_;
   std::unordered_map<Tag, std::unique_ptr<AnimatedNode>> animatedNodes_;
   std::unordered_map<Tag, Tag> connectedAnimatedNodes_;
   std::unordered_map<int, std::unique_ptr<AnimationDriver>> activeAnimations_;
@@ -236,6 +239,7 @@ class NativeAnimatedNodesManager {
   std::atomic_bool isRenderCallbackStarted_{false};
   const StartOnRenderCallback startOnRenderCallback_;
   const StopOnRenderCallback stopOnRenderCallback_;
+  const FrameRateListenerCallback frameRateListenerCallback_;
 
   std::shared_ptr<EventEmitterListener> eventEmitterListener_{nullptr};