Enables Basic View Transition support for React Native Fabric renderer

packages/react-art/src/ReactFiberConfigART.js

@@ -413,6 +413,7 @@ export const isPrimaryRenderer = false;
 export const warnsIfNotActing = false;
 
 export const supportsMutation = true;
+export const supportsViewTransition = false;
 
 export function appendChild(parentInstance, child) {
   if (child.parentNode === parentInstance) {

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -832,6 +832,7 @@ function handleErrorInNextTick(error: any) {
 // -------------------
 
 export const supportsMutation = true;
+export const supportsViewTransition = true;
 
 export function commitMount(
   domElement: Instance,

packages/react-native-renderer/src/ReactFiberConfigFabric.js

@@ -163,6 +163,47 @@ export * from 'react-reconciler/src/ReactFiberConfigWithNoScopes';
 export * from 'react-reconciler/src/ReactFiberConfigWithNoTestSelectors';
 export * from 'react-reconciler/src/ReactFiberConfigWithNoResources';
 export * from 'react-reconciler/src/ReactFiberConfigWithNoSingletons';
+export * from './ReactFiberConfigFabricWithViewTransition';
+
+// -------------------
+//      Mutation
+//   (not supported)
+// -------------------
+
+function shim(...args: any): empty {
+  throw new Error(
+    'The current renderer does not support mutation. ' +
+      'This error is likely caused by a bug in React. ' +
+      'Please file an issue.',
+  );
+}
+
+export const supportsMutation = false;
+
+export const cloneMutableInstance = shim;
+export const cloneMutableTextInstance = shim;
+export const appendChild = shim;
+export const appendChildToContainer = shim;
+export const commitTextUpdate = shim;
+
+export function commitMount(
+  instance: Instance,
+  type: string,
+  newProps: Props,
+  internalInstanceHandle: Object,
+): void {}
+
+export const commitUpdate = shim;
+export const insertBefore = shim;
+export const insertInContainerBefore = shim;
+export const removeChild = shim;
+export const removeChildFromContainer = shim;
+export const resetTextContent = shim;
+export const hideInstance = shim;
+export const hideTextInstance = shim;
+export const unhideInstance = shim;
+export const unhideTextInstance = shim;
+export const clearContainer = shim;
 
 export function appendInitialChild(
   parentInstance: Instance,

packages/react-native-renderer/src/ReactFiberConfigFabricWithViewTransition.js

@@ -0,0 +1,262 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {TransitionTypes} from 'react/src/ReactTransitionType';
+import type {
+  Instance,
+  Props,
+  Container,
+  SuspendedState,
+  GestureTimeline,
+} from './ReactFiberConfigFabric';
+
+const {
+  measureInstance: fabricMeasureInstance,
+  applyViewTransitionName: fabricApplyViewTransitionName,
+  startViewTransition: fabricStartViewTransition,
+  restoreViewTransitionName: fabricRestoreViewTransitionName,
+  cancelViewTransitionName: fabricCancelViewTransitionName,
+} = nativeFabricUIManager;
+
+export const supportsViewTransition = true;
+
+export type InstanceMeasurement = {
+  rect: {x: number, y: number, width: number, height: number},
+  abs: boolean,
+  clip: boolean,
+  view: boolean,
+};
+
+export type RunningViewTransition = {
+  skipTransition(): void,
+  finished: Promise<void>,
+  ready: Promise<void>,
+  ...
+};
+
+interface ViewTransitionPseudoElementType extends mixin$Animatable {
+  _scope: HTMLElement;
+  _selector: string;
+  getComputedStyle(): CSSStyleDeclaration;
+}
+
+function ViewTransitionPseudoElement(
+  this: ViewTransitionPseudoElementType,
+  pseudo: string,
+  name: string,
+) {
+  // TODO: Get the owner document from the root container.
+  this._pseudo = pseudo;
+  this._name = name;
+}
+
+export type ViewTransitionInstance = null | {
+  name: string,
+  old: mixin$Animatable,
+  new: mixin$Animatable,
+  ...
+};
+
+export function restoreViewTransitionName(
+  instance: Instance,
+  props: Props,
+): void {
+  fabricRestoreViewTransitionName(instance.node);
+}
+
+// Cancel the old and new snapshots of viewTransitionName
+export function cancelViewTransitionName(
+  instance: Instance,
+  oldName: string,
+  props: Props,
+): void {
+  fabricCancelViewTransitionName(instance.node, oldName);
+}
+
+export function cancelRootViewTransitionName(rootContainer: Container): void {
+  if (__DEV__) {
+    console.warn('cancelRootViewTransitionName is not implemented');
+  }
+}
+
+export function restoreRootViewTransitionName(rootContainer: Container): void {
+  if (__DEV__) {
+    console.warn('restoreRootViewTransitionName is not implemented');
+  }
+}
+
+export function cloneRootViewTransitionContainer(
+  rootContainer: Container,
+): Instance {
+  if (__DEV__) {
+    console.warn('cloneRootViewTransitionContainer is not implemented');
+  }
+  // $FlowFixMe[incompatible-return] Return empty stub
+  return null;
+}
+
+export function removeRootViewTransitionClone(
+  rootContainer: Container,
+  clone: Instance,
+): void {
+  if (__DEV__) {
+    console.warn('removeRootViewTransitionClone is not implemented');
+  }
+}
+
+export function measureInstance(instance: Instance): InstanceMeasurement {
+  const measurement = fabricMeasureInstance(instance.node);
+  return {
+    rect: {
+      x: measurement.x,
+      y: measurement.y,
+      width: measurement.width,
+      height: measurement.height,
+    },
+    abs: false,
+    clip: false,
+    view: true,
+  };
+}
+
+export function measureClonedInstance(instance: Instance): InstanceMeasurement {
+  if (__DEV__) {
+    console.warn('measureClonedInstance is not implemented');
+  }
+  return {
+    rect: {x: 0, y: 0, width: 0, height: 0},
+    abs: false,
+    clip: false,
+    view: true,
+  };
+}
+
+export function wasInstanceInViewport(
+  measurement: InstanceMeasurement,
+): boolean {
+  return measurement.view;
+}
+
+export function hasInstanceChanged(
+  oldMeasurement: InstanceMeasurement,
+  newMeasurement: InstanceMeasurement,
+): boolean {
+  if (__DEV__) {
+    console.warn('hasInstanceChanged is not implemented');
+  }
+  return false;
+}
+
+export function hasInstanceAffectedParent(
+  oldMeasurement: InstanceMeasurement,
+  newMeasurement: InstanceMeasurement,
+): boolean {
+  if (__DEV__) {
+    console.warn('hasInstanceAffectedParent is not implemented');
+  }
+  return false;
+}
+
+export function startGestureTransition(
+  suspendedState: null | SuspendedState,
+  rootContainer: Container,
+  timeline: GestureTimeline,
+  rangeStart: number,
+  rangeEnd: number,
+  transitionTypes: null | TransitionTypes,
+  mutationCallback: () => void,
+  animateCallback: () => void,
+  errorCallback: (error: mixed) => void,
+  finishedAnimation: () => void,
+): RunningViewTransition {
+  if (__DEV__) {
+    console.warn('startGestureTransition is not implemented');
+  }
+  return null;
+}
+
+export function stopViewTransition(transition: RunningViewTransition): void {
+  if (__DEV__) {
+    console.warn('stopViewTransition is not implemented');
+  }
+}
+
+export function addViewTransitionFinishedListener(
+  transition: RunningViewTransition,
+  callback: () => void,
+): void {
+  callback();
+}
+
+export function createViewTransitionInstance(
+  name: string,
+): ViewTransitionInstance {
+  return {
+    name,
+    old: new (ViewTransitionPseudoElement: any)('old', name),
+    new: new (ViewTransitionPseudoElement: any)('new', name),
+  };
+}
+
+export function applyViewTransitionName(
+  instance: Instance,
+  name: string,
+  className: ?string,
+): void {
+  // add view-transition-name to things that might animate for browser
+  fabricApplyViewTransitionName(instance.node, name, className);
+}
+
+export function startViewTransition(
+  suspendedState: null | SuspendedState,
+  rootContainer: Container,
+  transitionTypes: null | TransitionTypes,
+  mutationCallback: () => void,
+  layoutCallback: () => void,
+  afterMutationCallback: () => void,
+  spawnedWorkCallback: () => void,
+  passiveCallback: () => mixed,
+  errorCallback: (error: mixed) => void,
+  blockedCallback: (name: string) => void,
+  finishedAnimation: () => void,
+): null | RunningViewTransition {
+  const transition = fabricStartViewTransition(
+    // mutation
+    () => {
+      mutationCallback(); // completeRoot should run here
+      layoutCallback();
+      afterMutationCallback();
+    },
+  );
+
+  if (transition == null) {
+    if (__DEV__) {
+      console.warn(
+        "startViewTransition didn't kick off transition in Fabric, the ViewTransition ReactNativeFeatureFlag might not be enabled.",
+      );
+    }
+    // Flush remaining work synchronously.
+    mutationCallback();
+    layoutCallback();
+    // Skip afterMutationCallback(). We don't need it since we're not animating.
+    spawnedWorkCallback();
+    // Skip passiveCallback(). Spawned work will schedule a task.
+    return null;
+  }
+
+  transition.ready.then(() => {
+    spawnedWorkCallback();
+  });
+
+  transition.finished.finally(() => {
+    passiveCallback();
+  });
+
+  return transition;
+}

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -375,6 +375,7 @@ export function shouldAttemptEagerTransition(): boolean {
 // -------------------
 
 export const supportsMutation = true;
+export const supportsViewTransition = false;
 
 export function appendChild(
   parentInstance: Instance,

packages/react-reconciler/src/ReactFiberCommitViewTransitions.js

@@ -25,7 +25,7 @@ import {
   ViewTransitionNamedStatic,
 } from './ReactFiberFlags';
 import {
-  supportsMutation,
+  supportsViewTransition,
   applyViewTransitionName,
   restoreViewTransitionName,
   measureInstance,
@@ -139,7 +139,7 @@ function applyViewTransitionToHostInstancesRecursive(
   collectMeasurements: null | Array<InstanceMeasurement>,
   stopAtNestedViewTransitions: boolean,
 ): boolean {
-  if (!supportsMutation) {
+  if (!supportsViewTransition) {
     return false;
   }
   let inViewport = false;
@@ -201,7 +201,7 @@ function restoreViewTransitionOnHostInstances(
   child: null | Fiber,
   stopAtNestedViewTransitions: boolean,
 ): void {
-  if (!supportsMutation) {
+  if (!supportsViewTransition) {
     return;
   }
   while (child !== null) {
@@ -648,7 +648,7 @@ function measureViewTransitionHostInstancesRecursive(
   previousMeasurements: null | Array<InstanceMeasurement>,
   stopAtNestedViewTransitions: boolean,
 ): boolean {
-  if (!supportsMutation) {
+  if (!supportsViewTransition) {
     return true;
   }
   let inViewport = false;

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -158,6 +158,7 @@ import {
   supportsHydration,
   supportsResources,
   supportsSingletons,
+  supportsViewTransition,
   clearSuspenseBoundary,
   clearSuspenseBoundaryFromContainer,
   createContainerChildSet,
@@ -3709,7 +3710,10 @@ function commitPassiveMountOnFiber(
       }
 
       if (isViewTransitionEligible) {
-        if (supportsMutation && rootViewTransitionNameCanceled) {
+        if (
+          supportsViewTransition &&
+          rootViewTransitionNameCanceled
+        ) {
           restoreRootViewTransitionName(finishedRoot.containerInfo);
         }
       }