@samitouri / QOS-React-1 / commits / 6a04c369f1

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

Zeya Peng committed Mar 19, 2026 at 17:58 UTC 6a04c369f1b182c6b1d8153f173653c8d59a5965
16 files changed +422 -24
packages/react-native-renderer/src/ReactFiberConfigFabric.js
+1
@@ -166,6 +166,7 @@ export * from 'react-reconciler/src/ReactFiberConfigWithNoScopes';
166 export * from 'react-reconciler/src/ReactFiberConfigWithNoTestSelectors';
167 export * from 'react-reconciler/src/ReactFiberConfigWithNoResources';
168 export * from 'react-reconciler/src/ReactFiberConfigWithNoSingletons';
169 +export * from './ReactFiberConfigFabricWithViewTransition';
170
171 export function appendInitialChild(
172 parentInstance: Instance,
packages/react-native-renderer/src/ReactFiberConfigFabricWithViewTransition.js new
+261
@@ -0,0 +1,261 @@
1 +/**
2 + * Copyright (c) Meta Platforms, Inc. and affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 + */
9 +
10 +import type {TransitionTypes} from 'react/src/ReactTransitionType';
11 +import type {
12 + Instance,
13 + Props,
14 + Container,
15 + SuspendedState,
16 + GestureTimeline,
17 +} from './ReactFiberConfigFabric';
18 +
19 +const {
20 + applyViewTransitionName: fabricApplyViewTransitionName,
21 + startViewTransition: fabricStartViewTransition,
22 +} = nativeFabricUIManager;
23 +
24 +export type InstanceMeasurement = {
25 + rect: {x: number, y: number, width: number, height: number},
26 + abs: boolean,
27 + clip: boolean,
28 + view: boolean,
29 +};
30 +
31 +export type RunningViewTransition = {
32 + finished: Promise<void>,
33 + ready: Promise<void>,
34 + ...
35 +};
36 +
37 +interface ViewTransitionPseudoElementType extends mixin$Animatable {
38 + _pseudo: string;
39 + _name: string;
40 +}
41 +
42 +function ViewTransitionPseudoElement(
43 + this: ViewTransitionPseudoElementType,
44 + pseudo: string,
45 + name: string,
46 +) {
47 + // TODO: Get the owner document from the root container.
48 + this._pseudo = pseudo;
49 + this._name = name;
50 +}
51 +
52 +export type ViewTransitionInstance = null | {
53 + name: string,
54 + old: mixin$Animatable,
55 + new: mixin$Animatable,
56 + ...
57 +};
58 +
59 +export function restoreViewTransitionName(
60 + instance: Instance,
61 + props: Props,
62 +): void {
63 + if (__DEV__) {
64 + console.warn('restoreViewTransitionName is not implemented');
65 + }
66 +}
67 +
68 +// Cancel the old and new snapshots of viewTransitionName
69 +export function cancelViewTransitionName(
70 + instance: Instance,
71 + oldName: string,
72 + props: Props,
73 +): void {
74 + if (__DEV__) {
75 + console.warn('cancelViewTransitionName is not implemented');
76 + }
77 +}
78 +
79 +export function cancelRootViewTransitionName(rootContainer: Container): void {
80 + // No-op
81 +}
82 +
83 +export function restoreRootViewTransitionName(rootContainer: Container): void {
84 + // No-op
85 +}
86 +
87 +export function cloneRootViewTransitionContainer(
88 + rootContainer: Container,
89 +): Instance {
90 + if (__DEV__) {
91 + console.warn('cloneRootViewTransitionContainer is not implemented');
92 + }
93 + // $FlowFixMe[incompatible-return] Return empty stub
94 + return null;
95 +}
96 +
97 +export function removeRootViewTransitionClone(
98 + rootContainer: Container,
99 + clone: Instance,
100 +): void {
101 + if (__DEV__) {
102 + console.warn('removeRootViewTransitionClone is not implemented');
103 + }
104 +}
105 +
106 +export function measureInstance(instance: Instance): InstanceMeasurement {
107 + if (__DEV__) {
108 + console.warn('measureInstance is not implemented');
109 + }
110 + return {
111 + rect: {
112 + x: 0,
113 + y: 0,
114 + width: 0,
115 + height: 0,
116 + },
117 + abs: false,
118 + clip: false,
119 + // TODO: properly calculate whether instance is in viewport
120 + view: true,
121 + };
122 +}
123 +
124 +export function measureClonedInstance(instance: Instance): InstanceMeasurement {
125 + if (__DEV__) {
126 + console.warn('measureClonedInstance is not implemented');
127 + }
128 + return {
129 + rect: {x: 0, y: 0, width: 0, height: 0},
130 + abs: false,
131 + clip: false,
132 + view: true,
133 + };
134 +}
135 +
136 +export function wasInstanceInViewport(
137 + measurement: InstanceMeasurement,
138 +): boolean {
139 + return measurement.view;
140 +}
141 +
142 +export function hasInstanceChanged(
143 + oldMeasurement: InstanceMeasurement,
144 + newMeasurement: InstanceMeasurement,
145 +): boolean {
146 + if (__DEV__) {
147 + console.warn('hasInstanceChanged is not implemented');
148 + }
149 + return false;
150 +}
151 +
152 +export function hasInstanceAffectedParent(
153 + oldMeasurement: InstanceMeasurement,
154 + newMeasurement: InstanceMeasurement,
155 +): boolean {
156 + if (__DEV__) {
157 + console.warn('hasInstanceAffectedParent is not implemented');
158 + }
159 + return false;
160 +}
161 +
162 +export function startGestureTransition(
163 + suspendedState: null | SuspendedState,
164 + rootContainer: Container,
165 + timeline: GestureTimeline,
166 + rangeStart: number,
167 + rangeEnd: number,
168 + transitionTypes: null | TransitionTypes,
169 + mutationCallback: () => void,
170 + animateCallback: () => void,
171 + errorCallback: (error: mixed) => void,
172 + finishedAnimation: () => void,
173 +): RunningViewTransition {
174 + if (__DEV__) {
175 + console.warn('startGestureTransition is not implemented');
176 + }
177 + return {
178 + finished: Promise.resolve(),
179 + ready: Promise.resolve(),
180 + };
181 +}
182 +
183 +export function stopViewTransition(transition: RunningViewTransition): void {
184 + if (__DEV__) {
185 + console.warn('stopViewTransition is not implemented');
186 + }
187 +}
188 +
189 +export function addViewTransitionFinishedListener(
190 + transition: RunningViewTransition,
191 + callback: () => void,
192 +): void {
193 + transition.finished.finally(callback);
194 +}
195 +
196 +export function createViewTransitionInstance(
197 + name: string,
198 +): ViewTransitionInstance {
199 + return {
200 + name,
201 + old: new (ViewTransitionPseudoElement: any)('old', name),
202 + new: new (ViewTransitionPseudoElement: any)('new', name),
203 + };
204 +}
205 +
206 +export function applyViewTransitionName(
207 + instance: Instance,
208 + name: string,
209 + className: ?string,
210 +): void {
211 + // add view-transition-name to things that might animate for browser
212 + fabricApplyViewTransitionName(instance.node, name, className);
213 +}
214 +
215 +export function startViewTransition(
216 + suspendedState: null | SuspendedState,
217 + rootContainer: Container,
218 + transitionTypes: null | TransitionTypes,
219 + mutationCallback: () => void,
220 + layoutCallback: () => void,
221 + afterMutationCallback: () => void,
222 + spawnedWorkCallback: () => void,
223 + passiveCallback: () => mixed,
224 + errorCallback: (error: mixed) => void,
225 + blockedCallback: (name: string) => void,
226 + finishedAnimation: () => void,
227 +): null | RunningViewTransition {
228 + const transition = fabricStartViewTransition(
229 + // mutation
230 + () => {
231 + mutationCallback(); // completeRoot should run here
232 + layoutCallback();
233 + afterMutationCallback();
234 + },
235 + );
236 +
237 + if (transition == null) {
238 + if (__DEV__) {
239 + console.warn(
240 + "startViewTransition didn't kick off transition in Fabric, the ViewTransition ReactNativeFeatureFlag might not be enabled.",
241 + );
242 + }
243 + // Flush remaining work synchronously.
244 + mutationCallback();
245 + layoutCallback();
246 + // Skip afterMutationCallback(). We don't need it since we're not animating.
247 + spawnedWorkCallback();
248 + // Skip passiveCallback(). Spawned work will schedule a task.
249 + return null;
250 + }
251 +
252 + transition.ready.then(() => {
253 + spawnedWorkCallback();
254 + });
255 +
256 + transition.finished.finally(() => {
257 + passiveCallback();
258 + });
259 +
260 + return transition;
261 +}
packages/react-noop-renderer/src/createReactNoop.js
+3 -1
@@ -25,6 +25,7 @@ import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
25 import type {TransitionTypes} from 'react/src/ReactTransitionType';
26 import typeof * as HostConfig from 'react-reconciler/src/ReactFiberConfig';
27 import typeof * as ReactFiberConfigWithNoMutation from 'react-reconciler/src/ReactFiberConfigWithNoMutation';
28 +import typeof * as ReactFiberConfigWithNoViewTransition from 'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
29 import typeof * as ReactFiberConfigWithNoPersistence from 'react-reconciler/src/ReactFiberConfigWithNoPersistence';
30
31 import typeof * as ReconcilerAPI from 'react-reconciler/src/ReactFiberReconciler';
@@ -709,7 +710,8 @@ function createReactNoop(
710
711 const mutationHostConfig: Pick<
712 HostConfig,
712 - $Keys<ReactFiberConfigWithNoMutation>,
713 + | $Keys<ReactFiberConfigWithNoMutation>
714 + | $Keys<ReactFiberConfigWithNoViewTransition>,
715 > = {
716 supportsMutation: true,
717
packages/react-reconciler/src/ReactFiberCommitViewTransitions.js
+95 -2
@@ -46,6 +46,7 @@ import {trackAnimatingTask} from './ReactProfilerTimer';
46 import {
47 enableComponentPerformanceTrack,
48 enableProfilerTimer,
49 + enableViewTransitionForPersistenceMode,
50 } from 'shared/ReactFeatureFlags';
51
52 export let shouldStartViewTransition: boolean = false;
@@ -140,7 +141,46 @@ function applyViewTransitionToHostInstancesRecursive(
141 stopAtNestedViewTransitions: boolean,
142 ): boolean {
143 if (!supportsMutation) {
143 - return false;
144 + if (enableViewTransitionForPersistenceMode) {
145 + while (child !== null) {
146 + if (child.tag === HostComponent) {
147 + const instance: Instance = child.stateNode;
148 + // TODO: calculate whether component is in viewport
149 + shouldStartViewTransition = true;
150 + applyViewTransitionName(
151 + instance,
152 + viewTransitionHostInstanceIdx === 0
153 + ? name
154 + : name + '_' + viewTransitionHostInstanceIdx,
155 + className,
156 + );
157 + viewTransitionHostInstanceIdx++;
158 + } else if (
159 + child.tag === OffscreenComponent &&
160 + child.memoizedState !== null
161 + ) {
162 + // Skip any hidden subtrees. They were or are effectively not there.
163 + } else if (
164 + child.tag === ViewTransitionComponent &&
165 + stopAtNestedViewTransitions
166 + ) {
167 + // Skip any nested view transitions for updates since in that case the
168 + // inner most one is the one that handles the update.
169 + } else {
170 + applyViewTransitionToHostInstancesRecursive(
171 + child.child,
172 + name,
173 + className,
174 + collectMeasurements,
175 + stopAtNestedViewTransitions,
176 + );
177 + }
178 + child = child.sibling;
179 + }
180 + return true;
181 + } else {
182 + return false;
183 + }
184 }
185 let inViewport = false;
186 while (child !== null) {
@@ -649,7 +689,60 @@ function measureViewTransitionHostInstancesRecursive(
689 stopAtNestedViewTransitions: boolean,
690 ): boolean {
691 if (!supportsMutation) {
652 - return true;
692 + if (enableViewTransitionForPersistenceMode) {
693 + while (child !== null) {
694 + if (child.tag === HostComponent) {
695 + const instance: Instance = child.stateNode;
696 + if (
697 + previousMeasurements == null ||
698 + viewTransitionHostInstanceIdx >= previousMeasurements.length
699 + ) {
700 + // If there was an insertion of extra nodes, we have to assume they affected the parent.
701 + // It should have already been marked as an Update due to the mutation.
702 + parentViewTransition.flags |= AffectedParentLayout;
703 + }
704 + // TODO: check if instance is out of viewport
705 + if ((parentViewTransition.flags & Update) !== NoFlags) {
706 + applyViewTransitionName(
707 + instance,
708 + viewTransitionHostInstanceIdx === 0
709 + ? newName
710 + : newName + '_' + viewTransitionHostInstanceIdx,
711 + className,
712 + );
713 + }
714 + // TODO: cancel transition by pushing into viewTransitionCancelableChildren
715 + viewTransitionHostInstanceIdx++;
716 + } else if (
717 + child.tag === OffscreenComponent &&
718 + child.memoizedState !== null
719 + ) {
720 + // Skip any hidden subtrees. They were or are effectively not there.
721 + } else if (
722 + child.tag === ViewTransitionComponent &&
723 + stopAtNestedViewTransitions
724 + ) {
725 + // Skip any nested view transitions for updates since in that case the
726 + // inner most one is the one that handles the update.
727 + // If this inner boundary resized we need to bubble that information up.
728 + parentViewTransition.flags |= child.flags & AffectedParentLayout;
729 + } else {
730 + measureViewTransitionHostInstancesRecursive(
731 + parentViewTransition,
732 + child.child,
733 + newName,
734 + oldName,
735 + className,
736 + previousMeasurements,
737 + stopAtNestedViewTransitions,
738 + );
739 + }
740 + child = child.sibling;
741 + }
742 + return true;
743 + } else {
744 + return false;
745 + }
746 }
747 let inViewport = false;
748 while (child !== null) {
packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js
-20
@@ -37,25 +37,5 @@ export const hideTextInstance = shim;
37 export const unhideInstance = shim;
38 export const unhideTextInstance = shim;
39 export const clearContainer = shim;
40 -export const applyViewTransitionName = shim;
41 -export const restoreViewTransitionName = shim;
42 -export const cancelViewTransitionName = shim;
43 -export const cancelRootViewTransitionName = shim;
44 -export const restoreRootViewTransitionName = shim;
45 -export const cloneRootViewTransitionContainer = shim;
46 -export const removeRootViewTransitionClone = shim;
47 -export type InstanceMeasurement = null;
48 -export const measureInstance = shim;
49 -export const measureClonedInstance = shim;
50 -export const wasInstanceInViewport = shim;
51 -export const hasInstanceChanged = shim;
52 -export const hasInstanceAffectedParent = shim;
53 -export const startViewTransition = shim;
54 -export type RunningViewTransition = null;
55 -export const startGestureTransition = shim;
56 -export const stopViewTransition = shim;
57 -export const addViewTransitionFinishedListener = shim;
58 -export type ViewTransitionInstance = null | {name: string, ...};
59 -export const createViewTransitionInstance = shim;
40 export type GestureTimeline = any;
41 export const getCurrentGestureOffset = shim;
packages/react-reconciler/src/ReactFiberConfigWithNoViewTransition.js new
+41
@@ -0,0 +1,41 @@
1 +/**
2 + * Copyright (c) Meta Platforms, Inc. and affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 + */
9 +
10 +// Renderers that don't support view transitions
11 +// can re-export everything from this module.
12 +
13 +function shim(...args: any): empty {
14 + throw new Error(
15 + 'The current renderer does not support view transitions. ' +
16 + 'This error is likely caused by a bug in React. ' +
17 + 'Please file an issue.',
18 + );
19 +}
20 +
21 +// View Transitions (when unsupported)
22 +export const applyViewTransitionName = shim;
23 +export const restoreViewTransitionName = shim;
24 +export const cancelViewTransitionName = shim;
25 +export const cancelRootViewTransitionName = shim;
26 +export const restoreRootViewTransitionName = shim;
27 +export const cloneRootViewTransitionContainer = shim;
28 +export const removeRootViewTransitionClone = shim;
29 +export type InstanceMeasurement = any;
30 +export const measureInstance = shim;
31 +export const measureClonedInstance = shim;
32 +export const wasInstanceInViewport = shim;
33 +export const hasInstanceChanged = shim;
34 +export const hasInstanceAffectedParent = shim;
35 +export const startViewTransition = shim;
36 +export type RunningViewTransition = any;
37 +export const startGestureTransition = shim;
38 +export const stopViewTransition = shim;
39 +export const addViewTransitionFinishedListener = shim;
40 +export type ViewTransitionInstance = any;
41 +export const createViewTransitionInstance = shim;
packages/shared/ReactFeatureFlags.js
+2
@@ -80,6 +80,8 @@ export const enableTaint = __EXPERIMENTAL__;
80
81 export const enableViewTransition: boolean = true;
82
83 +export const enableViewTransitionForPersistenceMode: boolean = false;
84 +
85 export const enableGestureTransition = __EXPERIMENTAL__;
86
87 export const enableScrollEndPolyfill = __EXPERIMENTAL__;
packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
+1
@@ -26,3 +26,4 @@ export const enableFragmentRefsScrollIntoView = __VARIANT__;
26 export const enableFragmentRefsInstanceHandles = __VARIANT__;
27 export const enableEffectEventMutationPhase = __VARIANT__;
28 export const enableFragmentRefsTextNodes = __VARIANT__;
29 +export const enableViewTransitionForPersistenceMode = __VARIANT__;
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
@@ -28,6 +28,7 @@ export const {
28 enableFragmentRefsScrollIntoView,
29 enableFragmentRefsInstanceHandles,
30 enableFragmentRefsTextNodes,
31 + enableViewTransitionForPersistenceMode,
32 } = dynamicFlags;
33
34 // The rest of the flags are static for better dead code elimination.
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
@@ -59,6 +59,7 @@ export const enableYieldingBeforePassive: boolean = false;
59
60 export const enableThrottledScheduling: boolean = false;
61 export const enableViewTransition: boolean = true;
62 +export const enableViewTransitionForPersistenceMode: boolean = false;
63 export const enableGestureTransition: boolean = false;
64 export const enableScrollEndPolyfill: boolean = true;
65 export const enableSuspenseyImages: boolean = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
@@ -60,6 +60,7 @@ export const enableYieldingBeforePassive: boolean = true;
60
61 export const enableThrottledScheduling: boolean = false;
62 export const enableViewTransition: boolean = true;
63 +export const enableViewTransitionForPersistenceMode: boolean = false;
64 export const enableGestureTransition: boolean = false;
65 export const enableScrollEndPolyfill: boolean = true;
66 export const enableSuspenseyImages: boolean = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
+1
@@ -55,6 +55,7 @@ export const transitionLaneExpirationMs = 5000;
55 export const enableYieldingBeforePassive = false;
56 export const enableThrottledScheduling = false;
57 export const enableViewTransition = true;
58 +export const enableViewTransitionForPersistenceMode = false;
59 export const enableGestureTransition = false;
60 export const enableScrollEndPolyfill = true;
61 export const enableSuspenseyImages = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
@@ -66,6 +66,7 @@ export const enableYieldingBeforePassive: boolean = false;
66
67 export const enableThrottledScheduling: boolean = false;
68 export const enableViewTransition: boolean = true;
69 +export const enableViewTransitionForPersistenceMode: boolean = false;
70 export const enableGestureTransition: boolean = false;
71 export const enableScrollEndPolyfill: boolean = true;
72 export const enableSuspenseyImages: boolean = false;
packages/shared/forks/ReactFeatureFlags.www.js
+2
@@ -98,6 +98,8 @@ export const disableLegacyMode: boolean = true;
98
99 export const enableEagerAlternateStateNodeCleanup: boolean = true;
100
101 +export const enableViewTransitionForPersistenceMode: boolean = false;
102 +
103 export const enableGestureTransition: boolean = false;
104
105 export const enableSuspenseyImages: boolean = false;
scripts/error-codes/codes.json
+2 -1
@@ -567,5 +567,6 @@
567 "579": "Invalid data for bytes stream.",
568 "580": "Server Function has too many bound arguments. Received %s but the limit is %s.",
569 "581": "BigInt is too large. Received %s digits but the limit is %s.",
570 - "582": "Referenced Blob is not a Blob."
570 + "582": "Referenced Blob is not a Blob.",
571 + "583": "The current renderer does not support view transitions. This error is likely caused by a bug in React. Please file an issue."
572 }
scripts/flow/react-native-host-hooks.js
+9
@@ -301,5 +301,14 @@ declare const nativeFabricUIManager: {
301 unstable_ContinuousEventPriority: number,
302 unstable_IdleEventPriority: number,
303 unstable_getCurrentEventPriority: () => number,
304 + applyViewTransitionName: (
305 + node: Object,
306 + name: string,
307 + className: ?string,
308 + ) => void,
309 + startViewTransition: (mutationCallback: () => void) => {
310 + finished: Promise<void>,
311 + ready: Promise<void>,
312 + },
313 ...
314 };