keep track of last direct manipulation props (#52842)

Summary:
Pull Request resolved: #52842

## Changelog:

[Internal] [Fixed] - keep track of last direct manipulation props

* so that at next time there's a ShadowTree commit (regardless of which thread), they're merged into the update mutation
* the props will stay until the view is disconnected from props node via Animated API or the view is removed/deleted. This should be expected behavior, because in RN we expect that once Animated changes a prop, subsequent react commits should not change the value.

Reviewed By: sammy-SC

Differential Revision: D78702843

fbshipit-source-id: b5e6e01a7a4f6caeea4cc1eeafaef9c3c7e51691

Author: zeyap

packages/react-native/ReactCxxPlatform/react/renderer/animated/AnimatedMountingOverrideDelegate.cpp

@@ -6,6 +6,7 @@
  */
 
 #include "AnimatedMountingOverrideDelegate.h"
+#include "NativeAnimatedNodesManager.h"
 
 #include <react/renderer/componentregistry/ComponentDescriptorRegistry.h>
 #include <react/renderer/components/view/ViewProps.h>
@@ -16,14 +17,17 @@
 namespace facebook::react {
 
 AnimatedMountingOverrideDelegate::AnimatedMountingOverrideDelegate(
-    std::function<folly::dynamic(Tag)> getAnimatedManagedProps,
+    NativeAnimatedNodesManager& animatedManager,
     const Scheduler& scheduler)
     : MountingOverrideDelegate(),
-      getAnimatedManagedProps_(std::move(getAnimatedManagedProps)),
+      animatedManager_(&animatedManager),
       scheduler_(&scheduler){};
 
 bool AnimatedMountingOverrideDelegate::shouldOverridePullTransaction() const {
-  return getAnimatedManagedProps_ != nullptr;
+  if (animatedManager_ != nullptr) {
+    return animatedManager_->hasManagedProps();
+  }
+  return false;
 }
 
 std::optional<MountingTransaction>
@@ -32,19 +36,16 @@ AnimatedMountingOverrideDelegate::pullTransaction(
     MountingTransaction::Number transactionNumber,
     const TransactionTelemetry& telemetry,
     ShadowViewMutationList mutations) const {
-  if (!getAnimatedManagedProps_) {
-    return MountingTransaction{
-        surfaceId, transactionNumber, std::move(mutations), telemetry};
-  }
-
   std::unordered_map<Tag, folly::dynamic> animatedManagedProps;
   for (const auto& mutation : mutations) {
     if (mutation.type == ShadowViewMutation::Update) {
       const auto tag = mutation.newChildShadowView.tag;
-      auto props = getAnimatedManagedProps_(tag);
+      auto props = animatedManager_->managedProps(tag);
       if (!props.isNull()) {
         animatedManagedProps.insert({tag, std::move(props)});
       }
+    } else if (mutation.type == ShadowViewMutation::Delete) {
+      animatedManager_->onManagedPropsRemoved(mutation.oldChildShadowView.tag);
     }
   }
 

packages/react-native/ReactCxxPlatform/react/renderer/animated/AnimatedMountingOverrideDelegate.h

@@ -17,11 +17,12 @@
 namespace facebook::react {
 
 class Scheduler;
+class NativeAnimatedNodesManager;
 
 class AnimatedMountingOverrideDelegate : public MountingOverrideDelegate {
  public:
   AnimatedMountingOverrideDelegate(
-      std::function<folly::dynamic(Tag)> getAnimatedManagedProps,
+      NativeAnimatedNodesManager& animatedManager,
       const Scheduler& scheduler);
 
   bool shouldOverridePullTransaction() const override;
@@ -33,7 +34,7 @@ class AnimatedMountingOverrideDelegate : public MountingOverrideDelegate {
       ShadowViewMutationList mutations) const override;
 
  private:
-  std::function<folly::dynamic(Tag)> getAnimatedManagedProps_;
+  mutable NativeAnimatedNodesManager* animatedManager_;
 
   const Scheduler* scheduler_;
 };

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

@@ -201,6 +201,8 @@ void NativeAnimatedNodesManager::disconnectAnimatedNodeFromView(
       connectedAnimatedNodes_.erase(viewTag);
     }
     updatedNodeTags_.insert(node->tag());
+
+    onManagedPropsRemoved(viewTag);
   } else {
     LOG(WARNING)
         << "Cannot DisconnectAnimatedNodeToView, animated node has to be props type";
@@ -711,18 +713,50 @@ bool NativeAnimatedNodesManager::onAnimationFrame(double timestamp) {
   return commitProps();
 }
 
-folly::dynamic NativeAnimatedNodesManager::managedProps(Tag tag) noexcept {
+folly::dynamic NativeAnimatedNodesManager::managedProps(
+    Tag tag) const noexcept {
   std::lock_guard<std::mutex> lock(connectedAnimatedNodesMutex_);
-  const auto iter = connectedAnimatedNodes_.find(tag);
-  if (iter != connectedAnimatedNodes_.end()) {
+  if (const auto iter = connectedAnimatedNodes_.find(tag);
+      iter != connectedAnimatedNodes_.end()) {
     if (const auto node = getAnimatedNode<PropsAnimatedNode>(iter->second)) {
       return node->props();
     }
+  } else {
+    std::lock_guard<std::mutex> lockUnsyncedDirectViewProps(
+        unsyncedDirectViewPropsMutex_);
+    if (auto it = unsyncedDirectViewProps_.find(tag);
+        it != unsyncedDirectViewProps_.end()) {
+      return it->second;
+    }
   }
 
   return nullptr;
 }
 
+bool NativeAnimatedNodesManager::hasManagedProps() const noexcept {
+  {
+    std::lock_guard<std::mutex> lock(connectedAnimatedNodesMutex_);
+    if (!connectedAnimatedNodes_.empty()) {
+      return true;
+    }
+  }
+  {
+    std::lock_guard<std::mutex> lock(unsyncedDirectViewPropsMutex_);
+    if (!unsyncedDirectViewProps_.empty()) {
+      return true;
+    }
+  }
+  return false;
+}
+
+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);
+  }
+}
+
 bool NativeAnimatedNodesManager::isOnRenderThread() const noexcept {
   return isOnRenderThread_;
 }
@@ -771,6 +805,10 @@ void NativeAnimatedNodesManager::schedulePropsCommit(
     mergeObjects(updateViewPropsDirect_[viewTag], props);
   } else if (directManipulationCallback_ != nullptr) {
     mergeObjects(updateViewPropsDirect_[viewTag], props);
+    {
+      std::lock_guard<std::mutex> lock(unsyncedDirectViewPropsMutex_);
+      mergeObjects(unsyncedDirectViewProps_[viewTag], props);
+    }
   }
 }
 

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

@@ -175,7 +175,11 @@ class NativeAnimatedNodesManager {
   void updateNodes(
       const std::set<int>& finishedAnimationValueNodes = {}) noexcept;
 
-  folly::dynamic managedProps(Tag tag) noexcept;
+  folly::dynamic managedProps(Tag tag) const noexcept;
+
+  bool hasManagedProps() const noexcept;
+
+  void onManagedPropsRemoved(Tag tag) noexcept;
 
   bool isOnRenderThread() const noexcept;
 
@@ -209,7 +213,7 @@ class NativeAnimatedNodesManager {
       eventDrivers_;
   std::unordered_set<Tag> updatedNodeTags_;
 
-  std::mutex connectedAnimatedNodesMutex_;
+  mutable std::mutex connectedAnimatedNodesMutex_;
 
   std::mutex uiTasksMutex_;
   std::vector<UiTask> operations_;
@@ -238,6 +242,16 @@ class NativeAnimatedNodesManager {
   std::unordered_map<Tag, folly::dynamic> updateViewProps_{};
   std::unordered_map<Tag, folly::dynamic> updateViewPropsDirect_{};
 
+  /*
+   * Sometimes a view is not longer connected to a PropsAnimatedNode, but
+   * NativeAnimated has previously changed the view's props via direct
+   * manipulation, we use unsyncedDirectViewProps_ to keep track of those
+   * props, to make sure later Fabric commits will not override direct
+   * manipulation result on this view.
+   */
+  mutable std::mutex unsyncedDirectViewPropsMutex_;
+  std::unordered_map<Tag, folly::dynamic> unsyncedDirectViewProps_{};
+
   int animatedGraphBFSColor_ = 0;
 #ifdef REACT_NATIVE_DEBUG
   bool warnedAboutGraphTraversal_ = false;

packages/react-native/ReactCxxPlatform/react/renderer/animated/NativeAnimatedNodesManagerProvider.cpp

@@ -88,16 +88,7 @@ NativeAnimatedNodesManagerProvider::getOrCreate(jsi::Runtime& runtime) {
     auto* scheduler = (Scheduler*)uiManager->getDelegate();
     animatedMountingOverrideDelegate_ =
         std::make_shared<AnimatedMountingOverrideDelegate>(
-            [nativeAnimatedNodesManager =
-                 std::weak_ptr<NativeAnimatedNodesManager>(
-                     nativeAnimatedNodesManager_)](Tag tag) -> folly::dynamic {
-              if (auto nativeAnimatedNodesManagerStrong =
-                      nativeAnimatedNodesManager.lock()) {
-                return nativeAnimatedNodesManagerStrong->managedProps(tag);
-              }
-              return nullptr;
-            },
-            *scheduler);
+            *nativeAnimatedNodesManager_, *scheduler);
 
     // Register on existing surfaces
     uiManager->getShadowTreeRegistry().enumerate(