Uh oh!
There was an error while loading. Please reload this page.
Enables Basic View Transition support for React Native Fabric renderer - #35764
Merged
Conversation
Comparing: d594643...3a57887 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
jackpope
self-requested a review
February 18, 2026 21:29
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
meta-codesyncBot
pushed a commit
to react/react-native
that referenced
this pull request
Mar 3, 2026
#55742) Summary: Pull Request resolved: #55742 Changelog: [General] [Added] - Add UIManagerViewTransitionDelegate interface and View Transition APIs Adds `UIManagerViewTransitionDelegate` interface and View Transition APIs to UIManager, enabling integration with React reconciler's `<ViewTransition/>` component. Exposes JSI bindings in UIManagerBinding, which will be consumed by react fabric renderer (react/react#35764) - `measureInstance` - returns layout metrics and calls `captureLayoutMetricsFromRoot` to capture snapshot - `applyViewTransitionName` / `cancelViewTransitionName` / `restoreViewTransitionName` - manage transition name registration - `startViewTransition` - orchestrates transition lifecycle with mutation/ready/complete callbacks The delegate methods are gated by the `viewTransitionEnabled` feature flag. Reviewed By: sammy-SC Differential Revision: D92537193 fbshipit-source-id: 3124ab4d65b554602a50bd2f67ab2fa537708f88
zeyapforce-pushed
the
view-transition-fabric
branch
4 times, most recently
from
March 11, 2026 22:39
e5a7693 to
aff6b07Comparezeyapforce-pushed
the
view-transition-fabric
branch
2 times, most recently
from
March 19, 2026 17:12
46c1b0a to
d6b04b2Compare3 tasks
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.
Remove viewport measurement and cancelable children tracking for persistence mode paths, deferring viewport calculation to a future TODO. Remove duplicate restoreRootViewTransitionName call and deduplicate feature flag import.
…for persistence mode
…for persistence mode
…n out of ReactFiberConfigWithNoMutation
…n out of ReactFiberConfigWithNoMutation
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.
…enable startViewTransition
…ransition stubs - Remove ReactFiberConfigWithNoViewTransition.js and supportsViewTransition flag - Restore inline view transition stubs in react-art, react-native, react-test-renderer - Guard Fabric view transition functions with enableViewTransitionForPersistenceMode - Enable enableViewTransitionForPersistenceMode for FB native
zeyapforce-pushed
the
view-transition-fabric
branch
from
March 19, 2026 19:02
1007401 to
64d367fComparejackpope
approved these changes
Mar 19, 2026
| ): boolean { | ||
| if (!supportsMutation) { | ||
| return false; | ||
| if (enableViewTransitionForPersistenceMode) { |
Collaborator
There was a problem hiding this comment.
Does this change need parity in restoreViewTransitionOnHostInstances
ContributorAuthor
There was a problem hiding this comment.
yeah, i plan to add that in another PR, i haven't implemented restoreViewTransitionName so it'll be no op
| while (child !== null) { | ||
| if (child.tag === HostComponent) { | ||
| const instance: Instance = child.stateNode; | ||
| // TODO: calculate whether component is in viewport |
Collaborator
There was a problem hiding this comment.
You can call into wasInstanceInViewport from config and put the TODO there for implementation?
Uh oh!
There was an error while loading. Please reload this page.
zeyapforce-pushed
the
view-transition-fabric
branch
2 times, most recently
from
March 19, 2026 21:19
0cca060 to
23b29e8CompareThe noop renderer's mutationHostConfig includes view transition methods, but these keys weren't part of the Pick type, causing a Flow error. Instead of adding them to ReactFiberConfigWithNoMutation (which would conflict with Fabric's separate ReactFiberConfigFabricWithViewTransition re-exports), create a new ReactFiberConfigWithNoViewTransition shim file and union its keys into the noop renderer's mutationHostConfig type.
zeyapforce-pushed
the
view-transition-fabric
branch
from
March 19, 2026 21:22
23b29e8 to
50017baCompareUh oh!
There was an error while loading. Please reload this page.
github-actionsBot
pushed a commit
that referenced
this pull request
Mar 19, 2026
#35764) ## Summary Enables Basic View Transition support for React Native Fabric renderer. **Implemented:** - Added FabricUIManager bindings for view transition methods: `applyViewTransitionName`, `startViewTransition` - Implemented `startViewTransition` with proper callback orchestration (mutation → layout → afterMutation → spawnedWork → passive) - Added fallback behavior that flushes work synchronously when Fabric's `startViewTransition` returns null (e.g., when the ViewTransition ReactNativeFeatureFlag is not enabled) - Added Flow type declarations for new FabricUIManager methods - Stubbed with `__DEV__` warnings for all the other view transition config functions that are not yet implemented 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 <img width="2290" height="1529" alt="Untitled-2026-03-19-1240" src="https://github.com/user-attachments/assets/192c9169-bc25-449c-a33b-dfec67179e7f" /> ## How did you test this change? - [x] `yarn flow fabric` - Flow type checks pass - [x] `yarn lint` - Lint checks pass - [x] Manually tested in Android catalyst app with `enableViewTransition` and `enableViewTransitionForPersistenceMode `in `ReactFeatureFlags.test-renderer.native-fb.js` and View Transition enabled via ReactNativeFeatureFlag - [x] Verified in the minified `ReactFabric-dev.fb.js` that the 'shim' config functions are not included - [x] Verified fallback behavior logs warning in `__DEV__` and flushes work synchronously when ViewTransition flag isn't enabled in Fabric DiffTrain build for [6a04c36](6a04c36)
github-actionsBot
pushed a commit
that referenced
this pull request
Mar 19, 2026
#35764) ## Summary Enables Basic View Transition support for React Native Fabric renderer. **Implemented:** - Added FabricUIManager bindings for view transition methods: `applyViewTransitionName`, `startViewTransition` - Implemented `startViewTransition` with proper callback orchestration (mutation → layout → afterMutation → spawnedWork → passive) - Added fallback behavior that flushes work synchronously when Fabric's `startViewTransition` returns null (e.g., when the ViewTransition ReactNativeFeatureFlag is not enabled) - Added Flow type declarations for new FabricUIManager methods - Stubbed with `__DEV__` warnings for all the other view transition config functions that are not yet implemented 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 <img width="2290" height="1529" alt="Untitled-2026-03-19-1240" src="https://github.com/user-attachments/assets/192c9169-bc25-449c-a33b-dfec67179e7f" /> ## How did you test this change? - [x] `yarn flow fabric` - Flow type checks pass - [x] `yarn lint` - Lint checks pass - [x] Manually tested in Android catalyst app with `enableViewTransition` and `enableViewTransitionForPersistenceMode `in `ReactFeatureFlags.test-renderer.native-fb.js` and View Transition enabled via ReactNativeFeatureFlag - [x] Verified in the minified `ReactFabric-dev.fb.js` that the 'shim' config functions are not included - [x] Verified fallback behavior logs warning in `__DEV__` and flushes work synchronously when ViewTransition flag isn't enabled in Fabric DiffTrain build for [6a04c36](6a04c36)
github-actionsBot
pushed a commit
to code/lib-react
that referenced
this pull request
Mar 22, 2026
react#35764) ## Summary Enables Basic View Transition support for React Native Fabric renderer. **Implemented:** - Added FabricUIManager bindings for view transition methods: `applyViewTransitionName`, `startViewTransition` - Implemented `startViewTransition` with proper callback orchestration (mutation → layout → afterMutation → spawnedWork → passive) - Added fallback behavior that flushes work synchronously when Fabric's `startViewTransition` returns null (e.g., when the ViewTransition ReactNativeFeatureFlag is not enabled) - Added Flow type declarations for new FabricUIManager methods - Stubbed with `__DEV__` warnings for all the other view transition config functions that are not yet implemented 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 <img width="2290" height="1529" alt="Untitled-2026-03-19-1240" src="https://github.com/user-attachments/assets/192c9169-bc25-449c-a33b-dfec67179e7f" /> ## How did you test this change? - [x] `yarn flow fabric` - Flow type checks pass - [x] `yarn lint` - Lint checks pass - [x] Manually tested in Android catalyst app with `enableViewTransition` and `enableViewTransitionForPersistenceMode `in `ReactFeatureFlags.test-renderer.native-fb.js` and View Transition enabled via ReactNativeFeatureFlag - [x] Verified in the minified `ReactFabric-dev.fb.js` that the 'shim' config functions are not included - [x] Verified fallback behavior logs warning in `__DEV__` and flushes work synchronously when ViewTransition flag isn't enabled in Fabric DiffTrain build for [6a04c36](react@6a04c36)
github-actionsBot
pushed a commit
to code/lib-react
that referenced
this pull request
Mar 22, 2026
react#35764) ## Summary Enables Basic View Transition support for React Native Fabric renderer. **Implemented:** - Added FabricUIManager bindings for view transition methods: `applyViewTransitionName`, `startViewTransition` - Implemented `startViewTransition` with proper callback orchestration (mutation → layout → afterMutation → spawnedWork → passive) - Added fallback behavior that flushes work synchronously when Fabric's `startViewTransition` returns null (e.g., when the ViewTransition ReactNativeFeatureFlag is not enabled) - Added Flow type declarations for new FabricUIManager methods - Stubbed with `__DEV__` warnings for all the other view transition config functions that are not yet implemented 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 <img width="2290" height="1529" alt="Untitled-2026-03-19-1240" src="https://github.com/user-attachments/assets/192c9169-bc25-449c-a33b-dfec67179e7f" /> ## How did you test this change? - [x] `yarn flow fabric` - Flow type checks pass - [x] `yarn lint` - Lint checks pass - [x] Manually tested in Android catalyst app with `enableViewTransition` and `enableViewTransitionForPersistenceMode `in `ReactFeatureFlags.test-renderer.native-fb.js` and View Transition enabled via ReactNativeFeatureFlag - [x] Verified in the minified `ReactFabric-dev.fb.js` that the 'shim' config functions are not included - [x] Verified fallback behavior logs warning in `__DEV__` and flushes work synchronously when ViewTransition flag isn't enabled in Fabric DiffTrain build for [6a04c36](react@6a04c36)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Enables Basic View Transition support for React Native Fabric renderer.
Implemented:
applyViewTransitionName,startViewTransitionstartViewTransitionwith proper callback orchestration (mutation → layout → afterMutation → spawnedWork → passive)startViewTransitionreturns null (e.g., when the ViewTransition ReactNativeFeatureFlag is not enabled)__DEV__warnings for all the other view transition config functions that are not yet implementedThis 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
How did you test this change?
yarn flow fabric- Flow type checks passyarn lint- Lint checks passenableViewTransitionandenableViewTransitionForPersistenceModeinReactFeatureFlags.test-renderer.native-fb.jsand View Transition enabled via ReactNativeFeatureFlagReactFabric-dev.fb.jsthat the 'shim' config functions are not included__DEV__and flushes work synchronously when ViewTransition flag isn't enabled in Fabric