Enables Basic View Transition support for React Native Fabric renderer (#35764)

## Summary
Enables Basic View Transition support for React Native Fabric renderer.
**Implemented:**
- Added FabricUIManager bindings for view transition methods:
`applyViewTransitionName`, `startViewTransition`
- Implemented `startViewTransition` with proper callback orchestration
(mutation → layout → afterMutation → spawnedWork → passive)
- Added fallback behavior that flushes work synchronously when Fabric's
`startViewTransition` returns null (e.g., when the ViewTransition
ReactNativeFeatureFlag is not enabled)
- Added Flow type declarations for new FabricUIManager methods
- Stubbed with `__DEV__` warnings for all the other view transition
config functions that are not yet implemented
This allows React Native apps using Fabric to leverage the View
Transition API for coordinated animations during state transitions, with
graceful degradation when the native side doesn't support it.
Below are diagrams of proposed architecture in fabric, and observation
of what/when config functions get called during a basic shared
transition example
<img width="2290" height="1529" alt="Untitled-2026-03-19-1240"
src="https://github.com/user-attachments/assets/192c9169-bc25-449c-a33b-dfec67179e7f"
/>
## How did you test this change?
- [x] `yarn flow fabric` - Flow type checks pass
- [x] `yarn lint` - Lint checks pass
- [x] Manually tested in Android catalyst app with
`enableViewTransition` and `enableViewTransitionForPersistenceMode `in
`ReactFeatureFlags.test-renderer.native-fb.js` and View Transition
enabled via ReactNativeFeatureFlag
- [x] Verified in the minified `ReactFabric-dev.fb.js` that the 'shim'
config functions are not included
- [x] Verified fallback behavior logs warning in `__DEV__` and flushes
work synchronously when ViewTransition flag isn't enabled in Fabric

Author: zeyap

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

@@ -166,6 +166,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';
 
 exportfunctionappendInitialChild(
 parentInstance: Instance,

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

@@ -0,0 +1,261 @@
+/**
+ * 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
+ */
+
+importtype{TransitionTypes}from'react/src/ReactTransitionType';
+importtype{
+Instance,
+Props,
+Container,
+SuspendedState,
+GestureTimeline,
+}from'./ReactFiberConfigFabric';
+
+const{
+applyViewTransitionName: fabricApplyViewTransitionName,
+startViewTransition: fabricStartViewTransition,
+}=nativeFabricUIManager;
+
+exporttypeInstanceMeasurement={
+rect: {x: number,y: number,width: number,height: number},
+abs: boolean,
+clip: boolean,
+view: boolean,
+};
+
+exporttypeRunningViewTransition={
+finished: Promise<void>,
+ready: Promise<void>,
+ ...
+};
+
+interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
+ _pseudo: string;
+ _name: string;
+}
+
+functionViewTransitionPseudoElement(
+this: ViewTransitionPseudoElementType,
+pseudo: string,
+name: string,
+){
+// TODO: Get the owner document from the root container.
+this._pseudo=pseudo;
+this._name=name;
+}
+
+exporttypeViewTransitionInstance=null|{
+name: string,
+old: mixin$Animatable,
+new: mixin$Animatable,
+ ...
+};
+
+exportfunctionrestoreViewTransitionName(
+instance: Instance,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('restoreViewTransitionName is not implemented');
+}
+}
+
+// Cancel the old and new snapshots of viewTransitionName
+exportfunctioncancelViewTransitionName(
+instance: Instance,
+oldName: string,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('cancelViewTransitionName is not implemented');
+}
+}
+
+exportfunctioncancelRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctionrestoreRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctioncloneRootViewTransitionContainer(
+rootContainer: Container,
+): Instance{
+if(__DEV__){
+console.warn('cloneRootViewTransitionContainer is not implemented');
+}
+// $FlowFixMe[incompatible-return] Return empty stub
+returnnull;
+}
+
+exportfunctionremoveRootViewTransitionClone(
+rootContainer: Container,
+clone: Instance,
+): void{
+if(__DEV__){
+console.warn('removeRootViewTransitionClone is not implemented');
+}
+}
+
+exportfunctionmeasureInstance(instance: Instance): InstanceMeasurement{
+if(__DEV__){
+console.warn('measureInstance is not implemented');
+}
+return{
+rect: {
+x: 0,
+y: 0,
+width: 0,
+height: 0,
+},
+abs: false,
+clip: false,
+// TODO: properly calculate whether instance is in viewport
+view: true,
+};
+}
+
+exportfunctionmeasureClonedInstance(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,
+};
+}
+
+exportfunctionwasInstanceInViewport(
+measurement: InstanceMeasurement,
+): boolean{
+returnmeasurement.view;
+}
+
+exportfunctionhasInstanceChanged(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceChanged is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionhasInstanceAffectedParent(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceAffectedParent is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionstartGestureTransition(
+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{
+finished: Promise.resolve(),
+ready: Promise.resolve(),
+};
+}
+
+exportfunctionstopViewTransition(transition: RunningViewTransition): void{
+if(__DEV__){
+console.warn('stopViewTransition is not implemented');
+}
+}
+
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+): void{
+ transition.finished.finally(callback);
+}
+
+exportfunctioncreateViewTransitionInstance(
+name: string,
+): ViewTransitionInstance{
+return{
+ name,
+old: new(ViewTransitionPseudoElement: any)('old',name),
+new: new(ViewTransitionPseudoElement: any)('new',name),
+};
+}
+
+exportfunctionapplyViewTransitionName(
+instance: Instance,
+name: string,
+className: ?string,
+): void{
+// add view-transition-name to things that might animate for browser
+fabricApplyViewTransitionName(instance.node,name,className);
+}
+
+exportfunctionstartViewTransition(
+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.
+returnnull;
+}
+
+transition.ready.then(()=>{
+spawnedWorkCallback();
+});
+
+transition.finished.finally(()=>{
+passiveCallback();
+});
+
+returntransition;
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -25,6 +25,7 @@ import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 importtype{TransitionTypes}from'react/src/ReactTransitionType';
 importtypeof*asHostConfigfrom'react-reconciler/src/ReactFiberConfig';
 importtypeof*asReactFiberConfigWithNoMutationfrom'react-reconciler/src/ReactFiberConfigWithNoMutation';
+importtypeof*asReactFiberConfigWithNoViewTransitionfrom'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
 importtypeof*asReactFiberConfigWithNoPersistencefrom'react-reconciler/src/ReactFiberConfigWithNoPersistence';
 
 importtypeof*asReconcilerAPIfrom'react-reconciler/src/ReactFiberReconciler';
@@ -709,7 +710,8 @@ function createReactNoop(
 
 constmutationHostConfig: Pick<
 HostConfig,
-$Keys<ReactFiberConfigWithNoMutation>,
+|$Keys<ReactFiberConfigWithNoMutation>
+|$Keys<ReactFiberConfigWithNoViewTransition>,
 >={
 supportsMutation: true,
 

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

@@ -166,6 +166,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';
 
 exportfunctionappendInitialChild(
 parentInstance: Instance,

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

@@ -0,0 +1,261 @@
+/**
+ * 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
+ */
+
+importtype{TransitionTypes}from'react/src/ReactTransitionType';
+importtype{
+Instance,
+Props,
+Container,
+SuspendedState,
+GestureTimeline,
+}from'./ReactFiberConfigFabric';
+
+const{
+applyViewTransitionName: fabricApplyViewTransitionName,
+startViewTransition: fabricStartViewTransition,
+}=nativeFabricUIManager;
+
+exporttypeInstanceMeasurement={
+rect: {x: number,y: number,width: number,height: number},
+abs: boolean,
+clip: boolean,
+view: boolean,
+};
+
+exporttypeRunningViewTransition={
+finished: Promise<void>,
+ready: Promise<void>,
+ ...
+};
+
+interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
+ _pseudo: string;
+ _name: string;
+}
+
+functionViewTransitionPseudoElement(
+this: ViewTransitionPseudoElementType,
+pseudo: string,
+name: string,
+){
+// TODO: Get the owner document from the root container.
+this._pseudo=pseudo;
+this._name=name;
+}
+
+exporttypeViewTransitionInstance=null|{
+name: string,
+old: mixin$Animatable,
+new: mixin$Animatable,
+ ...
+};
+
+exportfunctionrestoreViewTransitionName(
+instance: Instance,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('restoreViewTransitionName is not implemented');
+}
+}
+
+// Cancel the old and new snapshots of viewTransitionName
+exportfunctioncancelViewTransitionName(
+instance: Instance,
+oldName: string,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('cancelViewTransitionName is not implemented');
+}
+}
+
+exportfunctioncancelRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctionrestoreRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctioncloneRootViewTransitionContainer(
+rootContainer: Container,
+): Instance{
+if(__DEV__){
+console.warn('cloneRootViewTransitionContainer is not implemented');
+}
+// $FlowFixMe[incompatible-return] Return empty stub
+returnnull;
+}
+
+exportfunctionremoveRootViewTransitionClone(
+rootContainer: Container,
+clone: Instance,
+): void{
+if(__DEV__){
+console.warn('removeRootViewTransitionClone is not implemented');
+}
+}
+
+exportfunctionmeasureInstance(instance: Instance): InstanceMeasurement{
+if(__DEV__){
+console.warn('measureInstance is not implemented');
+}
+return{
+rect: {
+x: 0,
+y: 0,
+width: 0,
+height: 0,
+},
+abs: false,
+clip: false,
+// TODO: properly calculate whether instance is in viewport
+view: true,
+};
+}
+
+exportfunctionmeasureClonedInstance(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,
+};
+}
+
+exportfunctionwasInstanceInViewport(
+measurement: InstanceMeasurement,
+): boolean{
+returnmeasurement.view;
+}
+
+exportfunctionhasInstanceChanged(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceChanged is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionhasInstanceAffectedParent(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceAffectedParent is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionstartGestureTransition(
+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{
+finished: Promise.resolve(),
+ready: Promise.resolve(),
+};
+}
+
+exportfunctionstopViewTransition(transition: RunningViewTransition): void{
+if(__DEV__){
+console.warn('stopViewTransition is not implemented');
+}
+}
+
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+): void{
+ transition.finished.finally(callback);
+}
+
+exportfunctioncreateViewTransitionInstance(
+name: string,
+): ViewTransitionInstance{
+return{
+ name,
+old: new(ViewTransitionPseudoElement: any)('old',name),
+new: new(ViewTransitionPseudoElement: any)('new',name),
+};
+}
+
+exportfunctionapplyViewTransitionName(
+instance: Instance,
+name: string,
+className: ?string,
+): void{
+// add view-transition-name to things that might animate for browser
+fabricApplyViewTransitionName(instance.node,name,className);
+}
+
+exportfunctionstartViewTransition(
+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.
+returnnull;
+}
+
+transition.ready.then(()=>{
+spawnedWorkCallback();
+});
+
+transition.finished.finally(()=>{
+passiveCallback();
+});
+
+returntransition;
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -25,6 +25,7 @@ import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 importtype{TransitionTypes}from'react/src/ReactTransitionType';
 importtypeof*asHostConfigfrom'react-reconciler/src/ReactFiberConfig';
 importtypeof*asReactFiberConfigWithNoMutationfrom'react-reconciler/src/ReactFiberConfigWithNoMutation';
+importtypeof*asReactFiberConfigWithNoViewTransitionfrom'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
 importtypeof*asReactFiberConfigWithNoPersistencefrom'react-reconciler/src/ReactFiberConfigWithNoPersistence';
 
 importtypeof*asReconcilerAPIfrom'react-reconciler/src/ReactFiberReconciler';
@@ -709,7 +710,8 @@ function createReactNoop(
 
 constmutationHostConfig: Pick<
 HostConfig,
-$Keys<ReactFiberConfigWithNoMutation>,
+|$Keys<ReactFiberConfigWithNoMutation>
+|$Keys<ReactFiberConfigWithNoViewTransition>,
 >={
 supportsMutation: true,
 

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

@@ -166,6 +166,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';
 
 exportfunctionappendInitialChild(
 parentInstance: Instance,

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

@@ -0,0 +1,261 @@
+/**
+ * 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
+ */
+
+importtype{TransitionTypes}from'react/src/ReactTransitionType';
+importtype{
+Instance,
+Props,
+Container,
+SuspendedState,
+GestureTimeline,
+}from'./ReactFiberConfigFabric';
+
+const{
+applyViewTransitionName: fabricApplyViewTransitionName,
+startViewTransition: fabricStartViewTransition,
+}=nativeFabricUIManager;
+
+exporttypeInstanceMeasurement={
+rect: {x: number,y: number,width: number,height: number},
+abs: boolean,
+clip: boolean,
+view: boolean,
+};
+
+exporttypeRunningViewTransition={
+finished: Promise<void>,
+ready: Promise<void>,
+ ...
+};
+
+interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
+ _pseudo: string;
+ _name: string;
+}
+
+functionViewTransitionPseudoElement(
+this: ViewTransitionPseudoElementType,
+pseudo: string,
+name: string,
+){
+// TODO: Get the owner document from the root container.
+this._pseudo=pseudo;
+this._name=name;
+}
+
+exporttypeViewTransitionInstance=null|{
+name: string,
+old: mixin$Animatable,
+new: mixin$Animatable,
+ ...
+};
+
+exportfunctionrestoreViewTransitionName(
+instance: Instance,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('restoreViewTransitionName is not implemented');
+}
+}
+
+// Cancel the old and new snapshots of viewTransitionName
+exportfunctioncancelViewTransitionName(
+instance: Instance,
+oldName: string,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('cancelViewTransitionName is not implemented');
+}
+}
+
+exportfunctioncancelRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctionrestoreRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctioncloneRootViewTransitionContainer(
+rootContainer: Container,
+): Instance{
+if(__DEV__){
+console.warn('cloneRootViewTransitionContainer is not implemented');
+}
+// $FlowFixMe[incompatible-return] Return empty stub
+returnnull;
+}
+
+exportfunctionremoveRootViewTransitionClone(
+rootContainer: Container,
+clone: Instance,
+): void{
+if(__DEV__){
+console.warn('removeRootViewTransitionClone is not implemented');
+}
+}
+
+exportfunctionmeasureInstance(instance: Instance): InstanceMeasurement{
+if(__DEV__){
+console.warn('measureInstance is not implemented');
+}
+return{
+rect: {
+x: 0,
+y: 0,
+width: 0,
+height: 0,
+},
+abs: false,
+clip: false,
+// TODO: properly calculate whether instance is in viewport
+view: true,
+};
+}
+
+exportfunctionmeasureClonedInstance(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,
+};
+}
+
+exportfunctionwasInstanceInViewport(
+measurement: InstanceMeasurement,
+): boolean{
+returnmeasurement.view;
+}
+
+exportfunctionhasInstanceChanged(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceChanged is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionhasInstanceAffectedParent(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceAffectedParent is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionstartGestureTransition(
+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{
+finished: Promise.resolve(),
+ready: Promise.resolve(),
+};
+}
+
+exportfunctionstopViewTransition(transition: RunningViewTransition): void{
+if(__DEV__){
+console.warn('stopViewTransition is not implemented');
+}
+}
+
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+): void{
+ transition.finished.finally(callback);
+}
+
+exportfunctioncreateViewTransitionInstance(
+name: string,
+): ViewTransitionInstance{
+return{
+ name,
+old: new(ViewTransitionPseudoElement: any)('old',name),
+new: new(ViewTransitionPseudoElement: any)('new',name),
+};
+}
+
+exportfunctionapplyViewTransitionName(
+instance: Instance,
+name: string,
+className: ?string,
+): void{
+// add view-transition-name to things that might animate for browser
+fabricApplyViewTransitionName(instance.node,name,className);
+}
+
+exportfunctionstartViewTransition(
+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.
+returnnull;
+}
+
+transition.ready.then(()=>{
+spawnedWorkCallback();
+});
+
+transition.finished.finally(()=>{
+passiveCallback();
+});
+
+returntransition;
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -25,6 +25,7 @@ import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 importtype{TransitionTypes}from'react/src/ReactTransitionType';
 importtypeof*asHostConfigfrom'react-reconciler/src/ReactFiberConfig';
 importtypeof*asReactFiberConfigWithNoMutationfrom'react-reconciler/src/ReactFiberConfigWithNoMutation';
+importtypeof*asReactFiberConfigWithNoViewTransitionfrom'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
 importtypeof*asReactFiberConfigWithNoPersistencefrom'react-reconciler/src/ReactFiberConfigWithNoPersistence';
 
 importtypeof*asReconcilerAPIfrom'react-reconciler/src/ReactFiberReconciler';
@@ -709,7 +710,8 @@ function createReactNoop(
 
 constmutationHostConfig: Pick<
 HostConfig,
-$Keys<ReactFiberConfigWithNoMutation>,
+|$Keys<ReactFiberConfigWithNoMutation>
+|$Keys<ReactFiberConfigWithNoViewTransition>,
 >={
 supportsMutation: true,
 

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

@@ -166,6 +166,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';
 
 exportfunctionappendInitialChild(
 parentInstance: Instance,

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

@@ -0,0 +1,261 @@
+/**
+ * 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
+ */
+
+importtype{TransitionTypes}from'react/src/ReactTransitionType';
+importtype{
+Instance,
+Props,
+Container,
+SuspendedState,
+GestureTimeline,
+}from'./ReactFiberConfigFabric';
+
+const{
+applyViewTransitionName: fabricApplyViewTransitionName,
+startViewTransition: fabricStartViewTransition,
+}=nativeFabricUIManager;
+
+exporttypeInstanceMeasurement={
+rect: {x: number,y: number,width: number,height: number},
+abs: boolean,
+clip: boolean,
+view: boolean,
+};
+
+exporttypeRunningViewTransition={
+finished: Promise<void>,
+ready: Promise<void>,
+ ...
+};
+
+interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
+ _pseudo: string;
+ _name: string;
+}
+
+functionViewTransitionPseudoElement(
+this: ViewTransitionPseudoElementType,
+pseudo: string,
+name: string,
+){
+// TODO: Get the owner document from the root container.
+this._pseudo=pseudo;
+this._name=name;
+}
+
+exporttypeViewTransitionInstance=null|{
+name: string,
+old: mixin$Animatable,
+new: mixin$Animatable,
+ ...
+};
+
+exportfunctionrestoreViewTransitionName(
+instance: Instance,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('restoreViewTransitionName is not implemented');
+}
+}
+
+// Cancel the old and new snapshots of viewTransitionName
+exportfunctioncancelViewTransitionName(
+instance: Instance,
+oldName: string,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('cancelViewTransitionName is not implemented');
+}
+}
+
+exportfunctioncancelRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctionrestoreRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctioncloneRootViewTransitionContainer(
+rootContainer: Container,
+): Instance{
+if(__DEV__){
+console.warn('cloneRootViewTransitionContainer is not implemented');
+}
+// $FlowFixMe[incompatible-return] Return empty stub
+returnnull;
+}
+
+exportfunctionremoveRootViewTransitionClone(
+rootContainer: Container,
+clone: Instance,
+): void{
+if(__DEV__){
+console.warn('removeRootViewTransitionClone is not implemented');
+}
+}
+
+exportfunctionmeasureInstance(instance: Instance): InstanceMeasurement{
+if(__DEV__){
+console.warn('measureInstance is not implemented');
+}
+return{
+rect: {
+x: 0,
+y: 0,
+width: 0,
+height: 0,
+},
+abs: false,
+clip: false,
+// TODO: properly calculate whether instance is in viewport
+view: true,
+};
+}
+
+exportfunctionmeasureClonedInstance(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,
+};
+}
+
+exportfunctionwasInstanceInViewport(
+measurement: InstanceMeasurement,
+): boolean{
+returnmeasurement.view;
+}
+
+exportfunctionhasInstanceChanged(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceChanged is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionhasInstanceAffectedParent(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceAffectedParent is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionstartGestureTransition(
+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{
+finished: Promise.resolve(),
+ready: Promise.resolve(),
+};
+}
+
+exportfunctionstopViewTransition(transition: RunningViewTransition): void{
+if(__DEV__){
+console.warn('stopViewTransition is not implemented');
+}
+}
+
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+): void{
+ transition.finished.finally(callback);
+}
+
+exportfunctioncreateViewTransitionInstance(
+name: string,
+): ViewTransitionInstance{
+return{
+ name,
+old: new(ViewTransitionPseudoElement: any)('old',name),
+new: new(ViewTransitionPseudoElement: any)('new',name),
+};
+}
+
+exportfunctionapplyViewTransitionName(
+instance: Instance,
+name: string,
+className: ?string,
+): void{
+// add view-transition-name to things that might animate for browser
+fabricApplyViewTransitionName(instance.node,name,className);
+}
+
+exportfunctionstartViewTransition(
+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.
+returnnull;
+}
+
+transition.ready.then(()=>{
+spawnedWorkCallback();
+});
+
+transition.finished.finally(()=>{
+passiveCallback();
+});
+
+returntransition;
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -25,6 +25,7 @@ import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 importtype{TransitionTypes}from'react/src/ReactTransitionType';
 importtypeof*asHostConfigfrom'react-reconciler/src/ReactFiberConfig';
 importtypeof*asReactFiberConfigWithNoMutationfrom'react-reconciler/src/ReactFiberConfigWithNoMutation';
+importtypeof*asReactFiberConfigWithNoViewTransitionfrom'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
 importtypeof*asReactFiberConfigWithNoPersistencefrom'react-reconciler/src/ReactFiberConfigWithNoPersistence';
 
 importtypeof*asReconcilerAPIfrom'react-reconciler/src/ReactFiberReconciler';
@@ -709,7 +710,8 @@ function createReactNoop(
 
 constmutationHostConfig: Pick<
 HostConfig,
-$Keys<ReactFiberConfigWithNoMutation>,
+|$Keys<ReactFiberConfigWithNoMutation>
+|$Keys<ReactFiberConfigWithNoViewTransition>,
 >={
 supportsMutation: true,
 

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

@@ -166,6 +166,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';
 
 exportfunctionappendInitialChild(
 parentInstance: Instance,

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

@@ -0,0 +1,261 @@
+/**
+ * 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
+ */
+
+importtype{TransitionTypes}from'react/src/ReactTransitionType';
+importtype{
+Instance,
+Props,
+Container,
+SuspendedState,
+GestureTimeline,
+}from'./ReactFiberConfigFabric';
+
+const{
+applyViewTransitionName: fabricApplyViewTransitionName,
+startViewTransition: fabricStartViewTransition,
+}=nativeFabricUIManager;
+
+exporttypeInstanceMeasurement={
+rect: {x: number,y: number,width: number,height: number},
+abs: boolean,
+clip: boolean,
+view: boolean,
+};
+
+exporttypeRunningViewTransition={
+finished: Promise<void>,
+ready: Promise<void>,
+ ...
+};
+
+interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
+ _pseudo: string;
+ _name: string;
+}
+
+functionViewTransitionPseudoElement(
+this: ViewTransitionPseudoElementType,
+pseudo: string,
+name: string,
+){
+// TODO: Get the owner document from the root container.
+this._pseudo=pseudo;
+this._name=name;
+}
+
+exporttypeViewTransitionInstance=null|{
+name: string,
+old: mixin$Animatable,
+new: mixin$Animatable,
+ ...
+};
+
+exportfunctionrestoreViewTransitionName(
+instance: Instance,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('restoreViewTransitionName is not implemented');
+}
+}
+
+// Cancel the old and new snapshots of viewTransitionName
+exportfunctioncancelViewTransitionName(
+instance: Instance,
+oldName: string,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('cancelViewTransitionName is not implemented');
+}
+}
+
+exportfunctioncancelRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctionrestoreRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctioncloneRootViewTransitionContainer(
+rootContainer: Container,
+): Instance{
+if(__DEV__){
+console.warn('cloneRootViewTransitionContainer is not implemented');
+}
+// $FlowFixMe[incompatible-return] Return empty stub
+returnnull;
+}
+
+exportfunctionremoveRootViewTransitionClone(
+rootContainer: Container,
+clone: Instance,
+): void{
+if(__DEV__){
+console.warn('removeRootViewTransitionClone is not implemented');
+}
+}
+
+exportfunctionmeasureInstance(instance: Instance): InstanceMeasurement{
+if(__DEV__){
+console.warn('measureInstance is not implemented');
+}
+return{
+rect: {
+x: 0,
+y: 0,
+width: 0,
+height: 0,
+},
+abs: false,
+clip: false,
+// TODO: properly calculate whether instance is in viewport
+view: true,
+};
+}
+
+exportfunctionmeasureClonedInstance(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,
+};
+}
+
+exportfunctionwasInstanceInViewport(
+measurement: InstanceMeasurement,
+): boolean{
+returnmeasurement.view;
+}
+
+exportfunctionhasInstanceChanged(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceChanged is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionhasInstanceAffectedParent(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceAffectedParent is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionstartGestureTransition(
+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{
+finished: Promise.resolve(),
+ready: Promise.resolve(),
+};
+}
+
+exportfunctionstopViewTransition(transition: RunningViewTransition): void{
+if(__DEV__){
+console.warn('stopViewTransition is not implemented');
+}
+}
+
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+): void{
+ transition.finished.finally(callback);
+}
+
+exportfunctioncreateViewTransitionInstance(
+name: string,
+): ViewTransitionInstance{
+return{
+ name,
+old: new(ViewTransitionPseudoElement: any)('old',name),
+new: new(ViewTransitionPseudoElement: any)('new',name),
+};
+}
+
+exportfunctionapplyViewTransitionName(
+instance: Instance,
+name: string,
+className: ?string,
+): void{
+// add view-transition-name to things that might animate for browser
+fabricApplyViewTransitionName(instance.node,name,className);
+}
+
+exportfunctionstartViewTransition(
+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.
+returnnull;
+}
+
+transition.ready.then(()=>{
+spawnedWorkCallback();
+});
+
+transition.finished.finally(()=>{
+passiveCallback();
+});
+
+returntransition;
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -25,6 +25,7 @@ import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 importtype{TransitionTypes}from'react/src/ReactTransitionType';
 importtypeof*asHostConfigfrom'react-reconciler/src/ReactFiberConfig';
 importtypeof*asReactFiberConfigWithNoMutationfrom'react-reconciler/src/ReactFiberConfigWithNoMutation';
+importtypeof*asReactFiberConfigWithNoViewTransitionfrom'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
 importtypeof*asReactFiberConfigWithNoPersistencefrom'react-reconciler/src/ReactFiberConfigWithNoPersistence';
 
 importtypeof*asReconcilerAPIfrom'react-reconciler/src/ReactFiberReconciler';
@@ -709,7 +710,8 @@ function createReactNoop(
 
 constmutationHostConfig: Pick<
 HostConfig,
-$Keys<ReactFiberConfigWithNoMutation>,
+|$Keys<ReactFiberConfigWithNoMutation>
+|$Keys<ReactFiberConfigWithNoViewTransition>,
 >={
 supportsMutation: true,
 

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

@@ -166,6 +166,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';
 
 exportfunctionappendInitialChild(
 parentInstance: Instance,

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

@@ -0,0 +1,261 @@
+/**
+ * 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
+ */
+
+importtype{TransitionTypes}from'react/src/ReactTransitionType';
+importtype{
+Instance,
+Props,
+Container,
+SuspendedState,
+GestureTimeline,
+}from'./ReactFiberConfigFabric';
+
+const{
+applyViewTransitionName: fabricApplyViewTransitionName,
+startViewTransition: fabricStartViewTransition,
+}=nativeFabricUIManager;
+
+exporttypeInstanceMeasurement={
+rect: {x: number,y: number,width: number,height: number},
+abs: boolean,
+clip: boolean,
+view: boolean,
+};
+
+exporttypeRunningViewTransition={
+finished: Promise<void>,
+ready: Promise<void>,
+ ...
+};
+
+interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
+ _pseudo: string;
+ _name: string;
+}
+
+functionViewTransitionPseudoElement(
+this: ViewTransitionPseudoElementType,
+pseudo: string,
+name: string,
+){
+// TODO: Get the owner document from the root container.
+this._pseudo=pseudo;
+this._name=name;
+}
+
+exporttypeViewTransitionInstance=null|{
+name: string,
+old: mixin$Animatable,
+new: mixin$Animatable,
+ ...
+};
+
+exportfunctionrestoreViewTransitionName(
+instance: Instance,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('restoreViewTransitionName is not implemented');
+}
+}
+
+// Cancel the old and new snapshots of viewTransitionName
+exportfunctioncancelViewTransitionName(
+instance: Instance,
+oldName: string,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('cancelViewTransitionName is not implemented');
+}
+}
+
+exportfunctioncancelRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctionrestoreRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctioncloneRootViewTransitionContainer(
+rootContainer: Container,
+): Instance{
+if(__DEV__){
+console.warn('cloneRootViewTransitionContainer is not implemented');
+}
+// $FlowFixMe[incompatible-return] Return empty stub
+returnnull;
+}
+
+exportfunctionremoveRootViewTransitionClone(
+rootContainer: Container,
+clone: Instance,
+): void{
+if(__DEV__){
+console.warn('removeRootViewTransitionClone is not implemented');
+}
+}
+
+exportfunctionmeasureInstance(instance: Instance): InstanceMeasurement{
+if(__DEV__){
+console.warn('measureInstance is not implemented');
+}
+return{
+rect: {
+x: 0,
+y: 0,
+width: 0,
+height: 0,
+},
+abs: false,
+clip: false,
+// TODO: properly calculate whether instance is in viewport
+view: true,
+};
+}
+
+exportfunctionmeasureClonedInstance(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,
+};
+}
+
+exportfunctionwasInstanceInViewport(
+measurement: InstanceMeasurement,
+): boolean{
+returnmeasurement.view;
+}
+
+exportfunctionhasInstanceChanged(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceChanged is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionhasInstanceAffectedParent(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceAffectedParent is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionstartGestureTransition(
+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{
+finished: Promise.resolve(),
+ready: Promise.resolve(),
+};
+}
+
+exportfunctionstopViewTransition(transition: RunningViewTransition): void{
+if(__DEV__){
+console.warn('stopViewTransition is not implemented');
+}
+}
+
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+): void{
+ transition.finished.finally(callback);
+}
+
+exportfunctioncreateViewTransitionInstance(
+name: string,
+): ViewTransitionInstance{
+return{
+ name,
+old: new(ViewTransitionPseudoElement: any)('old',name),
+new: new(ViewTransitionPseudoElement: any)('new',name),
+};
+}
+
+exportfunctionapplyViewTransitionName(
+instance: Instance,
+name: string,
+className: ?string,
+): void{
+// add view-transition-name to things that might animate for browser
+fabricApplyViewTransitionName(instance.node,name,className);
+}
+
+exportfunctionstartViewTransition(
+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.
+returnnull;
+}
+
+transition.ready.then(()=>{
+spawnedWorkCallback();
+});
+
+transition.finished.finally(()=>{
+passiveCallback();
+});
+
+returntransition;
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -25,6 +25,7 @@ import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 importtype{TransitionTypes}from'react/src/ReactTransitionType';
 importtypeof*asHostConfigfrom'react-reconciler/src/ReactFiberConfig';
 importtypeof*asReactFiberConfigWithNoMutationfrom'react-reconciler/src/ReactFiberConfigWithNoMutation';
+importtypeof*asReactFiberConfigWithNoViewTransitionfrom'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
 importtypeof*asReactFiberConfigWithNoPersistencefrom'react-reconciler/src/ReactFiberConfigWithNoPersistence';
 
 importtypeof*asReconcilerAPIfrom'react-reconciler/src/ReactFiberReconciler';
@@ -709,7 +710,8 @@ function createReactNoop(
 
 constmutationHostConfig: Pick<
 HostConfig,
-$Keys<ReactFiberConfigWithNoMutation>,
+|$Keys<ReactFiberConfigWithNoMutation>
+|$Keys<ReactFiberConfigWithNoViewTransition>,
 >={
 supportsMutation: true,
 

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

@@ -166,6 +166,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';
 
 exportfunctionappendInitialChild(
 parentInstance: Instance,

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

@@ -0,0 +1,261 @@
+/**
+ * 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
+ */
+
+importtype{TransitionTypes}from'react/src/ReactTransitionType';
+importtype{
+Instance,
+Props,
+Container,
+SuspendedState,
+GestureTimeline,
+}from'./ReactFiberConfigFabric';
+
+const{
+applyViewTransitionName: fabricApplyViewTransitionName,
+startViewTransition: fabricStartViewTransition,
+}=nativeFabricUIManager;
+
+exporttypeInstanceMeasurement={
+rect: {x: number,y: number,width: number,height: number},
+abs: boolean,
+clip: boolean,
+view: boolean,
+};
+
+exporttypeRunningViewTransition={
+finished: Promise<void>,
+ready: Promise<void>,
+ ...
+};
+
+interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
+ _pseudo: string;
+ _name: string;
+}
+
+functionViewTransitionPseudoElement(
+this: ViewTransitionPseudoElementType,
+pseudo: string,
+name: string,
+){
+// TODO: Get the owner document from the root container.
+this._pseudo=pseudo;
+this._name=name;
+}
+
+exporttypeViewTransitionInstance=null|{
+name: string,
+old: mixin$Animatable,
+new: mixin$Animatable,
+ ...
+};
+
+exportfunctionrestoreViewTransitionName(
+instance: Instance,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('restoreViewTransitionName is not implemented');
+}
+}
+
+// Cancel the old and new snapshots of viewTransitionName
+exportfunctioncancelViewTransitionName(
+instance: Instance,
+oldName: string,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('cancelViewTransitionName is not implemented');
+}
+}
+
+exportfunctioncancelRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctionrestoreRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctioncloneRootViewTransitionContainer(
+rootContainer: Container,
+): Instance{
+if(__DEV__){
+console.warn('cloneRootViewTransitionContainer is not implemented');
+}
+// $FlowFixMe[incompatible-return] Return empty stub
+returnnull;
+}
+
+exportfunctionremoveRootViewTransitionClone(
+rootContainer: Container,
+clone: Instance,
+): void{
+if(__DEV__){
+console.warn('removeRootViewTransitionClone is not implemented');
+}
+}
+
+exportfunctionmeasureInstance(instance: Instance): InstanceMeasurement{
+if(__DEV__){
+console.warn('measureInstance is not implemented');
+}
+return{
+rect: {
+x: 0,
+y: 0,
+width: 0,
+height: 0,
+},
+abs: false,
+clip: false,
+// TODO: properly calculate whether instance is in viewport
+view: true,
+};
+}
+
+exportfunctionmeasureClonedInstance(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,
+};
+}
+
+exportfunctionwasInstanceInViewport(
+measurement: InstanceMeasurement,
+): boolean{
+returnmeasurement.view;
+}
+
+exportfunctionhasInstanceChanged(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceChanged is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionhasInstanceAffectedParent(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceAffectedParent is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionstartGestureTransition(
+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{
+finished: Promise.resolve(),
+ready: Promise.resolve(),
+};
+}
+
+exportfunctionstopViewTransition(transition: RunningViewTransition): void{
+if(__DEV__){
+console.warn('stopViewTransition is not implemented');
+}
+}
+
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+): void{
+ transition.finished.finally(callback);
+}
+
+exportfunctioncreateViewTransitionInstance(
+name: string,
+): ViewTransitionInstance{
+return{
+ name,
+old: new(ViewTransitionPseudoElement: any)('old',name),
+new: new(ViewTransitionPseudoElement: any)('new',name),
+};
+}
+
+exportfunctionapplyViewTransitionName(
+instance: Instance,
+name: string,
+className: ?string,
+): void{
+// add view-transition-name to things that might animate for browser
+fabricApplyViewTransitionName(instance.node,name,className);
+}
+
+exportfunctionstartViewTransition(
+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.
+returnnull;
+}
+
+transition.ready.then(()=>{
+spawnedWorkCallback();
+});
+
+transition.finished.finally(()=>{
+passiveCallback();
+});
+
+returntransition;
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -25,6 +25,7 @@ import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 importtype{TransitionTypes}from'react/src/ReactTransitionType';
 importtypeof*asHostConfigfrom'react-reconciler/src/ReactFiberConfig';
 importtypeof*asReactFiberConfigWithNoMutationfrom'react-reconciler/src/ReactFiberConfigWithNoMutation';
+importtypeof*asReactFiberConfigWithNoViewTransitionfrom'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
 importtypeof*asReactFiberConfigWithNoPersistencefrom'react-reconciler/src/ReactFiberConfigWithNoPersistence';
 
 importtypeof*asReconcilerAPIfrom'react-reconciler/src/ReactFiberReconciler';
@@ -709,7 +710,8 @@ function createReactNoop(
 
 constmutationHostConfig: Pick<
 HostConfig,
-$Keys<ReactFiberConfigWithNoMutation>,
+|$Keys<ReactFiberConfigWithNoMutation>
+|$Keys<ReactFiberConfigWithNoViewTransition>,
 >={
 supportsMutation: true,
 

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

@@ -166,6 +166,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';
 
 exportfunctionappendInitialChild(
 parentInstance: Instance,

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

@@ -0,0 +1,261 @@
+/**
+ * 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
+ */
+
+importtype{TransitionTypes}from'react/src/ReactTransitionType';
+importtype{
+Instance,
+Props,
+Container,
+SuspendedState,
+GestureTimeline,
+}from'./ReactFiberConfigFabric';
+
+const{
+applyViewTransitionName: fabricApplyViewTransitionName,
+startViewTransition: fabricStartViewTransition,
+}=nativeFabricUIManager;
+
+exporttypeInstanceMeasurement={
+rect: {x: number,y: number,width: number,height: number},
+abs: boolean,
+clip: boolean,
+view: boolean,
+};
+
+exporttypeRunningViewTransition={
+finished: Promise<void>,
+ready: Promise<void>,
+ ...
+};
+
+interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
+ _pseudo: string;
+ _name: string;
+}
+
+functionViewTransitionPseudoElement(
+this: ViewTransitionPseudoElementType,
+pseudo: string,
+name: string,
+){
+// TODO: Get the owner document from the root container.
+this._pseudo=pseudo;
+this._name=name;
+}
+
+exporttypeViewTransitionInstance=null|{
+name: string,
+old: mixin$Animatable,
+new: mixin$Animatable,
+ ...
+};
+
+exportfunctionrestoreViewTransitionName(
+instance: Instance,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('restoreViewTransitionName is not implemented');
+}
+}
+
+// Cancel the old and new snapshots of viewTransitionName
+exportfunctioncancelViewTransitionName(
+instance: Instance,
+oldName: string,
+props: Props,
+): void{
+if(__DEV__){
+console.warn('cancelViewTransitionName is not implemented');
+}
+}
+
+exportfunctioncancelRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctionrestoreRootViewTransitionName(rootContainer: Container): void{
+// No-op
+}
+
+exportfunctioncloneRootViewTransitionContainer(
+rootContainer: Container,
+): Instance{
+if(__DEV__){
+console.warn('cloneRootViewTransitionContainer is not implemented');
+}
+// $FlowFixMe[incompatible-return] Return empty stub
+returnnull;
+}
+
+exportfunctionremoveRootViewTransitionClone(
+rootContainer: Container,
+clone: Instance,
+): void{
+if(__DEV__){
+console.warn('removeRootViewTransitionClone is not implemented');
+}
+}
+
+exportfunctionmeasureInstance(instance: Instance): InstanceMeasurement{
+if(__DEV__){
+console.warn('measureInstance is not implemented');
+}
+return{
+rect: {
+x: 0,
+y: 0,
+width: 0,
+height: 0,
+},
+abs: false,
+clip: false,
+// TODO: properly calculate whether instance is in viewport
+view: true,
+};
+}
+
+exportfunctionmeasureClonedInstance(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,
+};
+}
+
+exportfunctionwasInstanceInViewport(
+measurement: InstanceMeasurement,
+): boolean{
+returnmeasurement.view;
+}
+
+exportfunctionhasInstanceChanged(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceChanged is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionhasInstanceAffectedParent(
+oldMeasurement: InstanceMeasurement,
+newMeasurement: InstanceMeasurement,
+): boolean{
+if(__DEV__){
+console.warn('hasInstanceAffectedParent is not implemented');
+}
+returnfalse;
+}
+
+exportfunctionstartGestureTransition(
+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{
+finished: Promise.resolve(),
+ready: Promise.resolve(),
+};
+}
+
+exportfunctionstopViewTransition(transition: RunningViewTransition): void{
+if(__DEV__){
+console.warn('stopViewTransition is not implemented');
+}
+}
+
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+): void{
+ transition.finished.finally(callback);
+}
+
+exportfunctioncreateViewTransitionInstance(
+name: string,
+): ViewTransitionInstance{
+return{
+ name,
+old: new(ViewTransitionPseudoElement: any)('old',name),
+new: new(ViewTransitionPseudoElement: any)('new',name),
+};
+}
+
+exportfunctionapplyViewTransitionName(
+instance: Instance,
+name: string,
+className: ?string,
+): void{
+// add view-transition-name to things that might animate for browser
+fabricApplyViewTransitionName(instance.node,name,className);
+}
+
+exportfunctionstartViewTransition(
+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.
+returnnull;
+}
+
+transition.ready.then(()=>{
+spawnedWorkCallback();
+});
+
+transition.finished.finally(()=>{
+passiveCallback();
+});
+
+returntransition;
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -25,6 +25,7 @@ import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 importtype{TransitionTypes}from'react/src/ReactTransitionType';
 importtypeof*asHostConfigfrom'react-reconciler/src/ReactFiberConfig';
 importtypeof*asReactFiberConfigWithNoMutationfrom'react-reconciler/src/ReactFiberConfigWithNoMutation';
+importtypeof*asReactFiberConfigWithNoViewTransitionfrom'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
 importtypeof*asReactFiberConfigWithNoPersistencefrom'react-reconciler/src/ReactFiberConfigWithNoPersistence';
 
 importtypeof*asReconcilerAPIfrom'react-reconciler/src/ReactFiberReconciler';
@@ -709,7 +710,8 @@ function createReactNoop(
 
 constmutationHostConfig: Pick<
 HostConfig,
-$Keys<ReactFiberConfigWithNoMutation>,
+|$Keys<ReactFiberConfigWithNoMutation>
+|$Keys<ReactFiberConfigWithNoViewTransition>,
 >={
 supportsMutation: true,