Skip to content

Support nested ViewTransition enter/exit animations and fix named static subtree flag check#36140

Closed
zeyap wants to merge 5 commits intofacebook:mainfrom
zeyap:pr-36135
Closed

Support nested ViewTransition enter/exit animations and fix named static subtree flag check#36140
zeyap wants to merge 5 commits intofacebook:mainfrom
zeyap:pr-36135

Conversation

@zeyap
Copy link
Contributor

@zeyap zeyap commented Mar 25, 2026

Summary

  • Adds experimental support for firing enter and exit animations on nested <ViewTransition> components when they specify type-based (object map) transition configs, gated behind the enableViewTransitionNested feature flag (from Support nested ViewTransition enter/exit animations based on transition types behind flag #36135)
  • Adds basic ViewTransition callback tests
  • Adds a nested exit example to the view-transition fixture
  • Fixes commitEnterViewTransitions to include ViewTransitionNamedStatic in the subtree flags check, so nested named view transitions correctly fire their enter animations

Details

Building on the work in #36135, this includes an additional fix: the commitEnterViewTransitions tree walk was only checking for ViewTransitionStatic in subtreeFlags, which caused it to skip subtrees containing only ViewTransitionNamedStatic children. This meant nested named view transitions would silently fail to animate on enter. The fix adds ViewTransitionNamedStatic to the bitwise check.

Test Plan

  • Existing and new ReactDOMViewTransition tests cover callback behavior
  • The nested exit fixture demo validates the visual behavior of nested enter/exit animations

jackpope and others added 5 commits March 23, 2026 15:36
…ter transitions

The commitEnterViewTransitions walk was only checking for
ViewTransitionStatic in subtreeFlags, causing it to skip subtrees
that only contained ViewTransitionNamedStatic children. This meant
nested named view transitions would not fire their enter animations.
@meta-cla meta-cla bot added the CLA Signed label Mar 25, 2026
@zeyap zeyap closed this Mar 25, 2026
@react-sizebot
Copy link

Comparing: 3cb2c42...3b017d0

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.84 kB 6.84 kB +0.05% 1.88 kB 1.88 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 612.88 kB 612.82 kB = 108.30 kB 108.30 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.84 kB 6.84 kB +0.05% 1.88 kB 1.88 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 678.81 kB 678.75 kB = 119.26 kB 119.26 kB
facebook-www/ReactDOM-prod.classic.js +0.41% 698.20 kB 701.08 kB +0.31% 122.65 kB 123.04 kB
facebook-www/ReactDOM-prod.modern.js +0.42% 688.52 kB 691.39 kB +0.32% 121.03 kB 121.41 kB
facebook-www/ESLintPluginReactHooks-dev.classic.js Deleted 2,042.93 kB 0.00 kB Deleted 298.52 kB 0.00 kB
facebook-www/ESLintPluginReactHooks-dev.modern.js Deleted 2,042.93 kB 0.00 kB Deleted 298.52 kB 0.00 kB
facebook-www/ESLintPluginReactHooks-prod.classic.js Deleted 2,038.49 kB 0.00 kB Deleted 297.55 kB 0.00 kB
facebook-www/ESLintPluginReactHooks-prod.modern.js Deleted 2,038.49 kB 0.00 kB Deleted 297.55 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
react-native/implementations/ReactFabric-prod.fb.js +0.68% 423.20 kB 426.06 kB +0.54% 73.14 kB 73.53 kB
facebook-www/ReactReconciler-prod.modern.js +0.60% 509.83 kB 512.89 kB +0.50% 80.97 kB 81.37 kB
facebook-www/ReactReconciler-prod.classic.js +0.59% 520.11 kB 523.17 kB +0.49% 82.61 kB 83.01 kB
react-native/implementations/ReactFabric-profiling.fb.js +0.58% 496.66 kB 499.52 kB +0.44% 83.81 kB 84.18 kB
facebook-www/ReactART-prod.modern.js +0.54% 384.40 kB 386.49 kB +0.52% 64.34 kB 64.67 kB
facebook-www/ReactART-prod.classic.js +0.53% 394.31 kB 396.39 kB +0.51% 65.98 kB 66.32 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-prod.js +0.44% 648.18 kB 651.04 kB +0.36% 114.21 kB 114.62 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-prod.js +0.44% 653.84 kB 656.70 kB +0.35% 115.35 kB 115.76 kB
facebook-www/ReactART-dev.modern.js +0.42% 772.28 kB 775.53 kB +0.37% 121.05 kB 121.49 kB
facebook-www/ReactDOM-prod.modern.js +0.42% 688.52 kB 691.39 kB +0.32% 121.03 kB 121.41 kB
facebook-www/ReactART-dev.classic.js +0.42% 781.80 kB 785.06 kB +0.37% 122.78 kB 123.23 kB
facebook-www/ReactDOM-prod.classic.js +0.41% 698.20 kB 701.08 kB +0.31% 122.65 kB 123.04 kB
facebook-www/ReactDOMTesting-prod.modern.js +0.41% 702.92 kB 705.79 kB +0.31% 124.64 kB 125.03 kB
facebook-www/ReactDOMTesting-prod.classic.js +0.40% 712.60 kB 715.48 kB +0.31% 126.26 kB 126.65 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-profiling.js +0.40% 723.75 kB 726.62 kB +0.32% 124.90 kB 125.29 kB
react-native/implementations/ReactFabric-dev.fb.js +0.39% 816.91 kB 820.13 kB +0.39% 130.89 kB 131.40 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-profiling.js +0.39% 729.85 kB 732.71 kB +0.31% 126.11 kB 126.50 kB
facebook-www/ReactDOM-profiling.modern.js +0.38% 766.74 kB 769.62 kB +0.29% 132.03 kB 132.41 kB
facebook-www/ReactDOM-profiling.classic.js +0.37% 774.89 kB 777.76 kB +0.31% 133.35 kB 133.77 kB
facebook-www/ReactReconciler-dev.modern.js +0.37% 880.21 kB 883.46 kB +0.28% 137.03 kB 137.42 kB
facebook-www/ReactReconciler-dev.classic.js +0.37% 889.49 kB 892.74 kB +0.28% 138.76 kB 139.15 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-dev.js +0.26% 1,221.95 kB 1,225.17 kB +0.21% 203.72 kB 204.15 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-dev.js +0.26% 1,238.44 kB 1,241.67 kB +0.20% 206.56 kB 206.98 kB
facebook-www/ReactDOM-dev.modern.js +0.25% 1,281.63 kB 1,284.88 kB +0.20% 212.49 kB 212.91 kB
facebook-www/ReactDOM-dev.classic.js +0.25% 1,290.84 kB 1,294.10 kB +0.20% 214.31 kB 214.74 kB
facebook-www/ReactDOMTesting-dev.modern.js +0.25% 1,298.16 kB 1,301.42 kB +0.20% 216.25 kB 216.68 kB
facebook-www/ReactDOMTesting-dev.classic.js +0.25% 1,307.38 kB 1,310.63 kB +0.19% 218.09 kB 218.51 kB
facebook-www/ESLintPluginReactHooks-dev.classic.js Deleted 2,042.93 kB 0.00 kB Deleted 298.52 kB 0.00 kB
facebook-www/ESLintPluginReactHooks-dev.modern.js Deleted 2,042.93 kB 0.00 kB Deleted 298.52 kB 0.00 kB
facebook-www/ESLintPluginReactHooks-prod.classic.js Deleted 2,038.49 kB 0.00 kB Deleted 297.55 kB 0.00 kB
facebook-www/ESLintPluginReactHooks-prod.modern.js Deleted 2,038.49 kB 0.00 kB Deleted 297.55 kB 0.00 kB

Generated by 🚫 dangerJS against 3b017d0

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.

3 participants