diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js index 533b20fa6d74..520b12ff1fdb 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(): number { + 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), 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,