From 6dd9de219d4e0b26e5e408992c708cd9ac435e24 Mon Sep 17 00:00:00 2001
From: Zeya Peng <zeyap@meta.com>
Date: Thu, 2 Apr 2026 09:45:06 -0400
Subject: [PATCH 1/2] Extract allocateTag and wire up
 createViewTransitionInstance in Fabric

Extract the tag allocation logic into a shared `allocateTag()` function
in ReactFiberConfigFabric and use it in both `createInstance`/`createTextInstance`
and `createViewTransitionInstance` in the ViewTransition config. Also wire up
the native `fabricCreateViewTransitionInstance` call.
---
 .../src/ReactFiberConfigFabric.js                     | 11 +++++++----
 .../src/ReactFiberConfigFabricWithViewTransition.js   |  5 +++++
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
index 533b20fa6d74..5a7efca3c58e 100644
--- a/packages/react-native-renderer/src/ReactFiberConfigFabric.js
+++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
@@ -90,6 +90,11 @@ const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 // % 2 === 0 means it is a Fabric tag.
 // This means that they never overlap.
 let nextReactTag = 2;
+export function allocateTag() {
+  const tag = nextReactTag;
+  nextReactTag += 2;
+  return tag;
+}
 
 type InternalInstanceHandle = Object;
 
@@ -184,8 +189,7 @@ export function createInstance(
   hostContext: HostContext,
   internalInstanceHandle: InternalInstanceHandle,
 ): Instance {
-  const tag = nextReactTag;
-  nextReactTag += 2;
+  const tag = allocateTag();
 
   const viewConfig = getViewConfigForType(type);
 
@@ -235,8 +239,7 @@ export function createTextInstance(
     }
   }
 
-  const tag = nextReactTag;
-  nextReactTag += 2;
+  const tag = allocateTag();
 
   const node = createNode(
     tag, // reactTag
diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabricWithViewTransition.js b/packages/react-native-renderer/src/ReactFiberConfigFabricWithViewTransition.js
index cbe70a0d88f8..3e7649e106b3 100644
--- a/packages/react-native-renderer/src/ReactFiberConfigFabricWithViewTransition.js
+++ b/packages/react-native-renderer/src/ReactFiberConfigFabricWithViewTransition.js
@@ -16,8 +16,11 @@ import type {
   GestureTimeline,
 } from './ReactFiberConfigFabric';
 
+import {allocateTag} from './ReactFiberConfigFabric';
+
 const {
   applyViewTransitionName: fabricApplyViewTransitionName,
+  createViewTransitionInstance: fabricCreateViewTransitionInstance,
   startViewTransition: fabricStartViewTransition,
 } = nativeFabricUIManager;
 
@@ -196,6 +199,8 @@ export function addViewTransitionFinishedListener(
 export function createViewTransitionInstance(
   name: string,
 ): ViewTransitionInstance {
+  const tag = allocateTag();
+  fabricCreateViewTransitionInstance(name, tag);
   return {
     name,
     old: new (ViewTransitionPseudoElement: any)('old', name),

From 71e5fc29236dd8a2569acb028aeacd806175240e Mon Sep 17 00:00:00 2001
From: Zeya Peng <zeyap@meta.com>
Date: Thu, 2 Apr 2026 09:49:31 -0400
Subject: [PATCH 2/2] Fix Flow errors: add return type to allocateTag and
 declare createViewTransitionInstance

---
 packages/react-native-renderer/src/ReactFiberConfigFabric.js | 2 +-
 scripts/flow/react-native-host-hooks.js                      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
index 5a7efca3c58e..520b12ff1fdb 100644
--- a/packages/react-native-renderer/src/ReactFiberConfigFabric.js
+++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js
@@ -90,7 +90,7 @@ const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 // % 2 === 0 means it is a Fabric tag.
 // This means that they never overlap.
 let nextReactTag = 2;
-export function allocateTag() {
+export function allocateTag(): number {
   const tag = nextReactTag;
   nextReactTag += 2;
   return tag;
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 3e924f1c7f1b..d6ad8d094cff 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -306,6 +306,7 @@ declare const nativeFabricUIManager: {
     name: string,
     className: ?string,
   ) => void,
+  createViewTransitionInstance: (name: string, tag: number) => void,
   startViewTransition: (mutationCallback: () => void) => {
     finished: Promise<void>,
     ready: Promise<void>,