ensure animatedNodes collection is only accessed on render thread

packages/react-native/ReactCommon/react/renderer/animated/AnimatedModule.cpp

@@ -51,7 +51,7 @@ void AnimatedModule::createAnimatedNode(
   if (auto it = configDynamic.find("disableBatchingForNativeCreate");
       it != configDynamic.items().end() && it->second == true) {
     if (nodesManager_) {
-      nodesManager_->createAnimatedNode(tag, configDynamic);
+      nodesManager_->createAnimatedNodeAsync(tag, configDynamic);
     }
   } else {
     operations_.emplace_back(

packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp

@@ -64,6 +64,8 @@ void mergeObjects(folly::dynamic& out, const folly::dynamic& objectToMerge) {
 
 } // namespace
 
+thread_local bool NativeAnimatedNodesManager::isOnRenderThread_{false};
+
 NativeAnimatedNodesManager::NativeAnimatedNodesManager(
     DirectManipulationCallback&& directManipulationCallback,
     FabricCommitCallback&& fabricCommitCallback,
@@ -155,9 +157,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_);
@@ -410,8 +431,6 @@ void NativeAnimatedNodesManager::removeAnimatedEventFromView(
   }
 }
 
-static thread_local bool isOnRenderThread_{false};
-
 void NativeAnimatedNodesManager::handleAnimatedEvent(
     Tag viewTag,
     const std::string& eventName,
@@ -849,6 +868,17 @@ void NativeAnimatedNodesManager::onRender() {
 
   isOnRenderThread_ = true;
 
+  {
+    // Flush async created animated nodes
+    std::lock_guard<std::mutex> lock(animatedNodesCreatedAsyncMutex_);
+    std::lock_guard<std::mutex> lockCreateAsync(connectedAnimatedNodesMutex_);
+    for (auto& [tag, node] : animatedNodesCreatedAsync_) {
+      animatedNodes_.insert({tag, std::move(node)});
+      updatedNodeTags_.insert(tag);
+    }
+    animatedNodesCreatedAsync_.clear();
+  }
+
   // Run operations scheduled from AnimatedModule
   std::vector<UiTask> operations;
   {

packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.h

@@ -80,6 +80,9 @@ class NativeAnimatedNodesManager {
 
 #pragma mark - Graph
 
+  // 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;
@@ -203,6 +206,11 @@ class NativeAnimatedNodesManager {
       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_;

packages/react-native/ReactCommon/react/renderer/animated/tests/AnimationTestsBase.h

@@ -35,6 +35,7 @@ class AnimationTestsBase : public testing::Test {
             lastCommittedProps = nodesProps.begin()->second;
           }
         });
+    NativeAnimatedNodesManager::isOnRenderThread_ = true;
   }
 
   bool nodeNeedsUpdate(Tag nodeTag) const {