Sync on js thread after animation finished (#54877)

Summary:
Pull Request resolved: #54877

This diff adds synchronizing props to react, through a scheduled commit on the js thread. This is used by animated at the end of the animation, and leverages RSNRU to actually push the update to reactjs.

Reviewed By: zeyap

Differential Revision: D89042949

Author: Bartlomiej Bloniarz

packages/react-native/Libraries/Animated/__tests__/AnimatedBackend-itest.js

@@ -70,16 +70,6 @@ test('animated opacity', () => {
     _opacityAnimation?.stop();
   });
 
-  // TODO: T246961305 rendered output should be <rn-view opacity="0" /> at this point
-  expect(root.getRenderedOutput({props: ['opacity']}).toJSX()).toEqual(
-    <rn-view />,
-  );
-
-  // Re-render
-  Fantom.runTask(() => {
-    root.render(<MyApp />);
-  });
-
   expect(root.getRenderedOutput({props: ['opacity']}).toJSX()).toEqual(
     <rn-view opacity="0" />,
   );

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

@@ -905,6 +905,9 @@ void NativeAnimatedNodesManager::schedulePropsCommit(
     bool forceFabricCommit,
     ShadowNodeFamily::Weak shadowNodeFamily) noexcept {
   if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
+    if (forceFabricCommit) {
+      shouldRequestAsyncFlush_.insert(viewTag);
+    }
     auto& current = layoutStyleUpdated
         ? updateViewPropsForBackend_[viewTag]
         : updateViewPropsDirectForBackend_[viewTag];
@@ -936,6 +939,32 @@ void NativeAnimatedNodesManager::schedulePropsCommit(
 }
 
 #ifdef RN_USE_ANIMATION_BACKEND
+
+void NativeAnimatedNodesManager::insertMutations(
+    std::unordered_map<Tag, std::pair<ShadowNodeFamily::Weak, folly::dynamic>>&
+        updates,
+    AnimationMutations& mutations,
+    AnimatedPropsBuilder& propsBuilder,
+    bool hasLayoutUpdates) {
+  for (auto& [tag, update] : updates) {
+    auto weakFamily = update.first;
+
+    if (auto family = weakFamily.lock()) {
+      propsBuilder.storeDynamic(update.second);
+      if (shouldRequestAsyncFlush_.contains(tag)) {
+        mutations.asyncFlushSurfaces.insert(family->getSurfaceId());
+      }
+      mutations.batch.push_back(
+          AnimationMutation{
+              .tag = tag,
+              .family = family,
+              .props = propsBuilder.get(),
+              .hasLayoutUpdates = hasLayoutUpdates,
+          });
+    }
+  }
+}
+
 AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
   if (!ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
     return {};
@@ -958,7 +987,7 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
     task();
   }
 
-  AnimationMutations mutations;
+  AnimationMutations mutations{};
 
   // Step through the animation loop
   if (isAnimationUpdateNeeded()) {
@@ -1003,35 +1032,14 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
         }
       }
 
-      for (auto& [tag, update] : updateViewPropsDirectForBackend_) {
-        auto weakFamily = update.first;
-
-        if (auto family = weakFamily.lock()) {
-          propsBuilder.storeDynamic(update.second);
-          mutations.batch.push_back(
-              AnimationMutation{
-                  .tag = tag,
-                  .family = family,
-                  .props = propsBuilder.get(),
-              });
-        }
-        containsChange = true;
-      }
-      for (auto& [tag, update] : updateViewPropsForBackend_) {
-        auto weakFamily = update.first;
-
-        if (auto family = weakFamily.lock()) {
-          propsBuilder.storeDynamic(update.second);
-          mutations.batch.push_back(
-              AnimationMutation{
-                  .tag = tag,
-                  .family = family,
-                  .props = propsBuilder.get(),
-                  .hasLayoutUpdates = true,
-              });
-        }
-        containsChange = true;
-      }
+      insertMutations(
+          updateViewPropsDirectForBackend_, mutations, propsBuilder);
+
+      insertMutations(
+          updateViewPropsForBackend_, mutations, propsBuilder, true);
+
+      containsChange = !updateViewPropsForBackend_.empty() ||
+          !updateViewPropsDirectForBackend_.empty();
 
       if (containsChange) {
         updateViewPropsDirectForBackend_.clear();
@@ -1062,33 +1070,11 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
 
       isEventAnimationInProgress_ = false;
 
-      for (auto& [tag, update] : updateViewPropsDirectForBackend_) {
-        auto weakFamily = update.first;
-
-        if (auto family = weakFamily.lock()) {
-          propsBuilder.storeDynamic(update.second);
-          mutations.batch.push_back(
-              AnimationMutation{
-                  .tag = tag,
-                  .family = family,
-                  .props = propsBuilder.get(),
-              });
-        }
-      }
-      for (auto& [tag, update] : updateViewPropsForBackend_) {
-        auto weakFamily = update.first;
-
-        if (auto family = weakFamily.lock()) {
-          propsBuilder.storeDynamic(update.second);
-          mutations.batch.push_back(
-              AnimationMutation{
-                  .tag = tag,
-                  .family = family,
-                  .props = propsBuilder.get(),
-                  .hasLayoutUpdates = true,
-              });
-        }
-      }
+      insertMutations(
+          updateViewPropsDirectForBackend_, mutations, propsBuilder);
+
+      insertMutations(
+          updateViewPropsForBackend_, mutations, propsBuilder, true);
 
       updateViewPropsForBackend_.clear();
       updateViewPropsDirectForBackend_.clear();
@@ -1097,6 +1083,7 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
     // There is no active animation. Stop the render callback.
     stopRenderCallbackIfNeeded(false);
   }
+  shouldRequestAsyncFlush_.clear();
   return mutations;
 }
 #endif

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

