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

zeyap · meta-codesync[bot] · commit 43f464b218c9 · 2025-10-24T11:52:48.000-07:00
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
diff --git a/packages/react-native/ReactApple/RCTAnimatedModuleProvider/RCTAnimatedModuleProvider.mm b/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));
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.cpp b/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);
   }
 }
 
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManager.h b/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);
 
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManagerProvider.cpp b/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),
diff --git a/packages/react-native/ReactCommon/react/renderer/animated/NativeAnimatedNodesManagerProvider.h b/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_;
 
diff --git a/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.cpp b/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();
 }
 
diff --git a/packages/react-native/ReactCommon/react/renderer/animationbackend/AnimationBackend.h b/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
diff --git a/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerAnimationBackend.h b/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
diff --git a/private/react-native-fantom/tester/src/TesterAppDelegate.cpp b/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,

Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ NativeAnimatedNodesManager::NativeAnimatedNodesManager(`
`100`	`100`	`: animationBackend_(animationBackend) {}`
`101`	`101`
`102`	`102`	`NativeAnimatedNodesManager::~NativeAnimatedNodesManager() noexcept {`
`103`		`- stopRenderCallbackIfNeeded();`
	`103`	`+ stopRenderCallbackIfNeeded(true);`
`104`	`104`	`}`
`105`	`105`
`106`	`106`	`std::optional<double> NativeAnimatedNodesManager::getValue(Tag tag) noexcept {`
`@@ -491,7 +491,7 @@ void NativeAnimatedNodesManager::handleAnimatedEvent(`
`491`	`491`	`// when there are no active animations. Calling`
`492`	`492`	// `startRenderCallbackIfNeeded` will call platform specific code to
`493`	`493`	`// register UI tick listener.`
`494`		`- startRenderCallbackIfNeeded();`
	`494`	`+ startRenderCallbackIfNeeded(false);`
`495`	`495`	`// Calling startOnRenderCallback_ will register a UI tick listener.`
`496`	`496`	`// The UI ticker listener will not be called until the next frame.`
`497`	`497`	`// That's why, in case this is called from the UI thread, we need to`
`@@ -516,12 +516,14 @@ NativeAnimatedNodesManager::ensureEventEmitterListener() noexcept {`
`516`	`516`	`return eventEmitterListener_;`
`517`	`517`	`}`
`518`	`518`
`519`		`-void NativeAnimatedNodesManager::startRenderCallbackIfNeeded() {`
	`519`	`+void NativeAnimatedNodesManager::startRenderCallbackIfNeeded(bool isAsync) {`
`520`	`520`	`if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {`
`521`	`521`	`#ifdef RN_USE_ANIMATION_BACKEND`
`522`	`522`	`if (auto animationBackend = animationBackend_.lock()) {`
`523`	`523`	`std::static_pointer_cast<AnimationBackend>(animationBackend)`
`524`		`- ->start([this](float /f/) { return pullAnimationMutations(); });`
	`524`	`+ ->start(`
	`525`	`+ [this](float /f/) { return pullAnimationMutations(); },`
	`526`	`+ isAsync);`
`525`	`527`	`}`
`526`	`528`	`#endif`
`527`	`529`
`@@ -539,14 +541,15 @@ void NativeAnimatedNodesManager::startRenderCallbackIfNeeded() {`
`539`	`541`	`}`
`540`	`542`
`541`	`543`	`if (startOnRenderCallback_) {`
`542`		`- startOnRenderCallback_();`
	`544`	`+ startOnRenderCallback_(isAsync);`
`543`	`545`	`}`
`544`	`546`	`}`
`545`	`547`
`546`		`-void NativeAnimatedNodesManager::stopRenderCallbackIfNeeded() noexcept {`
	`548`	`+void NativeAnimatedNodesManager::stopRenderCallbackIfNeeded(`
	`549`	`+ bool isAsync) noexcept {`
`547`	`550`	`if (ReactNativeFeatureFlags::useSharedAnimatedBackend()) {`
`548`	`551`	`if (auto animationBackend = animationBackend_.lock()) {`
`549`		`- animationBackend->stop();`
	`552`	`+ animationBackend->stop(isAsync);`
`550`	`553`	`}`
`551`	`554`	`return;`
`552`	`555`	`}`
`@@ -558,7 +561,7 @@ void NativeAnimatedNodesManager::stopRenderCallbackIfNeeded() noexcept {`
`558`	`561`
`559`	`562`	`if (isRenderCallbackStarted) {`
`560`	`563`	`if (stopOnRenderCallback_) {`
`561`		`- stopOnRenderCallback_();`
	`564`	`+ stopOnRenderCallback_(isAsync);`
`562`	`565`	`}`
`563`	`566`	`}`
`564`	`567`	`}`
`@@ -1008,7 +1011,7 @@ AnimationMutations NativeAnimatedNodesManager::pullAnimationMutations() {`
`1008`	`1011`	`}`
`1009`	`1012`	`} else {`
`1010`	`1013`	`// There is no active animation. Stop the render callback.`
`1011`		`- stopRenderCallbackIfNeeded();`
	`1014`	`+ stopRenderCallbackIfNeeded(false);`
`1012`	`1015`	`}`
`1013`	`1016`	`return mutations;`
`1014`	`1017`	`}`
`@@ -1083,7 +1086,7 @@ void NativeAnimatedNodesManager::onRender() {`
`1083`	`1086`	`}`
`1084`	`1087`	`} else {`
`1085`	`1088`	`// There is no active animation. Stop the render callback.`
`1086`		`- stopRenderCallbackIfNeeded();`
	`1089`	`+ stopRenderCallbackIfNeeded(false);`
`1087`	`1090`	`}`
`1088`	`1091`	`}`
`1089`	`1092`
Original file line number	Diff line number	Diff line change
`@@ -105,16 +105,18 @@ void AnimationBackend::onAnimationFrame(double timestamp) {`
`105`	`105`	`}`
`106`	`106`	`}`
`107`	`107`
`108`		`-void AnimationBackend::start(const Callback& callback) {`
	`108`	`+void AnimationBackend::start(const Callback& callback, bool isAsync) {`
`109`	`109`	`callbacks.push_back(callback);`
`110`	`110`	`// TODO: startOnRenderCallback_ should provide the timestamp from the platform`
`111`		`- startOnRenderCallback_([this]() {`
`112`		`- onAnimationFrame(`
`113`		`- std::chrono::steady_clock::now().time_since_epoch().count() / 1000);`
`114`		`- });`
	`111`	`+ startOnRenderCallback_(`
	`112`	`+ [this]() {`
	`113`	`+ onAnimationFrame(`
	`114`	`+ std::chrono::steady_clock::now().time_since_epoch().count() / 1000);`
	`115`	`+ },`
	`116`	`+ isAsync);`
`115`	`117`	`}`
`116`		`-void AnimationBackend::stop() {`
`117`		`- stopOnRenderCallback_();`
	`118`	`+void AnimationBackend::stop(bool isAsync) {`
	`119`	`+ stopOnRenderCallback_(isAsync);`
`118`	`120`	`callbacks.clear();`
`119`	`121`	`}`
`120`	`122`