move ViewTransition APIs not for react reconciler to its own TurboModule (#56257)

zeyap · meta-codesync[bot] · commit 0e65df9152d9 · 2026-04-01T16:24:13.000-07:00
Summary: Pull Request resolved: #56257 ## Changelog: [General] [Changed] - move ViewTransition APIs not for react reconciler to its own TurboModule Move `unstable_getViewTransitionInstance` which is not consumed by react reconciler out of UIManagerBinding into a standalone NativeViewTransition CxxTurboModule, following the NativeDOM pattern. This avoids bloating UIManager with ViewTransition-specific APIs. Reviewed By: christophpurrer Differential Revision: D98360009 fbshipit-source-id: 191d0c8cc39fbe1cff87e12ad9a99d5e125b0250
diff --git a/packages/react-native/Libraries/ReactNative/FabricUIManager.js b/packages/react-native/Libraries/ReactNative/FabricUIManager.js
@@ -97,16 +97,6 @@ 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;
@@ -139,7 +129,6 @@ const CACHED_PROPERTIES = [
   'unstable_ContinuousEventPriority',
   'unstable_IdleEventPriority',
   'unstable_getCurrentEventPriority',
-  'unstable_getViewTransitionInstance',
 ];
 
 // This is exposed as a getter because apps using the legacy renderer AND
diff --git a/packages/react-native/Package.swift b/packages/react-native/Package.swift
@@ -351,6 +351,13 @@ let reactMutationObserverNativeModule = RNTarget(
   dependencies: [.reactNativeDependencies, .reactCxxReact, .reactFabric, .reactTurboModuleBridging, .reactTurboModuleCore, .yoga]
 )
 
+/// React-viewtransitionnativemodule.podspec
+let reactViewTransitionNativeModule = RNTarget(
+  name: .reactViewTransitionNativeModule,
+  path: "ReactCommon/react/nativemodule/viewtransition",
+  dependencies: [.reactNativeDependencies, .reactCxxReact, .reactFabric, .reactTurboModuleBridging, .reactTurboModuleCore, .yoga]
+)
+
 /// React-featureflagnativemodule.podspec
 let reactFeatureflagsNativemodule = RNTarget(
   name: .reactFeatureflagsNativemodule,
@@ -701,6 +708,7 @@ let targets = [
   reactWebPerformanceNativeModule,
   reactIntersectionObserverNativeModule,
   reactMutationObserverNativeModule,
+  reactViewTransitionNativeModule,
   reactFeatureflagsNativemodule,
   reactNativeModuleDom,
   reactAppDelegate,
@@ -890,6 +898,7 @@ extension String {
   static let reactWebPerformanceNativeModule = "React-webperformancenativemodule"
   static let reactIntersectionObserverNativeModule = "React-intersectionobservernativemodule"
   static let reactMutationObserverNativeModule = "React-mutationobservernativemodule"
+  static let reactViewTransitionNativeModule = "React-viewtransitionnativemodule"
   static let reactFeatureflagsNativemodule = "React-featureflagsnativemodule"
   static let reactNativeModuleDom = "React-domnativemodule"
   static let reactAppDelegate = "React-RCTAppDelegate"
diff --git a/packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt b/packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt
@@ -131,6 +131,7 @@ add_react_common_subdir(react/nativemodule/microtasks)
 add_react_common_subdir(react/nativemodule/idlecallbacks)
 add_react_common_subdir(react/nativemodule/intersectionobserver)
 add_react_common_subdir(react/nativemodule/mutationobserver)
+add_react_common_subdir(react/nativemodule/viewtransition)
 add_react_common_subdir(react/nativemodule/webperformance)
 add_react_common_subdir(react/networking)
 add_react_common_subdir(jserrorhandler)
@@ -202,6 +203,7 @@ add_library(reactnative
           $<TARGET_OBJECTS:react_nativemodule_intersectionobserver>
           $<TARGET_OBJECTS:react_nativemodule_microtasks>
           $<TARGET_OBJECTS:react_nativemodule_mutationobserver>
+          $<TARGET_OBJECTS:react_nativemodule_viewtransition>
           $<TARGET_OBJECTS:react_nativemodule_webperformance>
           $<TARGET_OBJECTS:react_networking>
           $<TARGET_OBJECTS:react_newarchdefaults>
@@ -301,6 +303,7 @@ target_include_directories(reactnative
         $<TARGET_PROPERTY:react_nativemodule_intersectionobserver,INTERFACE_INCLUDE_DIRECTORIES>
         $<TARGET_PROPERTY:react_nativemodule_microtasks,INTERFACE_INCLUDE_DIRECTORIES>
         $<TARGET_PROPERTY:react_nativemodule_mutationobserver,INTERFACE_INCLUDE_DIRECTORIES>
+        $<TARGET_PROPERTY:react_nativemodule_viewtransition,INTERFACE_INCLUDE_DIRECTORIES>
         $<TARGET_PROPERTY:react_nativemodule_webperformance,INTERFACE_INCLUDE_DIRECTORIES>
         $<TARGET_PROPERTY:react_networking,INTERFACE_INCLUDE_DIRECTORIES>
         $<TARGET_PROPERTY:react_newarchdefaults,INTERFACE_INCLUDE_DIRECTORIES>
diff --git a/packages/react-native/ReactCommon/react/nativemodule/defaults/CMakeLists.txt b/packages/react-native/ReactCommon/react/nativemodule/defaults/CMakeLists.txt
@@ -23,6 +23,7 @@ target_link_libraries(react_nativemodule_defaults
         react_nativemodule_idlecallbacks
         react_nativemodule_intersectionobserver
         react_nativemodule_mutationobserver
+        react_nativemodule_viewtransition
         react_nativemodule_webperformance
         react_renderer_animated
 )
diff --git a/packages/react-native/ReactCommon/react/nativemodule/defaults/DefaultTurboModules.cpp b/packages/react-native/ReactCommon/react/nativemodule/defaults/DefaultTurboModules.cpp
@@ -13,6 +13,7 @@
 #include <react/nativemodule/intersectionobserver/NativeIntersectionObserver.h>
 #include <react/nativemodule/microtasks/NativeMicrotasks.h>
 #include <react/nativemodule/mutationobserver/NativeMutationObserver.h>
+#include <react/nativemodule/viewtransition/NativeViewTransition.h>
 #include <react/nativemodule/webperformance/NativePerformance.h>
 #include <react/renderer/animated/AnimatedModule.h>
 
@@ -57,6 +58,12 @@ namespace facebook::react {
     }
   }
 
+  if (ReactNativeFeatureFlags::viewTransitionEnabled()) {
+    if (name == NativeViewTransition::kModuleName) {
+      return std::make_shared<NativeViewTransition>(jsInvoker);
+    }
+  }
+
   if (ReactNativeFeatureFlags::cxxNativeAnimatedEnabled() &&
       ReactNativeFeatureFlags::useSharedAnimatedBackend() &&
       name == AnimatedModule::kModuleName) {
diff --git a/packages/react-native/ReactCommon/react/nativemodule/defaults/React-defaultsnativemodule.podspec b/packages/react-native/ReactCommon/react/nativemodule/defaults/React-defaultsnativemodule.podspec
@@ -54,6 +54,7 @@ Pod::Spec.new do |s|
   s.dependency "React-idlecallbacksnativemodule"
   s.dependency "React-intersectionobservernativemodule"
   s.dependency "React-mutationobservernativemodule"
+  s.dependency "React-viewtransitionnativemodule"
   s.dependency "React-webperformancenativemodule"
   s.dependency "React-Fabric/animated"
   add_dependency(s, "React-RCTFBReactNativeSpec")
diff --git a/packages/react-native/ReactCommon/react/nativemodule/viewtransition/CMakeLists.txt b/packages/react-native/ReactCommon/react/nativemodule/viewtransition/CMakeLists.txt
@@ -0,0 +1,24 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+include(${REACT_COMMON_DIR}/cmake-utils/react-native-flags.cmake)
+
+file(GLOB react_nativemodule_viewtransition_SRC CONFIGURE_DEPENDS *.cpp)
+add_library(react_nativemodule_viewtransition OBJECT ${react_nativemodule_viewtransition_SRC})
+
+target_include_directories(react_nativemodule_viewtransition PUBLIC ${REACT_COMMON_DIR})
+
+target_link_libraries(react_nativemodule_viewtransition
+        react_codegen_rncore
+        react_cxxreact
+        react_renderer_bridging
+        react_renderer_core
+        react_renderer_uimanager
+)
+target_compile_reactnative_options(react_nativemodule_viewtransition PRIVATE)
+target_compile_options(react_nativemodule_viewtransition PRIVATE -Wpedantic)
diff --git a/packages/react-native/ReactCommon/react/nativemodule/viewtransition/NativeViewTransition.cpp b/packages/react-native/ReactCommon/react/nativemodule/viewtransition/NativeViewTransition.cpp
@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "NativeViewTransition.h"
+
+#include <react/renderer/uimanager/UIManagerBinding.h>
+
+#ifdef RN_DISABLE_OSS_PLUGIN_HEADER
+#include "Plugins.h"
+#endif
+
+std::shared_ptr<facebook::react::TurboModule>
+NativeViewTransitionModuleProvider(
+    std::shared_ptr<facebook::react::CallInvoker> jsInvoker) {
+  return std::make_shared<facebook::react::NativeViewTransition>(
+      std::move(jsInvoker));
+}
+
+namespace facebook::react {
+
+NativeViewTransition::NativeViewTransition(
+    std::shared_ptr<CallInvoker> jsInvoker)
+    : NativeViewTransitionCxxSpec(std::move(jsInvoker)) {}
+
+std::optional<jsi::Object> NativeViewTransition::getViewTransitionInstance(
+    jsi::Runtime& rt,
+    const std::string& name,
+    const std::string& pseudo) {
+  auto& uiManager = UIManagerBinding::getBinding(rt)->getUIManager();
+  auto* viewTransitionDelegate = uiManager.getViewTransitionDelegate();
+  if (viewTransitionDelegate == nullptr) {
+    return std::nullopt;
+  }
+
+  auto instance =
+      viewTransitionDelegate->getViewTransitionInstance(name, pseudo);
+  if (!instance) {
+    return std::nullopt;
+  }
+
+  auto result = jsi::Object(rt);
+  result.setProperty(rt, "x", instance->x);
+  result.setProperty(rt, "y", instance->y);
+  result.setProperty(rt, "width", instance->width);
+  result.setProperty(rt, "height", instance->height);
+  result.setProperty(rt, "nativeTag", static_cast<double>(instance->nativeTag));
+  return result;
+}
+
+} // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/nativemodule/viewtransition/NativeViewTransition.h b/packages/react-native/ReactCommon/react/nativemodule/viewtransition/NativeViewTransition.h
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <optional>
+#include <string>
+
+#if __has_include("FBReactNativeSpecJSI.h") // CocoaPod headers on Apple
+#include "FBReactNativeSpecJSI.h"
+#else
+#include <FBReactNativeSpec/FBReactNativeSpecJSI.h>
+#endif
+
+#include <react/renderer/bridging/bridging.h>
+
+namespace facebook::react {
+
+class NativeViewTransition : public NativeViewTransitionCxxSpec<NativeViewTransition> {
+ public:
+  explicit NativeViewTransition(std::shared_ptr<CallInvoker> jsInvoker);
+
+  std::optional<jsi::Object>
+  getViewTransitionInstance(jsi::Runtime &rt, const std::string &name, const std::string &pseudo);
+};
+
+} // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/nativemodule/viewtransition/React-viewtransitionnativemodule.podspec b/packages/react-native/ReactCommon/react/nativemodule/viewtransition/React-viewtransitionnativemodule.podspec
@@ -0,0 +1,58 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "..", "..", "..", "..", "package.json")))
+version = package['version']
+
+source = { :git => 'https://github.com/facebook/react-native.git' }
+if version == '1000.0.0'
+  # This is an unpublished version, use the latest commit hash of the react-native repo, which we're presumably in.
+  source[:commit] = `git rev-parse HEAD`.strip if system("git rev-parse --git-dir > /dev/null 2>&1")
+else
+  source[:tag] = "v#{version}"
+end
+
+header_search_paths = [
+  "\"$(PODS_ROOT)/Headers/Private/Yoga\"",
+]
+
+if ENV['USE_FRAMEWORKS']
+  header_search_paths << "\"$(PODS_TARGET_SRCROOT)/../../..\"" # this is needed to allow the viewtransitionnativemodule to access its own files
+end
+
+Pod::Spec.new do |s|
+  s.name                   = "React-viewtransitionnativemodule"
+  s.version                = version
+  s.summary                = "React Native view transition native module"
+  s.homepage               = "https://reactnative.dev/"
+  s.license                = package["license"]
+  s.author                 = "Meta Platforms, Inc. and its affiliates"
+  s.platforms              = min_supported_versions
+  s.source                 = source
+  s.source_files           = podspec_sources("*.{cpp,h}", "*.h")
+  s.header_dir             = "react/nativemodule/viewtransition"
+  s.pod_target_xcconfig    = { "CLANG_CXX_LANGUAGE_STANDARD" => rct_cxx_language_standard(),
+                               "HEADER_SEARCH_PATHS" => header_search_paths.join(' '),
+                               "OTHER_CFLAGS" => "$(inherited)",
+                               "DEFINES_MODULE" => "YES" }
+
+  resolve_use_frameworks(s, header_mappings_dir: "../..", module_name: "React_viewtransitionnativemodule")
+
+  s.dependency "React-jsi"
+  s.dependency "React-jsiexecutor"
+
+  depend_on_js_engine(s)
+  add_rn_third_party_dependencies(s)
+  add_rncore_dependency(s)
+
+  s.dependency "Yoga"
+  s.dependency "ReactCommon/turbomodule/core"
+  s.dependency "React-Fabric"
+  s.dependency "React-Fabric/bridging"
+  add_dependency(s, "React-runtimeexecutor", :additional_framework_paths => ["platform/ios"])
+  add_dependency(s, "React-RCTFBReactNativeSpec")
+end
diff --git a/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerBinding.cpp b/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerBinding.cpp
@@ -1147,43 +1147,6 @@ 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();
 }
 
diff --git a/packages/react-native/scripts/react_native_pods.rb b/packages/react-native/scripts/react_native_pods.rb
@@ -158,6 +158,7 @@ def use_react_native! (
   pod 'React-idlecallbacksnativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/idlecallbacks"
   pod 'React-intersectionobservernativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/intersectionobserver"
   pod 'React-mutationobservernativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/mutationobserver"
+  pod 'React-viewtransitionnativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/viewtransition"
   pod 'React-webperformancenativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/webperformance"
   pod 'React-domnativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/dom"
   pod 'React-defaultsnativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/defaults"
diff --git a/packages/react-native/src/private/viewtransition/specs/NativeViewTransition.js b/packages/react-native/src/private/viewtransition/specs/NativeViewTransition.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {TurboModule} from '../../../../Libraries/TurboModule/RCTExport';
+
+import * as TurboModuleRegistry from '../../../../Libraries/TurboModule/TurboModuleRegistry';
+
+export interface Spec extends TurboModule {
+  +getViewTransitionInstance: (
+    name: string,
+    pseudo: string,
+  ) => ?{
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    nativeTag: number,
+  };
+}
+
+export default TurboModuleRegistry.get<Spec>(
+  'NativeViewTransitionCxx',
+) as ?Spec;
diff --git a/private/react-native-fantom/tester/CMakeLists.txt b/private/react-native-fantom/tester/CMakeLists.txt
@@ -71,6 +71,7 @@ add_react_common_subdir(react/nativemodule/idlecallbacks)
 add_react_common_subdir(react/nativemodule/intersectionobserver)
 add_react_common_subdir(react/nativemodule/microtasks)
 add_react_common_subdir(react/nativemodule/mutationobserver)
+add_react_common_subdir(react/nativemodule/viewtransition)
 add_react_common_subdir(react/nativemodule/webperformance)
 add_react_common_subdir(react/performance/cdpmetrics)
 add_react_common_subdir(react/performance/timeline)
@@ -188,6 +189,7 @@ target_link_libraries(fantom_tester
     react_nativemodule_intersectionobserver
     react_nativemodule_microtasks
     react_nativemodule_mutationobserver
+    react_nativemodule_viewtransition
     react_nativemodule_webperformance
     react_performance_cdpmetrics
     react_performance_timeline

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ target_link_libraries(react_nativemodule_defaults`
`23`	`23`	`react_nativemodule_idlecallbacks`
`24`	`24`	`react_nativemodule_intersectionobserver`
`25`	`25`	`react_nativemodule_mutationobserver`
	`26`	`+ react_nativemodule_viewtransition`
`26`	`27`	`react_nativemodule_webperformance`
`27`	`28`	`react_renderer_animated`
`28`	`29`	`)`