Add unstable_getViewTransitionInstance to UIManagerBinding (#55940)

Summary:
Pull Request resolved: #55940

Adds `unstable_getViewTransitionInstance` API to UIManagerBinding and FabricUIManager, allowing JavaScript to retrieve position and dimension information for view transition pseudo-elements.

This enables us to obtain pseudo element created on the runtime and manipulate them. React allows imperative animation commands like below:
```
<ViewTransition
   onEnter={(instance)=>{
       instance.new.animate(...);
    }}
>
  // ...
</ViewTransition>
```
on RN we could support something similar, e.g. letting user animate the new instance with Animated at VT event handlers, this could potentially guarantee smooth animation, since when onEnter is invoked, new shadow tree is committed but native view should not be mounted yet.

## Changelog:

[General] [Added] - Add unstable_getViewTransitionInstance to UIManagerBinding

Reviewed By: sammy-SC

Differential Revision: D94956110

fbshipit-source-id: 1d243b308033ce927b282e91a271d995fac226cc

Author: zeyap

packages/react-native/Libraries/ReactNative/FabricUIManager.js

@@ -97,6 +97,16 @@ export interface Spec {
   +unstable_ContinuousEventPriority: number;
   +unstable_IdleEventPriority: number;
   +unstable_getCurrentEventPriority: () => number;
+  +unstable_getViewTransitionInstance: (
+    name: string,
+    pseudo: string,
+  ) => ?{
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    nativeTag: number,
+  };
 }
 
 let nativeFabricUIManagerProxy: ?Spec;
@@ -129,6 +139,7 @@ const CACHED_PROPERTIES = [
   'unstable_ContinuousEventPriority',
   'unstable_IdleEventPriority',
   'unstable_getCurrentEventPriority',
+  'unstable_getViewTransitionInstance',
 ];
 
 // This is exposed as a getter because apps using the legacy renderer AND

packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerBinding.cpp

@@ -1152,6 +1152,43 @@ jsi::Value UIManagerBinding::get(
         });
   }
 
+  if (methodName == "unstable_getViewTransitionInstance") {
+    auto paramCount = 2;
+    return jsi::Function::createFromHostFunction(
+        runtime,
+        name,
+        paramCount,
+        [uiManager, methodName, paramCount](
+            jsi::Runtime& runtime,
+            const jsi::Value& /*thisValue*/,
+            const jsi::Value* arguments,
+            size_t count) -> jsi::Value {
+          validateArgumentCount(runtime, methodName, paramCount, count);
+
+          auto nameStr = arguments[0].asString(runtime).utf8(runtime);
+          auto pseudoStr = arguments[1].asString(runtime).utf8(runtime);
+
+          auto* viewTransitionDelegate = uiManager->getViewTransitionDelegate();
+          if (viewTransitionDelegate == nullptr) {
+            return jsi::Value::undefined();
+          }
+
+          auto instance = viewTransitionDelegate->getViewTransitionInstance(
+              nameStr, pseudoStr);
+          if (!instance) {
+            return jsi::Value::undefined();
+          }
+          auto result = jsi::Object(runtime);
+          result.setProperty(runtime, "x", instance->x);
+          result.setProperty(runtime, "y", instance->y);
+          result.setProperty(runtime, "width", instance->width);
+          result.setProperty(runtime, "height", instance->height);
+          result.setProperty(
+              runtime, "nativeTag", static_cast<double>(instance->nativeTag));
+          return result;
+        });
+  }
+
   return jsi::Value::undefined();
 }
 

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

@@ -8,7 +8,9 @@
 #pragma once
 
 #include <react/renderer/core/ShadowNode.h>
+#include <react/renderer/graphics/Float.h>
 #include <functional>
+#include <optional>
 
 namespace facebook::react {
 
@@ -35,6 +37,21 @@ class UIManagerViewTransitionDelegate {
   }
 
   virtual void startViewTransitionEnd() {}
+
+  struct ViewTransitionInstance {
+    Float x{0};
+    Float y{0};
+    Float width{0};
+    Float height{0};
+    Tag nativeTag{-1};
+  };
+
+  virtual std::optional<ViewTransitionInstance> getViewTransitionInstance(
+      const std::string &name,
+      const std::string &pseudo)
+  {
+    return std::nullopt;
+  }
 };
 
 } // namespace facebook::react

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

@@ -138,6 +138,38 @@ void ViewTransitionModule::startViewTransitionEnd() {
   transitionStarted_ = false;
 }
 
+std::optional<UIManagerViewTransitionDelegate::ViewTransitionInstance>
+ViewTransitionModule::getViewTransitionInstance(
+    const std::string& name,
+    const std::string& pseudo) {
+  // Look up layout based on pseudo type ("old" or "new")
+  if (pseudo == "new") {
+    auto it = newLayout_.find(name);
+    if (it != newLayout_.end()) {
+      const auto& view = it->second;
+      return ViewTransitionInstance{
+          .x = view.layoutMetrics.originFromRoot.x,
+          .y = view.layoutMetrics.originFromRoot.y,
+          .width = view.layoutMetrics.size.width,
+          .height = view.layoutMetrics.size.height,
+          .nativeTag = view.tag};
+    }
+  } else if (pseudo == "old") {
+    auto it = oldLayout_.find(name);
+    if (it != oldLayout_.end()) {
+      const auto& view = it->second;
+      return ViewTransitionInstance{
+          .x = view.layoutMetrics.originFromRoot.x,
+          .y = view.layoutMetrics.originFromRoot.y,
+          .width = view.layoutMetrics.size.width,
+          .height = view.layoutMetrics.size.height,
+          .nativeTag = view.tag};
+    }
+  }
+
+  return std::nullopt;
+}
+
 void ViewTransitionModule::onTransitionAnimationEnd(
     const std::unordered_set<std::string>& names,
     Tag newTag,

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

@@ -45,6 +45,9 @@ class ViewTransitionModule : public UIManagerViewTransitionDelegate {
 
   void startViewTransitionEnd() override;
 
+  std::optional<ViewTransitionInstance> getViewTransitionInstance(const std::string &name, const std::string &pseudo)
+      override;
+
   // Animation state structure for storing minimal view data
   struct AnimationKeyFrameViewLayoutMetrics {
     Point originFromRoot;