Skip to content

Conversation

@zeyap
Copy link

@zeyap zeyap commented Feb 11, 2026

Summary

Enables Basic View Transition support for React Native Fabric renderer.

Implemented:

  • Added FabricUIManager bindings for view transition methods: measureInstance, applyViewTransitionName, startViewTransition, restoreViewTransitionName, and cancelViewTransitionName
  • Implemented startViewTransition with proper callback orchestration (mutation → layout → afterMutation → spawnedWork → passive)
  • Added fallback behavior that flushes work synchronously when Fabric's startViewTransition returns false (e.g., when the ViewTransition ReactNativeFeatureFlag is not enabled)
  • Added Flow type declarations for new FabricUIManager methods

Stubbed with __DEV__ warnings (not yet implemented):

  • cancelRootViewTransitionName
  • restoreRootViewTransitionName
  • cloneRootViewTransitionContainer
  • removeRootViewTransitionClone
  • measureClonedInstance
  • hasInstanceChanged
  • hasInstanceAffectedParent
  • startGestureTransition
  • stopViewTransition
  • getCurrentGestureOffset

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
Untitled-2026-02-11-1156

How did you test this change?

  • yarn flow fabric - Flow type checks pass
  • yarn lint - Lint checks pass
  • Manually tested in Android catalyst app with enableViewTransition in ReactFeatureFlags.test-renderer.native-fb.js and View Transition enabled via ReactNativeFeatureFlag
  • Verified in the minified ReactFabric-dev.fb.js that the 'shim' config functions are not included
  • Verified fallback behavior logs warning in __DEV__ and flushes work synchronously when ViewTransition flag isn't enabled in Fabric

zeyap added 6 commits February 5, 2026 18:13
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.
@meta-cla meta-cla bot added the CLA Signed label Feb 11, 2026
@react-sizebot
Copy link

react-sizebot commented Feb 11, 2026

