pass down isAsync arg to start/stopOnRenderCallback to indicate thread (#54252)

Summary:
Pull Request resolved: #54252

## Changelog:

[Internal] [Added] - pass down isAsync arg to start/stopOnRenderCallback to indicate thread

make it more explicit where start/stopOnRenderCallback is invoked so we can handle it on each platform in a more thread safe way

Reviewed By: lenaic

Differential Revision: D85365058

fbshipit-source-id: 5f0ee1343547fe3466fcd23282e0f27e129a2e7d

Author: zeyap

packages/react-native/ReactApple/RCTAnimatedModuleProvider/RCTAnimatedModuleProvider.mm

@@ -40,30 +40,49 @@ - (void)_onDisplayLinkTick
     if (name == facebook::react::AnimatedModule::kModuleName) {
       __weak RCTAnimatedModuleProvider *weakSelf = self;
       auto provider = std::make_shared<facebook::react::NativeAnimatedNodesManagerProvider>(
-          [weakSelf](std::function<void()> &&onRender) {
-            RCTAnimatedModuleProvider *strongSelf = weakSelf;
-            if (strongSelf) {
-              strongSelf->_onRender = onRender;
-              if (strongSelf->_displayLink == nil) {
+          [weakSelf](std::function<void()> &&onRender, bool isAsync) {
+            const auto start_render = [weakSelf, onRender]() {
+              RCTAnimatedModuleProvider *strongSelf = weakSelf;
+              if (strongSelf) {
+                strongSelf->_onRender = onRender;
+                if (strongSelf->_displayLink == nil) {
 #if TARGET_OS_OSX
-                strongSelf->_displayLink = [RCTPlatformDisplayLink displayLinkWithTarget:strongSelf
-                                                                                selector:@selector(_onDisplayLinkTick)];
+                  strongSelf->_displayLink =
+                      [RCTPlatformDisplayLink displayLinkWithTarget:strongSelf selector:@selector(_onDisplayLinkTick)];
 #else
-                strongSelf->_displayLink = [CADisplayLink displayLinkWithTarget:strongSelf
-                                                                       selector:@selector(_onDisplayLinkTick)];
+                  strongSelf->_displayLink = [CADisplayLink displayLinkWithTarget:strongSelf
+                                                                         selector:@selector(_onDisplayLinkTick)];
 #endif
-                [strongSelf->_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
+                  [strongSelf->_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
+                }
               }
+            };
+            if (isAsync) {
+              dispatch_async(dispatch_get_main_queue(), ^{
+                start_render();
+              });
+            } else {
+              start_render();
             }
           },
-          [weakSelf]() {
-            RCTAnimatedModuleProvider *strongSelf = weakSelf;
-            if (strongSelf) {
-              if (strongSelf->_displayLink != nil) {
-                [strongSelf->_displayLink invalidate];
-                strongSelf->_displayLink = nil;
-                strongSelf->_onRender = nullptr;
+          [weakSelf](bool isAsync) {
+            const auto stop_render = [weakSelf]() {
+              RCTAnimatedModuleProvider *strongSelf = weakSelf;
+              if (strongSelf) {
+                if (strongSelf->_displayLink != nil) {
+                  [strongSelf->_displayLink invalidate];
+                  strongSelf->_displayLink = nil;
+                  strongSelf->_onRender = nullptr;
+                }
               }
+            };
+
+            if (isAsync) {
+              dispatch_async(dispatch_get_main_queue(), ^{
+                stop_render();
+              });
+            } else {
+              stop_render();
             }
           });
       return std::make_shared<facebook::react::AnimatedModule>(std::move(jsInvoker), std::move(provider));

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

@@ -100,7 +100,7 @@ NativeAnimatedNodesManager::NativeAnimatedNodesManager(
     : animationBackend_(animationBackend) {}
 
 NativeAnimatedNodesManager::~NativeAnimatedNodesManager() noexcept {
-  stopRenderCallbackIfNeeded();
+  stopRenderCallbackIfNeeded(true);
 }
 
 std::optional<double> NativeAnimatedNodesManager::getValue(Tag tag) noexcept {
@@ -491,7 +491,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
@@ -516,12 +516,14 @@ 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(); });
+          ->start(
+              [this](float /*f*/) { return pullAnimationMutations(); },
+              isAsync);
     }
 #endif
 
@@ -539,14 +541,15 @@ void NativeAnimatedNodesManager::startRenderCallbackIfNeeded() {
   }
 
   if (startOnRenderCallback_) {
-    startOnRenderCallback_();
+    startOnRenderCallback_(isAsync);
   }
 }
 
-void NativeAnimatedNodesManager::stopRenderCallbackIfNeeded() noexcept {
+void NativeAnimatedNodesManager::stopRenderCallbackIfNeeded(
+    bool isAsync) noexcept {
   if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {
     if (auto animationBackend = animationBackend_.lock()) {
-      animationBackend->stop();
+      animationBackend->stop(isAsync);
     }
     return;
   }
@@ -558,7 +561,7 @@ void NativeAnimatedNodesManager::stopRenderCallbackIfNeeded() noexcept {
 
   if (isRenderCallbackStarted) {
     if (stopOnRenderCallback_) {
-      stopOnRenderCallback_();
+      stopOnRenderCallback_(isAsync);
     }
   }
 }
@@ -1008,7 +1011,7 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {
     }
   } else {
     // There is no active animation. Stop the render callback.
-    stopRenderCallbackIfNeeded();
+    stopRenderCallbackIfNeeded(false);
   }
   return mutations;
 }
@@ -1083,7 +1086,7 @@ void NativeAnimatedNodesManager::onRender() {
     }
   } else {
     // There is no active animation. Stop the render callback.
-    stopRenderCallbackIfNeeded();
+    stopRenderCallbackIfNeeded(false);
   }
 }
 

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

@@ -61,8 +61,8 @@ class NativeAnimatedNodesManager {
       std::function<void(Tag, const folly::dynamic&)>;
   using FabricCommitCallback =
       std::function<void(std::unordered_map<Tag, folly::dynamic>&)>;
-  using StartOnRenderCallback = std::function<void()>;
-  using StopOnRenderCallback = std::function<void()>;
+  using StartOnRenderCallback = std::function<void(bool isAsync)>;
+  using StopOnRenderCallback = std::function<void(bool isAsync)>;
 
   explicit NativeAnimatedNodesManager(
       DirectManipulationCallback&& directManipulationCallback,
@@ -183,12 +183,12 @@ 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;
@@ -202,7 +202,7 @@ class NativeAnimatedNodesManager {
   bool isOnRenderThread() const noexcept;
 
  private:
-  void stopRenderCallbackIfNeeded() noexcept;
+  void stopRenderCallbackIfNeeded(bool isAsync) noexcept;
 
   bool onAnimationFrame(double timestamp);
 

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

@@ -42,9 +42,9 @@ NativeAnimatedNodesManagerProvider::NativeAnimatedNodesManagerProvider(
       frameRateListenerCallback_(std::move(frameRateListenerCallback)),
       startOnRenderCallback_(std::move(startOnRenderCallback)) {
   if (frameRateListenerCallback_) {
-    stopOnRenderCallback_ = [this, stopOnRenderCallback]() {
+    stopOnRenderCallback_ = [this, stopOnRenderCallback](bool isAsync) {
       if (stopOnRenderCallback) {
-        stopOnRenderCallback();
+        stopOnRenderCallback(isAsync);
       }
       if (frameRateListenerCallback_) {
         frameRateListenerCallback_(false);
@@ -106,17 +106,19 @@ NativeAnimatedNodesManagerProvider::getOrCreate(
 
       uiManager->unstable_setAnimationBackend(animationBackend_);
     } else {
-      auto startOnRenderCallback = [this,
-                                    startOnRenderCallbackFn =
-                                        std::move(startOnRenderCallback_)]() {
-        if (startOnRenderCallbackFn) {
-          startOnRenderCallbackFn([this]() {
-            if (nativeAnimatedDelegate_) {
-              nativeAnimatedDelegate_->runAnimationFrame();
+      auto startOnRenderCallback =
+          [this, startOnRenderCallbackFn = std::move(startOnRenderCallback_)](
+              bool isAsync) {
+            if (startOnRenderCallbackFn) {
+              startOnRenderCallbackFn(
+                  [this]() {
+                    if (nativeAnimatedDelegate_) {
+                      nativeAnimatedDelegate_->runAnimationFrame();
+                    }
+                  },
+                  isAsync);
             }
-          });
-        }
-      };
+          };
       nativeAnimatedNodesManager_ =
           std::make_shared<NativeAnimatedNodesManager>(
               std::move(directManipulationCallback),

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

@@ -19,7 +19,10 @@ class NativeAnimatedNodesManagerProvider {
  public:
   using FrameRateListenerCallback =
       std::function<void(bool /* shouldEnableListener */)>;
-  using StartOnRenderCallback = std::function<void(std::function<void()>&&)>;
+  // when isAsync is true, it means StartOnRenderCallback is invoked from js
+  // thread, otherwise from main thread
+  using StartOnRenderCallback =
+      std::function<void(std::function<void()>&&, bool /* isAsync */)>;
   using StopOnRenderCallback = NativeAnimatedNodesManager::StopOnRenderCallback;
 
   NativeAnimatedNodesManagerProvider(
@@ -49,6 +52,7 @@ class NativeAnimatedNodesManagerProvider {
       animatedMountingOverrideDelegate_;
 
   FrameRateListenerCallback frameRateListenerCallback_;
+
   StartOnRenderCallback startOnRenderCallback_;
   StopOnRenderCallback stopOnRenderCallback_;
 

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

@@ -105,16 +105,18 @@ void AnimationBackend::onAnimationFrame(double timestamp) {
   }
 }
 
-void AnimationBackend::start(const Callback& callback) {
+void AnimationBackend::start(const Callback& callback, bool isAsync) {
   callbacks.push_back(callback);
   // TODO: startOnRenderCallback_ should provide the timestamp from the platform
-  startOnRenderCallback_([this]() {
-    onAnimationFrame(
-        std::chrono::steady_clock::now().time_since_epoch().count() / 1000);
-  });
+  startOnRenderCallback_(
+      [this]() {
+        onAnimationFrame(
+            std::chrono::steady_clock::now().time_since_epoch().count() / 1000);
+      },
+      isAsync);
 }
-void AnimationBackend::stop() {
-  stopOnRenderCallback_();
+void AnimationBackend::stop(bool isAsync) {
+  stopOnRenderCallback_(isAsync);
   callbacks.clear();
 }
 

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

@@ -29,8 +29,9 @@ using AnimationMutations = std::vector<AnimationMutation>;
 class AnimationBackend : public UIManagerAnimationBackend {
  public:
   using Callback = std::function<AnimationMutations(float)>;
-  using StartOnRenderCallback = std::function<void(std::function<void()>&&)>;
-  using StopOnRenderCallback = std::function<void()>;
+  using StartOnRenderCallback =
+      std::function<void(std::function<void()>&&, bool /* isAsync */)>;
+  using StopOnRenderCallback = std::function<void(bool /* isAsync */)>;
   using DirectManipulationCallback =
       std::function<void(Tag, const folly::dynamic&)>;
   using FabricCommitCallback =
@@ -56,7 +57,7 @@ class AnimationBackend : public UIManagerAnimationBackend {
       const std::unordered_map<Tag, AnimatedProps>& updates);
 
   void onAnimationFrame(double timestamp) override;
-  void start(const Callback& callback);
-  void stop() override;
+  void start(const Callback& callback, bool isAsync);
+  void stop(bool isAsync) override;
 };
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerAnimationBackend.h

@@ -18,7 +18,7 @@ class UIManagerAnimationBackend {
 
   virtual void onAnimationFrame(double timestamp) = 0;
   // TODO: T240293839 Move over start() function and mutation types
-  virtual void stop() = 0;
+  virtual void stop(bool isAsync) = 0;
 };
 
 } // namespace facebook::react

private/react-native-fantom/tester/src/TesterAppDelegate.cpp

@@ -110,10 +110,10 @@ TesterAppDelegate::TesterAppDelegate(
   g_setNativeAnimatedNowTimestampFunction(StubClock::now);
 
   auto provider = std::make_shared<NativeAnimatedNodesManagerProvider>(
-      [this](std::function<void()>&& onRender) {
+      [this](std::function<void()>&& onRender, bool /*isAsync*/) {
         onAnimationRender_ = std::move(onRender);
       },
-      [this]() { onAnimationRender_ = nullptr; });
+      [this](bool /*isAsync*/) { onAnimationRender_ = nullptr; });
 
   reactHost_ = std::make_unique<ReactHost>(
       reactInstanceConfig,