diff --git a/packages/react-native-renderer/src/ReactFiberConfigFabric.js b/packages/react-native-renderer/src/ReactFiberConfigFabric.js index 533b20fa6d74..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'; @@ -90,6 +91,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 +190,7 @@ export function createInstance( hostContext: HostContext, internalInstanceHandle: InternalInstanceHandle, ): Instance { - const tag = nextReactTag; - nextReactTag += 2; + const tag = allocateTag(); const viewConfig = getViewConfigForType(type); @@ -235,8 +240,7 @@ export function createTextInstance( } } - const tag = nextReactTag; - nextReactTag += 2; + const tag = allocateTag(); const node = createNode( tag, // reactTag @@ -666,7 +670,9 @@ export function suspendInstance( export function suspendOnActiveViewTransition( state: SuspendedState, container: Container, -): void {} +): void { + fabricSuspendOnActiveViewTransition(); +} export function waitForCommitToBeReady( state: SuspendedState, 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,