Sync on js thread after animation finished (#54877)

Summary:

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.

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

@@ -909,6 +909,9 @@ void NativeAnimatedNodesManager::schedulePropsCommit(
     bool layoutStyleUpdated,
     bool forceFabricCommit) noexcept {
   if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
+    if (forceFabricCommit) {
+      shouldRequestAsyncFlush_ = true;
+    }
     if (layoutStyleUpdated) {
       mergeObjects(updateViewProps_[viewTag], props);
     } else {
@@ -962,7 +965,7 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
     task();
   }
 
-  AnimationMutations mutations;
+  AnimationMutations mutations{};
 
   // Step through the animation loop
   if (isAnimationUpdateNeeded()) {
@@ -1105,6 +1108,8 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
     // There is no active animation. Stop the render callback.
     stopRenderCallbackIfNeeded(false);
   }
+  mutations.shouldRequestAsyncFlush = shouldRequestAsyncFlush_;
+  shouldRequestAsyncFlush_ = false;
   return mutations;
 }
 #endif

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

@@ -260,6 +260,7 @@ class NativeAnimatedNodesManager {
 
   std::unordered_map<Tag, folly::dynamic> updateViewProps_{};
   std::unordered_map<Tag, folly::dynamic> updateViewPropsDirect_{};
+  bool shouldRequestAsyncFlush_{false};
 
   mutable std::mutex tagToShadowNodeFamilyMutex_;
   std::unordered_map<Tag, std::weak_ptr<const ShadowNodeFamily>> tagToShadowNodeFamily_{};

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;
+  bool shouldRequestAsyncFlush = false;
 
   for (auto& callback : callbacks) {
-    auto muatations = callback(static_cast<float>(timestamp));
-    for (auto& mutation : muatations.batch) {
+    auto mutations = callback(static_cast<float>(timestamp));
+    shouldRequestAsyncFlush |= mutations.shouldRequestAsyncFlush;
+    for (auto& mutation : mutations.batch) {
       const auto family = mutation.family;
       react_native_assert(family != nullptr);
 
@@ -90,6 +94,22 @@ void AnimationBackend::onAnimationFrame(double timestamp) {
       synchronouslyUpdateProps(surfaceUpdates.propsMap);
     }
   }
+
+  if (shouldRequestAsyncFlush) {
+    // for (const auto& [surfaceId, _] : surfaceUpdates) {
+    jsInvoker_->invokeAsync([this]() {
+      uiManager_->getShadowTreeRegistry().enumerate(
+          [](const ShadowTree& shadowTree, bool& stop) {
+            shadowTree.commit(
+                [](const RootShadowNode& oldRootShadowNode) {
+                  return std::static_pointer_cast<RootShadowNode>(
+                      oldRootShadowNode.ShadowNode::clone({}));
+                },
+                {.source = ShadowTreeCommitSource::React});
+          });
+    });
+    // }
+  }
 }
 
 void AnimationBackend::start(const Callback& callback, bool isAsync) {

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

@@ -7,11 +7,13 @@
 
 #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 <vector>
 #include "AnimatedProps.h"
 #include "AnimatedPropsBuilder.h"
@@ -41,6 +43,7 @@ struct AnimationMutation {
 
 struct AnimationMutations {
   std::vector<AnimationMutation> batch;
+  bool shouldRequestAsyncFlush{false};
 };
 
 class AnimationBackend : public UIManagerAnimationBackend {
@@ -58,14 +61,16 @@ 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 clearRegistry(SurfaceId surfaceId) override;