Enables Basic View Transition support for React Native Fabric renderer

packages/react-art/src/ReactFiberConfigART.js

@@ -249,6 +249,7 @@ function applyTextProps(instance, props, prevProps = {}) {
   }
 }
 
+export * from 'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
 export * from 'react-reconciler/src/ReactFiberConfigWithNoPersistence';
 export * from 'react-reconciler/src/ReactFiberConfigWithNoHydration';
 export * from 'react-reconciler/src/ReactFiberConfigWithNoScopes';
@@ -484,92 +485,6 @@ export function unhideTextInstance(textInstance, text): void {
   // Noop
 }
 
-export function applyViewTransitionName(instance, name, className) {
-  // Noop
-}
-
-export function restoreViewTransitionName(instance, props) {
-  // Noop
-}
-
-export function cancelViewTransitionName(instance, name, props) {
-  // Noop
-}
-
-export function cancelRootViewTransitionName(rootContainer) {
-  // Noop
-}
-
-export function restoreRootViewTransitionName(rootContainer) {
-  // Noop
-}
-
-export function cloneRootViewTransitionContainer(rootContainer) {
-  throw new Error('Not implemented.');
-}
-
-export function removeRootViewTransitionClone(rootContainer, clone) {
-  throw new Error('Not implemented.');
-}
-
-export type InstanceMeasurement = null;
-
-export function measureInstance(instance) {
-  return null;
-}
-
-export function measureClonedInstance(instance) {
-  return null;
-}
-
-export function wasInstanceInViewport(measurement): boolean {
-  return true;
-}
-
-export function hasInstanceChanged(oldMeasurement, newMeasurement): boolean {
-  return false;
-}
-
-export function hasInstanceAffectedParent(
-  oldMeasurement,
-  newMeasurement,
-): boolean {
-  return false;
-}
-
-export function startViewTransition() {
-  return null;
-}
-
-export type RunningViewTransition = null;
-
-export function startGestureTransition() {
-  return null;
-}
-
-export function stopViewTransition(transition: RunningViewTransition) {}
-
-export function addViewTransitionFinishedListener(
-  transition: RunningViewTransition,
-  callback: () => void,
-) {
-  callback();
-}
-
-export type ViewTransitionInstance = null | {name: string, ...};
-
-export function createViewTransitionInstance(
-  name: string,
-): ViewTransitionInstance {
-  return null;
-}
-
-export type GestureTimeline = null;
-
-export function getCurrentGestureOffset(provider: GestureTimeline): number {
-  throw new Error('startGestureTransition is not yet supported in react-art.');
-}
-
 export function clearContainer(container) {
   // TODO Implement this
 }

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,7 @@ 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';
 
 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;
+}