Wire up createViewTransitionInstance and suspendOnActiveViewTransition in Fabric (#36196)

## Summary
- Wires up the native `fabricCreateViewTransitionInstance` call in
`createViewTransitionInstance` which will create a ShadowNode for old
pseudo element
- Extracts tag allocation logic into a shared `allocateTag()` function
exported from `ReactFiberConfigFabric`
  - Imports `allocateTag` in `ReactFiberConfigFabricWithViewTransition`
- Reuses `allocateTag()` in `createInstance` and `createTextInstance`
instead of inline tag incrementing
- Wires up native `fabricSuspendOnActiveViewTransition` call in
`suspendOnActiveViewTransition` which suspends another view transition
when the previous one is not yet finished

## Test plan
- Existing Fabric renderer tests should continue to pass
- ViewTransition instance creation now properly allocates a tag and
calls the native module

Author: zeyap

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';
@@ -88,6 +89,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;
 
@@ -180,8 +186,7 @@ export function createInstance(
   hostContext: HostContext,
   internalInstanceHandle: InternalInstanceHandle,
 ): Instance {
-  const tag = nextReactTag;
-  nextReactTag += 2;
+  const tag = allocateTag();
 
   const viewConfig = getViewConfigForType(type);
 
@@ -231,8 +236,7 @@ export function createTextInstance(
     }
   }
 
-  const tag = nextReactTag;
-  nextReactTag += 2;
+  const tag = allocateTag();
 
   const node = createNode(
     tag, // reactTag
@@ -652,7 +656,9 @@ export function suspendInstance(
 export function suspendOnActiveViewTransition(
   state: SuspendedState,
   container: Container,
-): void {}
+): void {
+  fabricSuspendOnActiveViewTransition();
+}
 
 export function waitForCommitToBeReady(
   state: SuspendedState,

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,
   startViewTransitionReadyFinished: fabricStartViewTransitionReadyFinished,
 } = nativeFabricUIManager;
@@ -197,6 +200,8 @@ export function addViewTransitionFinishedListener(
 export function createViewTransitionInstance(
   name: string,
 ): ViewTransitionInstance {
+  const tag = allocateTag();
+  fabricCreateViewTransitionInstance(name, tag);
   return {
     name,
     old: new (ViewTransitionPseudoElement: any)('old', name),

scripts/flow/react-native-host-hooks.js

@@ -213,10 +213,12 @@ declare const nativeFabricUIManager: {
     name: string,
     className: ?string,
   ) => void,
+  createViewTransitionInstance: (name: string, tag: number) => void,
   startViewTransition: (mutationCallback: () => void) => {
     finished: Promise<void>,
     ready: Promise<void>,
   },
   startViewTransitionReadyFinished: () => void,
+  suspendOnActiveViewTransition: () => void,
   ...
 };