Comparing: 8374c2a...c1d82d8

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 = 1.88 kB 1.88 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 611.02 kB 610.53 kB = 108.00 kB 107.91 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.84 kB 6.84 kB = 1.88 kB 1.88 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 676.95 kB 676.46 kB = 118.97 kB 118.87 kB
facebook-www/ReactDOM-prod.classic.js = 697.68 kB 696.77 kB = 122.67 kB 122.49 kB
facebook-www/ReactDOM-prod.modern.js = 687.99 kB 687.15 kB = 121.05 kB 120.89 kB
react-native/implementations/ReactFabric-prod.js +4.20% 388.18 kB 404.47 kB +3.76% 67.10 kB 69.62 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.js +4.20% 388.18 kB 404.47 kB +3.76% 67.10 kB 69.62 kB
react-native/implementations/ReactFabric-profiling.js +1.55% 462.85 kB 470.03 kB +1.62% 77.75 kB 79.01 kB
react-native/implementations/ReactFabric-dev.js +1.29% 774.53 kB 784.51 kB +1.39% 123.94 kB 125.66 kB
test_utils/ReactAllWarnings.js +0.92% 67.70 kB 68.32 kB +0.94% 17.05 kB 17.21 kB
react-native/implementations/ReactFabric-profiling.fb.js = 463.98 kB 462.97 kB = 78.05 kB 77.92 kB
oss-experimental/react-markup/cjs/react-markup.react-server.production.js = 358.97 kB 358.16 kB = 66.58 kB 66.46 kB
oss-experimental/react-markup/cjs/react-markup.react-server.development.js = 677.62 kB 675.98 kB = 120.16 kB 119.82 kB
react-native/implementations/ReactFabric-prod.fb.js = 394.00 kB 392.99 kB = 68.28 kB 68.15 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js = 2.33 kB 2.32 kB = 0.87 kB 0.87 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js = 2.33 kB 2.32 kB = 0.87 kB 0.87 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-client.production.js = 2.33 kB 2.32 kB = 0.87 kB 0.87 kB
oss-experimental/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js = 3.10 kB 3.08 kB = 1.09 kB 1.08 kB
oss-stable-semver/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js = 3.10 kB 3.08 kB = 1.09 kB 1.08 kB
oss-stable/react-noop-renderer/cjs/react-noop-renderer-flight-client.development.js = 3.10 kB 3.08 kB = 1.09 kB 1.08 kB
oss-experimental/react-client/cjs/react-client-flight.development.js = 180.61 kB 179.04 kB = 31.38 kB 31.08 kB
oss-stable/react-client/cjs/react-client-flight.development.js = 180.61 kB 179.03 kB = 31.38 kB 31.07 kB
oss-stable-semver/react-client/cjs/react-client-flight.development.js = 180.58 kB 179.01 kB = 31.35 kB 31.05 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js = 190.30 kB 188.60 kB = 33.62 kB 33.32 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js = 190.30 kB 188.60 kB = 33.62 kB 33.32 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js = 190.30 kB 188.60 kB = 33.62 kB 33.32 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js = 190.28 kB 188.58 kB = 33.60 kB 33.30 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js = 190.28 kB 188.58 kB = 33.60 kB 33.30 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.development.js = 190.28 kB 188.58 kB = 33.60 kB 33.30 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js = 186.93 kB 185.23 kB = 33.07 kB 32.78 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js = 186.93 kB 185.23 kB = 33.07 kB 32.78 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.development.js = 186.93 kB 185.23 kB = 33.07 kB 32.78 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 191.61 kB 189.85 kB = 33.77 kB 33.47 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 191.59 kB 189.84 kB = 33.76 kB 33.47 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js = 191.54 kB 189.79 kB = 33.74 kB 33.45 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 190.98 kB 189.23 kB = 33.60 kB 33.31 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 190.97 kB 189.22 kB = 33.59 kB 33.31 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.development.js = 190.92 kB 189.17 kB = 33.57 kB 33.28 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js = 191.72 kB 189.95 kB = 33.78 kB 33.45 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js = 191.72 kB 189.95 kB = 33.78 kB 33.45 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.development.js = 191.72 kB 189.95 kB = 33.78 kB 33.45 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 188.42 kB 186.66 kB = 33.13 kB 32.84 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 188.41 kB 186.65 kB = 33.12 kB 32.84 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.development.js = 188.36 kB 186.60 kB = 33.10 kB 32.81 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js = 186.39 kB 184.63 kB = 32.71 kB 32.42 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js = 186.37 kB 184.62 kB = 32.71 kB 32.42 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.development.js = 186.32 kB 184.57 kB = 32.68 kB 32.39 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js = 196.80 kB 194.91 kB = 34.43 kB 34.10 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js = 196.80 kB 194.91 kB = 34.43 kB 34.10 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.development.js = 196.80 kB 194.91 kB = 34.43 kB 34.10 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js = 196.78 kB 194.89 kB = 34.41 kB 34.08 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js = 196.78 kB 194.89 kB = 34.41 kB 34.08 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.development.js = 196.78 kB 194.89 kB = 34.41 kB 34.08 kB
oss-experimental/react-server-dom-unbundled/cjs/react-server-dom-unbundled-client.node.development.js = 195.38 kB 193.49 kB = 34.14 kB 33.81 kB
oss-stable-semver/react-server-dom-unbundled/cjs/react-server-dom-unbundled-client.node.development.js = 195.38 kB 193.49 kB = 34.14 kB 33.81 kB
oss-stable/react-server-dom-unbundled/cjs/react-server-dom-unbundled-client.node.development.js = 195.38 kB 193.49 kB = 34.14 kB 33.81 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js = 193.73 kB 191.84 kB = 33.89 kB 33.57 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js = 193.73 kB 191.84 kB = 33.89 kB 33.57 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.development.js = 193.73 kB 191.84 kB = 33.89 kB 33.57 kB
oss-experimental/react-client/cjs/react-client-flight.production.js = 70.16 kB 69.33 kB = 12.52 kB 12.38 kB
oss-stable/react-client/cjs/react-client-flight.production.js = 70.16 kB 69.32 kB = 12.52 kB 12.37 kB
oss-stable-semver/react-client/cjs/react-client-flight.production.js = 70.13 kB 69.30 kB = 12.50 kB 12.35 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 235.91 kB 233.08 kB = 52.47 kB 51.68 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 235.91 kB 233.07 kB = 52.46 kB 51.68 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.development.js = 235.88 kB 233.05 kB = 52.44 kB 51.66 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js = 70.35 kB 69.50 kB = 13.49 kB 13.33 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js = 70.35 kB 69.50 kB = 13.49 kB 13.33 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.node.production.js = 70.35 kB 69.50 kB = 13.49 kB 13.33 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js = 70.29 kB 69.44 kB = 13.74 kB 13.59 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js = 70.29 kB 69.44 kB = 13.74 kB 13.59 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.production.js = 70.29 kB 69.44 kB = 13.74 kB 13.59 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js = 70.27 kB 69.41 kB = 13.73 kB 13.58 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js = 70.27 kB 69.41 kB = 13.73 kB 13.58 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.edge.production.js = 70.27 kB 69.41 kB = 13.73 kB 13.58 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js = 67.26 kB 66.41 kB = 13.14 kB 12.99 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js = 67.26 kB 66.41 kB = 13.14 kB 12.99 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.edge.production.js = 67.26 kB 66.41 kB = 13.14 kB 12.99 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js = 74.93 kB 73.97 kB = 14.45 kB 14.28 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js = 74.93 kB 73.97 kB = 14.45 kB 14.28 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.node.production.js = 74.93 kB 73.97 kB = 14.45 kB 14.28 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js = 74.91 kB 73.95 kB = 14.44 kB 14.27 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js = 74.91 kB 73.95 kB = 14.44 kB 14.27 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.node.production.js = 74.91 kB 73.95 kB = 14.44 kB 14.27 kB
oss-experimental/react-server-dom-unbundled/cjs/react-server-dom-unbundled-client.node.production.js = 73.76 kB 72.80 kB = 14.20 kB 14.03 kB
oss-stable-semver/react-server-dom-unbundled/cjs/react-server-dom-unbundled-client.node.production.js = 73.76 kB 72.80 kB = 14.20 kB 14.03 kB
oss-stable/react-server-dom-unbundled/cjs/react-server-dom-unbundled-client.node.production.js = 73.76 kB 72.80 kB = 14.20 kB 14.03 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js = 64.31 kB 63.45 kB = 12.50 kB 12.34 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js = 64.31 kB 63.45 kB = 12.50 kB 12.34 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js = 64.31 kB 63.45 kB = 12.50 kB 12.34 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js = 63.94 kB 63.08 kB = 12.42 kB 12.26 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js = 63.94 kB 63.08 kB = 12.42 kB 12.26 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js = 63.94 kB 63.08 kB = 12.42 kB 12.26 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js = 71.70 kB 70.74 kB = 13.80 kB 13.63 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js = 71.70 kB 70.74 kB = 13.80 kB 13.63 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.node.production.js = 71.70 kB 70.74 kB = 13.80 kB 13.63 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js = 61.92 kB 61.06 kB = 12.01 kB 11.84 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js = 61.92 kB 61.06 kB = 12.01 kB 11.84 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js = 61.92 kB 61.06 kB = 12.01 kB 11.84 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js = 61.74 kB 60.89 kB = 11.96 kB 11.79 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js = 61.74 kB 60.89 kB = 11.96 kB 11.79 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js = 61.74 kB 60.89 kB = 11.96 kB 11.79 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js = 101.57 kB 99.71 kB = 20.71 kB 20.28 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js = 101.57 kB 99.71 kB = 20.71 kB 20.28 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js = 101.57 kB 99.71 kB = 20.71 kB 20.28 kB

Generated by 🚫 dangerJS against c1d82d8

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.

2 participants