Allow waiting for user land Animated animations before firing transition complete callback (#56459)

Summary:
Pull Request resolved: #56459

## Changelog:

[Internal] [Added] - Allow waiting for user land Animated animations before firing transition complete callback

Instead of calling `onCompleteCallback` synchronously at the end of `startViewTransition`, defer it until all animations have finished. Since transition animation can be kicked off in user land from view transition event handlers, we need extra APIs to signal to native side when animation starts and finishes. This ensures the transition lifecycle properly waits for native animated transitions to complete.

- Add `waitForTransitionAnimation` / `transitionAnimationFinished` to the delegate interface and expose via `NativeViewTransition` TurboModule
- JS calls `waitForTransitionAnimation(animationId)` before starting each animation and `transitionAnimationFinished(animationId)` in the completion callback
- `ViewTransitionModule` tracks pending animation IDs in a `std::set` and fires `onCompleteCallback_` only when all animations are done
   - only track and wait for animations started during transition-ready callback
- if no animation requests to be waited for, resolve complete promise immediately when transition-ready callback finishes

Reviewed By: sammy-SC

Differential Revision: D99366980

fbshipit-source-id: 6313bdd2b3f7b90a5aee24e0faec905bce75d715

Author: zeyap

packages/react-native/ReactCommon/react/nativemodule/viewtransition/NativeViewTransition.cpp

@@ -67,4 +67,26 @@ jsi::Value NativeViewTransition::findPseudoElementShadowNodeByTag(
   return jsi::Value::null();
 }
 
+void NativeViewTransition::waitForTransitionAnimation(
+    jsi::Runtime& rt,
+    double animationId) {
+  auto& uiManager = UIManagerBinding::getBinding(rt)->getUIManager();
+  auto* viewTransitionDelegate = uiManager.getViewTransitionDelegate();
+  if (viewTransitionDelegate != nullptr) {
+    viewTransitionDelegate->waitForTransitionAnimation(
+        static_cast<int>(animationId));
+  }
+}
+
+void NativeViewTransition::transitionAnimationFinished(
+    jsi::Runtime& rt,
+    double animationId) {
+  auto& uiManager = UIManagerBinding::getBinding(rt)->getUIManager();
+  auto* viewTransitionDelegate = uiManager.getViewTransitionDelegate();
+  if (viewTransitionDelegate != nullptr) {
+    viewTransitionDelegate->transitionAnimationFinished(
+        static_cast<int>(animationId));
+  }
+}
+
 } // namespace facebook::react

packages/react-native/ReactCommon/react/nativemodule/viewtransition/NativeViewTransition.h

@@ -28,6 +28,10 @@ class NativeViewTransition : public NativeViewTransitionCxxSpec<NativeViewTransi
   getViewTransitionInstance(jsi::Runtime &rt, const std::string &name, const std::string &pseudo);
 
   jsi::Value findPseudoElementShadowNodeByTag(jsi::Runtime &rt, double reactTag);
+
+  void waitForTransitionAnimation(jsi::Runtime &rt, double animationId);
+
+  void transitionAnimationFinished(jsi::Runtime &rt, double animationId);
 };
 
 } // namespace facebook::react

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

@@ -73,6 +73,10 @@ class UIManagerViewTransitionDelegate {
   // Called by the reconciler to signal that the next view transition should
   // be suspended until the currently active one finishes.
   virtual void suspendOnActiveViewTransition() {}
+
+  virtual void waitForTransitionAnimation(int animationId) {}
+
+  virtual void transitionAnimationFinished(int animationId) {}
 };
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/viewtransition/ViewTransitionModule.cpp

@@ -345,6 +345,8 @@ void ViewTransitionModule::startViewTransition(
 
   // Mark transition as started
   transitionStarted_ = true;
+  pendingAnimationIds_.clear();
+  onCompleteCallback_ = onCompleteCallback;
 
   // Call mutation callback (including commitRoot, measureInstance,
   // applyViewTransitionName, createViewTransitionInstance for old & new)
@@ -353,21 +355,39 @@ void ViewTransitionModule::startViewTransition(
   }
 
   applySnapshotsOnPseudoElementShadowNodes();
+
   transitionReadyFinished_ = false;
+  // onReadyCallback starts the animations. Any animation registered via
+  // waitForTransitionAnimation during this callback is part of this transition.
   if (onReadyCallback) {
     onReadyCallback();
   }
+}
 
-  // Transition animation starts
+void ViewTransitionModule::waitForTransitionAnimation(int animationId) {
+  if (!transitionReadyFinished_) {
+    pendingAnimationIds_.insert(animationId);
+  }
+}
 
-  // Call onComplete callback when transition finishes
-  if (onCompleteCallback) {
-    onCompleteCallback();
+void ViewTransitionModule::transitionAnimationFinished(int animationId) {
+  pendingAnimationIds_.erase(animationId);
+  if (transitionReadyFinished_ && pendingAnimationIds_.empty() &&
+      onCompleteCallback_) {
+    auto callback = std::move(onCompleteCallback_);
+    onCompleteCallback_ = nullptr;
+    callback();
   }
 }
 
 void ViewTransitionModule::startViewTransitionReadyFinished() {
   transitionReadyFinished_ = true;
+
+  if (pendingAnimationIds_.empty() && onCompleteCallback_) {
+    auto callback = std::move(onCompleteCallback_);
+    onCompleteCallback_ = nullptr;
+    callback();
+  }
 }
 
 void ViewTransitionModule::suspendOnActiveViewTransition() {

packages/react-native/ReactCommon/react/renderer/viewtransition/ViewTransitionModule.h

@@ -83,6 +83,10 @@ class ViewTransitionModule : public UIManagerViewTransitionDelegate,
 
   void suspendOnActiveViewTransition() override;
 
+  void waitForTransitionAnimation(int animationId) override;
+
+  void transitionAnimationFinished(int animationId) override;
+
   // Animation state structure for storing minimal view data
   struct AnimationKeyFrameViewLayoutMetrics {
     Point originFromRoot;
@@ -142,6 +146,12 @@ class ViewTransitionModule : public UIManagerViewTransitionDelegate,
     std::function<void()> onCompleteCallback;
   };
   std::queue<PendingTransition> pendingTransitions_{};
+
+  // Tracks animation IDs that must complete before onCompleteCallback_ fires.
+  // Animations are registered via waitForTransitionAnimation (called from JS
+  // after connectAnimatedNodeToView) and removed via transitionAnimationFinished.
+  std::unordered_set<int> pendingAnimationIds_{};
+  std::function<void()> onCompleteCallback_{nullptr};
 };
 
 } // namespace facebook::react

packages/react-native/src/private/viewtransition/specs/NativeViewTransition.js

@@ -24,6 +24,8 @@ export interface Spec extends TurboModule {
     nativeTag: number,
   };
   +findPseudoElementShadowNodeByTag: (reactTag: number) => ?unknown /* Node */;
+  +waitForTransitionAnimation: (animationId: number) => void;
+  +transitionAnimationFinished: (animationId: number) => void;
 }
 
 export default TurboModuleRegistry.get<Spec>(