6a04c369f1
## 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
30 lines
1.3 KiB
JavaScript
30 lines
1.3 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict
|
|
*/
|
|
|
|
// In xplat, these flags are controlled by GKs. Because most GKs have some
|
|
// population running in either mode, we should run our tests that way, too,
|
|
//
|
|
// Use __VARIANT__ to simulate a GK. The tests will be run twice: once
|
|
// with the __VARIANT__ set to `true`, and once set to `false`.
|
|
//
|
|
// TODO: __VARIANT__ isn't supported for React Native flags yet. You can set the
|
|
// flag here but it won't be set to `true` in any of our test runs. Need to
|
|
// add a test configuration for React Native.
|
|
|
|
export const alwaysThrottleRetries = __VARIANT__;
|
|
export const enableObjectFiber = __VARIANT__;
|
|
export const enableEagerAlternateStateNodeCleanup = __VARIANT__;
|
|
export const passChildrenWhenCloningPersistedNodes = __VARIANT__;
|
|
export const enableFragmentRefs = __VARIANT__;
|
|
export const enableFragmentRefsScrollIntoView = __VARIANT__;
|
|
export const enableFragmentRefsInstanceHandles = __VARIANT__;
|
|
export const enableEffectEventMutationPhase = __VARIANT__;
|
|
export const enableFragmentRefsTextNodes = __VARIANT__;
|
|
export const enableViewTransitionForPersistenceMode = __VARIANT__;
|