Prevent view flattening for direct host children of ViewTransition

Add finalizeViewTransitionChild renderer config function called during
completeWork for HostComponents that are direct children of a
ViewTransition boundary. Fabric implements it by injecting
collapsable: false to prevent native view flattening. DOM is a no-op.

Uses a stack cursor (viewTransitionCursor) to track whether the current
fiber is inside a ViewTransition — ViewTransition pushes true,
HostComponent pushes false (acting as a boundary).

Author: zeyap

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

@@ -1453,6 +1453,14 @@ function countClientRects(rects: Array<ClientRect>): number {
   return count;
 }
 
+export function finalizeViewTransitionChild(
+  type: string,
+  props: Props,
+): Props {
+  // No-op for DOM. View flattening is a React Native concept.
+  return props;
+}
+
 export function applyViewTransitionName(
   instance: Instance,
   name: string,

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

@@ -204,6 +204,16 @@ export function createViewTransitionInstance(
   };
 }
 
+export function finalizeViewTransitionChild(
+  type: string,
+  props: Props,
+): Props {
+  // Prevent view flattening for direct host children of ViewTransition.
+  // Without this, Fabric's native-side optimization may remove the view
+  // from the platform hierarchy, breaking view transition animations.
+  return Object.assign({}, props, {collapsable: false});
+}
+
 export function applyViewTransitionName(
   instance: Instance,
   name: string,

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -188,6 +188,7 @@ import {shouldError, shouldSuspend} from './ReactFiberReconciler';
 import {
   pushHostContext,
   pushHostContainer,
+  pushViewTransitionContext,
   getRootHostContainer,
 } from './ReactFiberHostContext';
 import {
@@ -3568,6 +3569,10 @@ function updateViewTransition(
   workInProgress: Fiber,
   renderLanes: Lanes,
 ) {
+  // Mark direct host children as being inside a ViewTransition so the renderer
+  // can finalize them (e.g. prevent view flattening in React Native).
+  pushViewTransitionContext(workInProgress);
+
   if (workInProgress.stateNode === null) {
     // We previously reset the work-in-progress.
     // We need to create a new ViewTransitionState instance.
@@ -4140,6 +4145,13 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       }
       // Fallthrough
     }
+    case ViewTransitionComponent: {
+      if (enableViewTransition) {
+        pushViewTransitionContext(workInProgress);
+        break;
+      }
+      // Fallthrough
+    }
   }
   return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
 }

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -127,11 +127,14 @@ import {
   mayResourceSuspendCommit,
   preloadInstance,
   preloadResource,
+  finalizeViewTransitionChild,
 } from './ReactFiberConfig';
 import {
   getRootHostContainer,
   popHostContext,
   getHostContext,
+  getIsInViewTransition,
+  popViewTransitionContext,
   popHostContainer,
 } from './ReactFiberHostContext';
 import {
@@ -1356,16 +1359,25 @@ function completeWork(
     case HostComponent: {
       popHostContext(workInProgress);
       const type = workInProgress.type;
+
+      // After popping, check if this HostComponent is a direct host child
+      // of a ViewTransition. If so, let the renderer finalize the props
+      // (e.g. to prevent view flattening in React Native).
+      let instanceProps = newProps;
+      if (enableViewTransition && getIsInViewTransition()) {
+        instanceProps = finalizeViewTransitionChild(type, instanceProps);
+      }
+
       if (current !== null && workInProgress.stateNode != null) {
         updateHostComponent(
           current,
           workInProgress,
           type,
-          newProps,
+          instanceProps,
           renderLanes,
         );
       } else {
-        if (!newProps) {
+        if (!instanceProps) {
           if (workInProgress.stateNode === null) {
             throw new Error(
               'We must have new props for new mounts. This error is likely ' +
@@ -1397,7 +1409,7 @@ function completeWork(
             finalizeHydratedChildren(
               workInProgress.stateNode,
               type,
-              newProps,
+              instanceProps,
               currentHostContext,
             )
           ) {
@@ -1407,7 +1419,7 @@ function completeWork(
           const rootContainerInstance = getRootHostContainer();
           const instance = createInstance(
             type,
-            newProps,
+            instanceProps,
             rootContainerInstance,
             currentHostContext,
             workInProgress,
@@ -1425,14 +1437,21 @@ function completeWork(
             finalizeInitialChildren(
               instance,
               type,
-              newProps,
+              instanceProps,
               currentHostContext,
             )
           ) {
             markUpdate(workInProgress);
           }
         }
       }
+
+      // Ensure memoizedProps reflects the finalized props so that
+      // future renders diff against the correct props.
+      if (instanceProps !== newProps) {
+        workInProgress.memoizedProps = instanceProps;
+      }
+
       bubbleProperties(workInProgress);
       if (enableViewTransition) {
         // Host Components act as their own View Transitions which doesn't run enter/exit animations.
@@ -2056,6 +2075,7 @@ function completeWork(
     }
     case ViewTransitionComponent: {
       if (enableViewTransition) {
+        popViewTransitionContext(workInProgress);
         // We're a component that might need an exit transition. This flag will
         // bubble up to the parent tree to indicate that there's a child that
         // might need an exit View Transition upon unmount.

packages/react-reconciler/src/ReactFiberConfigWithNoViewTransition.js

@@ -40,3 +40,4 @@ export const stopViewTransition = shim;
 export const addViewTransitionFinishedListener = shim;
 export type ViewTransitionInstance = null | {name: string, ...};
 export const createViewTransitionInstance = shim;
+export const finalizeViewTransitionChild = shim;

packages/react-reconciler/src/ReactFiberHostContext.js

@@ -23,9 +23,12 @@ import {
   NotPendingTransition,
   isPrimaryRenderer,
 } from './ReactFiberConfig';
+import {enableViewTransition} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack';
 
 const contextStackCursor: StackCursor<HostContext | null> = createCursor(null);
+
+const viewTransitionCursor: StackCursor<boolean> = createCursor(false);
 const contextFiberStackCursor: StackCursor<Fiber | null> = createCursor(null);
 const rootInstanceStackCursor: StackCursor<Container | null> =
   createCursor(null);
@@ -93,7 +96,29 @@ function getHostContext(): HostContext {
   return context;
 }
 
+function pushViewTransitionContext(fiber: Fiber): void {
+  if (enableViewTransition) {
+    push(viewTransitionCursor, true, fiber);
+  }
+}
+
+function popViewTransitionContext(fiber: Fiber): void {
+  if (enableViewTransition) {
+    pop(viewTransitionCursor, fiber);
+  }
+}
+
+function getIsInViewTransition(): boolean {
+  return viewTransitionCursor.current;
+}
+
 function pushHostContext(fiber: Fiber): void {
+  // HostComponents act as ViewTransition boundaries. Push false so that
+  // nested HostComponents below this one are not considered direct VT children.
+  if (enableViewTransition) {
+    push(viewTransitionCursor, false, fiber);
+  }
+
   const stateHook: Hook | null = fiber.memoizedState;
   if (stateHook !== null) {
     // Propagate the current state to all the descendents.
@@ -129,6 +154,10 @@ function pushHostContext(fiber: Fiber): void {
 }
 
 function popHostContext(fiber: Fiber): void {
+  if (enableViewTransition) {
+    pop(viewTransitionCursor, fiber);
+  }
+
   if (contextFiberStackCursor.current === fiber) {
     // Do not pop unless this Fiber provided the current context.
     // pushHostContext() only pushes Fibers that provide unique contexts.
@@ -159,10 +188,13 @@ function popHostContext(fiber: Fiber): void {
 
 export {
   getHostContext,
+  getIsInViewTransition,
   getCurrentRootHostContainer,
   getRootHostContainer,
   popHostContainer,
   popHostContext,
   pushHostContainer,
   pushHostContext,
+  pushViewTransitionContext,
+  popViewTransitionContext,
 };

packages/react-reconciler/src/ReactFiberUnwindWork.js

@@ -33,15 +33,21 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
   TracingMarkerComponent,
+  ViewTransitionComponent,
 } from './ReactWorkTags';
 import {DidCapture, NoFlags, ShouldCapture, Update} from './ReactFiberFlags';
 import {NoMode, ProfileMode} from './ReactTypeOfMode';
 import {
   enableProfilerTimer,
   enableTransitionTracing,
+  enableViewTransition,
 } from 'shared/ReactFeatureFlags';
 
-import {popHostContainer, popHostContext} from './ReactFiberHostContext';
+import {
+  popHostContainer,
+  popHostContext,
+  popViewTransitionContext,
+} from './ReactFiberHostContext';
 import {
   popSuspenseListContext,
   popSuspenseHandler,
@@ -243,6 +249,11 @@ function unwindWork(
         }
       }
       return null;
+    case ViewTransitionComponent:
+      if (enableViewTransition) {
+        popViewTransitionContext(workInProgress);
+      }
+      return null;
     default:
       return null;
   }
@@ -324,6 +335,11 @@ function unwindInterruptedWork(
         }
       }
       break;
+    case ViewTransitionComponent:
+      if (enableViewTransition) {
+        popViewTransitionContext(interruptedWork);
+      }
+      break;
     default:
       break;
   }

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -168,6 +168,8 @@ export const addViewTransitionFinishedListener =
 export const getCurrentGestureOffset = $$$config.getCurrentGestureOffset;
 export const createViewTransitionInstance =
   $$$config.createViewTransitionInstance;
+export const finalizeViewTransitionChild =
+  $$$config.finalizeViewTransitionChild;
 export const clearContainer = $$$config.clearContainer;
 export const createFragmentInstance = $$$config.createFragmentInstance;
 export const updateFragmentInstanceFiber =