@@ -121,6 +121,11 @@ class NativeAnimatedNodesManager {
   void setAnimatedNodeOffset(Tag tag, double offset);
 
 #ifdef RN_USE_ANIMATION_BACKEND
+  void insertMutations(
+      std::unordered_map<Tag, std::pair<ShadowNodeFamily::Weak, folly::dynamic>> &updates,
+      AnimationMutations &mutations,
+      AnimatedPropsBuilder &propsBuilder,
+      bool hasLayoutUpdates = false);
   AnimationMutations pullAnimationMutations();
 #endif
 
@@ -263,7 +268,7 @@ class NativeAnimatedNodesManager {
   std::unordered_map<Tag, folly::dynamic> updateViewPropsDirect_{};
   std::unordered_map<Tag, std::pair<ShadowNodeFamily::Weak, folly::dynamic>> updateViewPropsForBackend_{};
   std::unordered_map<Tag, std::pair<ShadowNodeFamily::Weak, folly::dynamic>> updateViewPropsDirectForBackend_{};
-
+  std::unordered_set<Tag> shouldRequestAsyncFlush_{};
   /*
    * Sometimes a view is not longer connected to a PropsAnimatedNode, but
    * NativeAnimated has previously changed the view's props via direct

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

@@ -95,7 +95,8 @@ NativeAnimatedNodesManagerProvider::getOrCreate(
           std::move(stopOnRenderCallback_),
           std::move(directManipulationCallback),
           std::move(fabricCommitCallback),
-          uiManager);
+          uiManager,
+          jsInvoker);
 
       nativeAnimatedNodesManager_ =
           std::make_shared<NativeAnimatedNodesManager>(animationBackend_);

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.cpp

@@ -55,21 +55,25 @@ AnimationBackend::AnimationBackend(
     StopOnRenderCallback&& stopOnRenderCallback,
     DirectManipulationCallback&& directManipulationCallback,
     FabricCommitCallback&& fabricCommitCallback,
-    UIManager* uiManager)
+    UIManager* uiManager,
+    std::shared_ptr<CallInvoker> jsInvoker)
     : startOnRenderCallback_(std::move(startOnRenderCallback)),
       stopOnRenderCallback_(std::move(stopOnRenderCallback)),
       directManipulationCallback_(std::move(directManipulationCallback)),
       fabricCommitCallback_(std::move(fabricCommitCallback)),
       animatedPropsRegistry_(std::make_shared<AnimatedPropsRegistry>()),
       uiManager_(uiManager),
+      jsInvoker_(std::move(jsInvoker)),
       commitHook_(uiManager, animatedPropsRegistry_) {}
 
 void AnimationBackend::onAnimationFrame(double timestamp) {
   std::unordered_map<SurfaceId, SurfaceUpdates> surfaceUpdates;
+  std::set<SurfaceId> asyncFlushSurfaces;
 
   for (auto& callback : callbacks) {
-    auto muatations = callback(static_cast<float>(timestamp));
-    for (auto& mutation : muatations.batch) {
+    auto mutations = callback(static_cast<float>(timestamp));
+    asyncFlushSurfaces.merge(mutations.asyncFlushSurfaces);
+    for (auto& mutation : mutations.batch) {
       const auto family = mutation.family;
       react_native_assert(family != nullptr);
 
@@ -90,6 +94,8 @@ void AnimationBackend::onAnimationFrame(double timestamp) {
       synchronouslyUpdateProps(updates.propsMap);
     }
   }
+
+  requestAsyncFlushForSurfaces(asyncFlushSurfaces);
 }
 
 void AnimationBackend::start(const Callback& callback, bool isAsync) {
@@ -155,6 +161,25 @@ void AnimationBackend::synchronouslyUpdateProps(
   }
 }
 
+void AnimationBackend::requestAsyncFlushForSurfaces(
+    const std::set<SurfaceId>& surfaces) {
+  for (const auto& surfaceId : surfaces) {
+    // perform an empty commit on the js thread, to force the commit hook to
+    // push updated shadow nodes to react through RSNRU
+    jsInvoker_->invokeAsync([this, surfaceId]() {
+      uiManager_->getShadowTreeRegistry().visit(
+          surfaceId, [](const ShadowTree& shadowTree) {
+            shadowTree.commit(
+                [](const RootShadowNode& oldRootShadowNode) {
+                  return std::static_pointer_cast<RootShadowNode>(
+                      oldRootShadowNode.ShadowNode::clone({}));
+                },
+                {.source = ShadowTreeCommitSource::AnimationEndSync});
+          });
+    });
+  }
+}
+
 void AnimationBackend::clearRegistry(SurfaceId surfaceId) {
   animatedPropsRegistry_->clear(surfaceId);
 }

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.h

@@ -7,11 +7,14 @@
 
 #pragma once
 
+#include <ReactCommon/CallInvoker.h>
 #include <folly/dynamic.h>
 #include <react/renderer/core/ReactPrimitives.h>
 #include <react/renderer/uimanager/UIManager.h>
 #include <react/renderer/uimanager/UIManagerAnimationBackend.h>
 #include <functional>
+#include <memory>
+#include <set>
 #include <vector>
 #include "AnimatedProps.h"
 #include "AnimatedPropsBuilder.h"
@@ -41,6 +44,7 @@ struct AnimationMutation {
 
 struct AnimationMutations {
   std::vector<AnimationMutation> batch;
+  std::set<SurfaceId> asyncFlushSurfaces;
 };
 
 class AnimationBackend : public UIManagerAnimationBackend {
@@ -58,16 +62,19 @@ class AnimationBackend : public UIManagerAnimationBackend {
   const FabricCommitCallback fabricCommitCallback_;
   std::shared_ptr<AnimatedPropsRegistry> animatedPropsRegistry_;
   UIManager *uiManager_;
+  std::shared_ptr<CallInvoker> jsInvoker_;
   AnimationBackendCommitHook commitHook_;
 
   AnimationBackend(
       StartOnRenderCallback &&startOnRenderCallback,
       StopOnRenderCallback &&stopOnRenderCallback,
       DirectManipulationCallback &&directManipulationCallback,
       FabricCommitCallback &&fabricCommitCallback,
-      UIManager *uiManager);
+      UIManager *uiManager,
+      std::shared_ptr<CallInvoker> jsInvoker);
   void commitUpdates(SurfaceId surfaceId, SurfaceUpdates &surfaceUpdates);
   void synchronouslyUpdateProps(const std::unordered_map<Tag, AnimatedProps> &updates);
+  void requestAsyncFlushForSurfaces(const std::set<SurfaceId> &surfaces);
   void clearRegistry(SurfaceId surfaceId) override;
 
   void onAnimationFrame(double timestamp) override;

packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackendCommitHook.cpp

@@ -21,7 +21,8 @@ RootShadowNode::Unshared AnimationBackendCommitHook::shadowTreeWillCommit(
     const RootShadowNode::Shared& oldRootShadowNode,
     const RootShadowNode::Unshared& newRootShadowNode,
     const ShadowTreeCommitOptions& commitOptions) noexcept {
-  if (commitOptions.source != ShadowTreeCommitSource::React) {
+  if (commitOptions.source != ShadowTreeCommitSource::React &&
+      commitOptions.source != ShadowTreeCommitSource::AnimationEndSync) {
     return newRootShadowNode;
   }
 

packages/react-native/ReactCommon/react/renderer/mounting/ShadowTree.h

@@ -50,6 +50,7 @@ enum class ShadowTreeCommitMode {
 enum class ShadowTreeCommitSource {
   Unknown,
   React,
+  AnimationEndSync,
 };
 
 struct ShadowTreeCommitOptions {