Skip to content

Prevent view flattening for direct host children of ViewTransition#36012

Open
zeyap wants to merge 16 commits intofacebook:mainfrom
zeyap:viewtransition-child-non-collapsible
Open

Prevent view flattening for direct host children of ViewTransition#36012
zeyap wants to merge 16 commits intofacebook:mainfrom
zeyap:viewtransition-child-non-collapsible

Conversation

@zeyap
Copy link

@zeyap zeyap commented Mar 11, 2026

Summary

  • Adds finalizeViewTransitionChild(type, props) 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, which would remove the view from the platform hierarchy and break view transition animations
  • DOM renderer returns props unchanged (no-op) since view flattening is a React Native concept
  • Uses a viewTransitionCursor stack cursor to efficiently track whether the current fiber is inside a ViewTransition — ViewTransitionComponent pushes true, HostComponent pushes false (acting as a boundary so only direct host children are affected)

Test plan

  • Run reconciler tests
  • Run React Native renderer tests
  • Verify view transitions animate correctly on RN with Fabric

@meta-cla meta-cla bot added the CLA Signed label Mar 11, 2026
@zeyap zeyap closed this Mar 11, 2026
@zeyap zeyap reopened this Mar 11, 2026
zeyap added 16 commits March 11, 2026 15:35
Wherever the reconciler checks supportsMutation before running view
transition logic, add an else-if branch gated on
enableViewTransitionForPersistenceMode for persistent renderers (Fabric).

This follows the pattern that supportsMutation guards mutation-mode-only
logic, and persistent mode should have its own branch rather than being
lumped under a single supportsViewTransition capability flag.

For now the persistent mode branches duplicate the mutation logic.
The flag defaults to false in all channels.
Summary:
- turn on enableViewTransition feature
- stub shim
- run some mutation config fn at persistence mode too
Better reflects that this signals the transition has started rather than
initiating it.
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).
@zeyap zeyap force-pushed the viewtransition-child-non-collapsible branch from 85b3cb9 to 0d55141 Compare March 11, 2026 22:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant