@samitouri / QOS-React / commits / 6a8c7fb6f1

Release `<ViewTransition />` to Canary (#34712)

## Overview This PR ships the View Transition APIs to `react@canary`: - [`<ViewTransition />`](https://react.dev/reference/react/ViewTransition) - [`addTransitionType`](https://react.dev/reference/react/addTransitionType) This means these APIs are ready for final feedback and prepare for semver stable release. ## What this means Shipping `<ViewTransition />` and `addTransitionType` to canary means they have gone through extensive testing in production, we are confident in the stability of the APIs, and we are preparing to release it in a future semver stable version. Libraries and frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) should begin implementing and testing these features. ## Why we follow the Canary Workflow To prepare for semver stable, libraries should test canary features like `<ViewTransition />` with `react@canary` to confirm compatibility and prepare for the next semver release in a myriad of environments and configurations used throughout the React ecosystem. This provides libraries with ample time to catch any issues we missed before slamming them with problems in the wider semver release. Since these features have already gone through extensive production testing, and we are confident they are stable, frameworks following the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries) can also begin adopting canary features like `<ViewTransition />`. This adoption is similar to how different Browsers implement new proposed browser features before they are added to the standard. If a frameworks adopts a canary feature, they are committing to stability for their users by ensuring any API changes before a semver stable release are opaque and non-breaking to their users. Apps not using a framework are also free to adopt canary features like `<ViewTransition>` as long as they follow the [Canary Workflow](https://react.dev/blog/2023/05/03/react-canaries), but we generally recommend waiting for a semver stable release unless you have the capacity to commit to following along with the canary changes and debugging library compatibility issues. Waiting for semver stable means you're able to benefit from libraries testing and confirming support, and use semver as signal for which version of a library you can use with support of the feature. ## Docs Check out the ["React Labs: View Transitions, Activity, and more"](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more#view-transitions) blog post, and [the new docs for `<ViewTransition />`](https://react.dev/reference/react/ViewTransition) and [`addTransitionType`](https://react.dev/reference/react/addTransitionType) for more info.

Sebastian "Sebbie" Silbermann committed Oct 7, 2025 at 06:23 UTC 6a8c7fb6f1108577c97eeb5703018ece915dcdeb

21 files changed +36 -24

fixtures/view-transition/src/components/App.js

+1 -1

@@ -3,7 +3,7 @@ import React, {

3 useLayoutEffect,

4 useEffect,

5 useState,

6 - unstable_addTransitionType as addTransitionType,

6 + addTransitionType,

7 } from 'react';

9 import Chrome from './Chrome.js';

fixtures/view-transition/src/components/Page.js

+2 -2

@@ -1,6 +1,6 @@

1 import React, {

2 - unstable_addTransitionType as addTransitionType,

3 - unstable_ViewTransition as ViewTransition,

2 + addTransitionType,

3 + ViewTransition,

4 Activity,

5 useLayoutEffect,

6 useEffect,

packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js

+2 -1

@@ -251,7 +251,8 @@ describe('Store component filters', () => {

251 });

252

253 it('should filter ViewTransition', async () => {

254 - const ViewTransition = React.unstable_ViewTransition;

254 + const ViewTransition =

255 + React.ViewTransition || React.unstable_ViewTransition;

256

257 if (ViewTransition != null) {

258 await actAsync(async () =>

packages/react-dom/src/__tests__/ReactDOMFizzViewTransition-test.js

+1 -1

@@ -40,7 +40,7 @@ describe('ReactDOMFizzViewTransition', () => {

40 Stream = require('stream');

42 Suspense = React.Suspense;

43 - ViewTransition = React.unstable_ViewTransition;

43 + ViewTransition = React.ViewTransition;

45 // Test Environment

46 const jsdom = new JSDOM(

packages/react-reconciler/src/__tests__/ReactErrorStacks-test.js

+1 -1

@@ -29,7 +29,7 @@ describe('ReactFragment', () => {

29 React = require('react');

30 Suspense = React.Suspense;

31 Activity = React.Activity;

32 - ViewTransition = React.unstable_ViewTransition;

32 + ViewTransition = React.ViewTransition;

33 ReactNoop = require('react-noop-renderer');

34 const InternalTestUtils = require('internal-test-utils');

35 waitForAll = InternalTestUtils.waitForAll;

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

+2 -2

@@ -941,7 +941,7 @@ describe('ReactLazy', () => {

941

942 // @gate enableViewTransition

943 it('throws with a useful error when wrapping ViewTransition with lazy()', async () => {

944 - const BadLazy = lazy(() => fakeImport(React.unstable_ViewTransition));

944 + const BadLazy = lazy(() => fakeImport(React.ViewTransition));

945

946 const root = ReactTestRenderer.create(

947 <Suspense fallback={<Text text="Loading..." />}>

@@ -954,7 +954,7 @@ describe('ReactLazy', () => {

954

955 await waitForAll(['Loading...']);

956

957 - await resolveFakeImport(React.unstable_ViewTransition);

957 + await resolveFakeImport(React.ViewTransition);

958 root.update(

959 <Suspense fallback={<Text text="Loading..." />}>

960 <BadLazy />

packages/react-reconciler/src/__tests__/ViewTransitionReactServer-test.js

+1 -1

@@ -23,7 +23,7 @@ describe('ViewTransitionReactServer', () => {

23 jest.resetModules();

24 jest.mock('react', () => require('react/react.react-server'));

25 ReactServer = require('react');

26 - ViewTransition = ReactServer.unstable_ViewTransition;

26 + ViewTransition = ReactServer.ViewTransition;

27 ReactNoopFlightServer = require('react-noop-renderer/flight-server');

29 jest.resetModules();

packages/react/index.development.js

@@ -45,6 +45,8 @@ export {

45 startTransition,

46 unstable_LegacyHidden,

47 Activity,

48 + ViewTransition,

49 + addTransitionType,

50 unstable_Scope,

51 unstable_SuspenseList,

52 unstable_TracingMarker,

packages/react/index.experimental.development.js

+2 -2

@@ -33,9 +33,9 @@ export {

33 unstable_postpone,

34 unstable_getCacheForType,

35 unstable_SuspenseList,

36 - unstable_ViewTransition,

36 + ViewTransition,

37 unstable_startGestureTransition,

38 - unstable_addTransitionType,

38 + addTransitionType,

39 unstable_useCacheRefresh,

40 useId,

41 useCallback,

packages/react/index.experimental.js

+2 -2

@@ -34,9 +34,9 @@ export {

34 unstable_postpone,

35 unstable_getCacheForType,

36 unstable_SuspenseList,

37 - unstable_ViewTransition,

37 + ViewTransition,

38 unstable_startGestureTransition,

39 - unstable_addTransitionType,

39 + addTransitionType,

40 unstable_useCacheRefresh,

41 useId,

42 useCallback,

packages/react/index.fb.js

+4 -2

@@ -39,9 +39,11 @@ export {

39 unstable_LegacyHidden,

40 unstable_Scope,

41 unstable_SuspenseList,

42 - unstable_ViewTransition,

42 + ViewTransition,

43 + ViewTransition as unstable_ViewTransition,

44 unstable_TracingMarker,

44 - unstable_addTransitionType,

45 + addTransitionType,

46 + addTransitionType as unstable_addTransitionType,

47 unstable_useCacheRefresh,

48 use,

49 useActionState,

packages/react/index.js

+2 -2

@@ -48,8 +48,8 @@ export {

48 unstable_Scope,

49 unstable_SuspenseList,

50 unstable_TracingMarker,

51 - unstable_ViewTransition,

52 - unstable_addTransitionType,

51 + ViewTransition,

52 + addTransitionType,

53 unstable_getCacheForType,

54 unstable_useCacheRefresh,

55 useId,

packages/react/index.stable.development.js

@@ -18,6 +18,8 @@ export {

18 PureComponent,

19 StrictMode,

20 Suspense,

21 + ViewTransition,

22 + addTransitionType,

23 cloneElement,

24 createContext,

25 createElement,

packages/react/index.stable.js

@@ -18,6 +18,8 @@ export {

18 PureComponent,

19 StrictMode,

20 Suspense,

21 + ViewTransition,

22 + addTransitionType,

23 cloneElement,

24 createContext,

25 createElement,

packages/react/src/ReactClient.js

+2 -2

@@ -125,8 +125,8 @@ export {

125 // enableTransitionTracing

126 REACT_TRACING_MARKER_TYPE as unstable_TracingMarker,

127 // enableViewTransition

128 - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition,

129 - addTransitionType as unstable_addTransitionType,

128 + REACT_VIEW_TRANSITION_TYPE as ViewTransition,

129 + addTransitionType as addTransitionType,

130 // enableGestureTransition

131 startGestureTransition as unstable_startGestureTransition,

132 // DEV-only

packages/react/src/ReactServer.experimental.development.js

+1 -1

@@ -63,6 +63,7 @@ export {

63 REACT_PROFILER_TYPE as Profiler,

64 REACT_STRICT_MODE_TYPE as StrictMode,

65 REACT_SUSPENSE_TYPE as Suspense,

66 + REACT_VIEW_TRANSITION_TYPE as ViewTransition,

67 cloneElement,

68 createElement,

69 createRef,

@@ -83,6 +84,5 @@ export {

84 version,

85 // Experimental

86 REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList,

86 - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition,

87 captureOwnerStack, // DEV-only

88 };

packages/react/src/ReactServer.experimental.js

+1 -1

@@ -62,6 +62,7 @@ export {

62 REACT_PROFILER_TYPE as Profiler,

63 REACT_STRICT_MODE_TYPE as StrictMode,

64 REACT_SUSPENSE_TYPE as Suspense,

65 + REACT_VIEW_TRANSITION_TYPE as ViewTransition,

66 cloneElement,

67 createElement,

68 createRef,

@@ -82,5 +83,4 @@ export {

83 version,

84 // Experimental

85 REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList,

85 - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition,

86 };

packages/react/src/ReactServer.fb.js

+2 -1

@@ -53,6 +53,8 @@ export {

53 REACT_PROFILER_TYPE as Profiler,

54 REACT_STRICT_MODE_TYPE as StrictMode,

55 REACT_SUSPENSE_TYPE as Suspense,

56 + REACT_VIEW_TRANSITION_TYPE as ViewTransition,

57 + REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition,

58 cloneElement,

59 createElement,

60 createRef,

@@ -71,5 +73,4 @@ export {

73 captureOwnerStack, // DEV-only

74 // Experimental

75 REACT_SUSPENSE_LIST_TYPE as unstable_SuspenseList,

74 - REACT_VIEW_TRANSITION_TYPE as unstable_ViewTransition,

76 };

packages/react/src/ReactServer.js

@@ -16,6 +16,7 @@ import {

16 REACT_PROFILER_TYPE,

17 REACT_STRICT_MODE_TYPE,

18 REACT_SUSPENSE_TYPE,

19 + REACT_VIEW_TRANSITION_TYPE,

20 } from 'shared/ReactSymbols';

21 import {

22 cloneElement,

@@ -46,6 +47,7 @@ export {

47 REACT_PROFILER_TYPE as Profiler,

48 REACT_STRICT_MODE_TYPE as StrictMode,

49 REACT_SUSPENSE_TYPE as Suspense,

50 + REACT_VIEW_TRANSITION_TYPE as ViewTransition,

51 cloneElement,

52 createElement,

53 createRef,

packages/shared/ReactFeatureFlags.js

+1 -1

@@ -84,7 +84,7 @@ export const enablePostpone = __EXPERIMENTAL__;

85 export const enableHalt: boolean = true;

87 -export const enableViewTransition = __EXPERIMENTAL__;

87 +export const enableViewTransition: boolean = true;

89 export const enableGestureTransition = __EXPERIMENTAL__;

packages/shared/forks/ReactFeatureFlags.native-oss.js

+1 -1

@@ -62,7 +62,7 @@ export const enableHydrationLaneScheduling: boolean = true;

62 export const enableYieldingBeforePassive: boolean = false;

64 export const enableThrottledScheduling: boolean = false;

65 -export const enableViewTransition: boolean = false;

65 +export const enableViewTransition: boolean = true;

66 export const enableGestureTransition: boolean = false;

67 export const enableScrollEndPolyfill: boolean = true;

68 export const enableSuspenseyImages: boolean = false;