From 6dd9de219d4e0b26e5e408992c708cd9ac435e24 Mon Sep 17 00:00:00 2001 From: Zeya Peng Date: Thu, 2 Apr 2026 09:45:06 -0400 Subject: [PATCH 1/4] 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 Date: Thu, 2 Apr 2026 09:49:31 -0400 Subject: [PATCH 2/4] 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, ready: Promise, From f8cc21f8a8068bf3012c0eb22846c02cc50289e6 Mon Sep 17 00:00:00 2001 From: Zeya Peng Date: Thu, 9 Apr 2026 16:13:00 -0400 Subject: [PATCH 3/4] Wire up suspendOnActiveViewTransition in Fabric Import suspendOnActiveViewTransition from nativeFabricUIManager and call it inside the Fabric renderer's suspendOnActiveViewTransition export. --- packages/react-native-renderer/src/ReactFiberConfigFabric.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js index 520b12ff1fdb..cf1f19767b28 100644 --- a/packages/react-native-renderer/src/ReactFiberConfigFabric.js +++ b/packages/react-native-renderer/src/ReactFiberConfigFabric.js @@ -60,6 +60,7 @@ const { unstable_ContinuousEventPriority: FabricContinuousPriority, unstable_IdleEventPriority: FabricIdlePriority, unstable_getCurrentEventPriority: fabricGetCurrentEventPriority, + suspendOnActiveViewTransition: fabricSuspendOnActiveViewTransition, } = nativeFabricUIManager; import {getClosestInstanceFromNode} from './ReactFabricComponentTree'; @@ -669,7 +670,9 @@ export function suspendInstance( export function suspendOnActiveViewTransition( state: SuspendedState, container: Container, -): void {} +): void { + fabricSuspendOnActiveViewTransition(); +} export function waitForCommitToBeReady( state: SuspendedState, From a7c98dd78f53f84ed1c6f6d7d5799ea262c3080c Mon Sep 17 00:00:00 2001 From: Zeya Peng Date: Wed, 15 Apr 2026 15:24:46 -0400 Subject: [PATCH 4/4] Add suspendOnActiveViewTransition to nativeFabricUIManager Flow type Fix prop-missing Flow error by adding the missing property declaration. --- scripts/flow/react-native-host-hooks.js | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js index d6ad8d094cff..2d35c27e5bd0 100644 --- a/scripts/flow/react-native-host-hooks.js +++ b/scripts/flow/react-native-host-hooks.js @@ -311,5 +311,6 @@ declare const nativeFabricUIManager: { finished: Promise, ready: Promise, }, + suspendOnActiveViewTransition: () => void, ... };