Skip to content

Add supportsViewTransition host config flag #35965

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zeyap wants to merge 1 commit into
base: main
Choose a base branch
from
+58 −406
Open

Add supportsViewTransition host config flag #35965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 1 addition & 86 deletions packages/react-art/src/ReactFiberConfigART.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,7 @@ function applyTextProps(instance, props, prevProps = {}) {
}
}

export * from 'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
export * from 'react-reconciler/src/ReactFiberConfigWithNoPersistence';
export * from 'react-reconciler/src/ReactFiberConfigWithNoHydration';
export * from 'react-reconciler/src/ReactFiberConfigWithNoScopes';
Expand Down Expand Up @@ -484,92 +485,6 @@ export function unhideTextInstance(textInstance, text): void {
// Noop
}

export function applyViewTransitionName(instance, name, className) {
// Noop
}

export function restoreViewTransitionName(instance, props) {
// Noop
}

export function cancelViewTransitionName(instance, name, props) {
// Noop
}

export function cancelRootViewTransitionName(rootContainer) {
// Noop
}

export function restoreRootViewTransitionName(rootContainer) {
// Noop
}

export function cloneRootViewTransitionContainer(rootContainer) {
throw new Error('Not implemented.');
}

export function removeRootViewTransitionClone(rootContainer, clone) {
throw new Error('Not implemented.');
}

export type InstanceMeasurement = null;

export function measureInstance(instance) {
return null;
}

export function measureClonedInstance(instance) {
return null;
}

export function wasInstanceInViewport(measurement): boolean {
return true;
}

export function hasInstanceChanged(oldMeasurement, newMeasurement): boolean {
return false;
}

export function hasInstanceAffectedParent(
oldMeasurement,
newMeasurement,
): boolean {
return false;
}

export function startViewTransition() {
return null;
}

export type RunningViewTransition = null;

export function startGestureTransition() {
return null;
}

export function stopViewTransition(transition: RunningViewTransition) {}

export function addViewTransitionFinishedListener(
transition: RunningViewTransition,
callback: () => void,
) {
callback();
}

export type ViewTransitionInstance = null | {name: string, ...};

export function createViewTransitionInstance(
name: string,
): ViewTransitionInstance {
return null;
}

export type GestureTimeline = null;

export function getCurrentGestureOffset(provider: GestureTimeline): number {
throw new Error('startGestureTransition is not yet supported in react-art.');
}

export function clearContainer(container) {
// TODO Implement this
}
Expand Down
1 change: 1 addition & 0 deletions packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -832,6 +832,7 @@ function handleErrorInNextTick(error: any) {
// -------------------

export const supportsMutation = true;
export const supportsViewTransition = true;

export function commitMount(
domElement: Instance,
Expand Down
150 changes: 1 addition & 149 deletions packages/react-native-renderer/src/ReactFiberConfigNative.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
*/

import type {InspectorData, TouchedViewDataAtPoint} from './ReactNativeTypes';
import type {TransitionTypes} from 'react/src/ReactTransitionType';

// Modules provided by RN:
import {
Expand All @@ -35,8 +34,6 @@ import {
} from 'react-reconciler/src/ReactEventPriorities';
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';

import {enableProfilerTimer} from 'shared/ReactFeatureFlags';

import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
import type {ReactContext} from 'shared/ReactTypes';

Expand Down Expand Up @@ -112,6 +109,7 @@ function recursivelyUncacheFiberNode(node: Instance | TextInstance) {
}
}

export * from 'react-reconciler/src/ReactFiberConfigWithNoViewTransition';
export * from 'react-reconciler/src/ReactFiberConfigWithNoPersistence';
export * from 'react-reconciler/src/ReactFiberConfigWithNoHydration';
export * from 'react-reconciler/src/ReactFiberConfigWithNoScopes';
Expand Down Expand Up @@ -590,152 +588,6 @@ export function unhideInstance(instance: Instance, props: Props): void {
);
}

export function applyViewTransitionName(
instance: Instance,
name: string,
className: ?string,
): void {
// Not yet implemented
}

export function restoreViewTransitionName(
instance: Instance,
props: Props,
): void {
// Not yet implemented
}

export function cancelViewTransitionName(
instance: Instance,
name: string,
props: Props,
): void {
// Not yet implemented
}

export function cancelRootViewTransitionName(rootContainer: Container): void {
// Not yet implemented
}

export function restoreRootViewTransitionName(rootContainer: Container): void {
// Not yet implemented
}

export function cloneRootViewTransitionContainer(
rootContainer: Container,
): Instance {
throw new Error('Not implemented.');
}

export function removeRootViewTransitionClone(
rootContainer: Container,
clone: Instance,
): void {
throw new Error('Not implemented.');
}

export type InstanceMeasurement = null;

export function measureInstance(instance: Instance): InstanceMeasurement {
// This heuristic is better implemented at the native layer.
return null;
}

export function measureClonedInstance(instance: Instance): InstanceMeasurement {
return null;
}

export function wasInstanceInViewport(
measurement: InstanceMeasurement,
): boolean {
return true;
}

export function hasInstanceChanged(
oldMeasurement: InstanceMeasurement,
newMeasurement: InstanceMeasurement,
): boolean {
return false;
}

export function hasInstanceAffectedParent(
oldMeasurement: InstanceMeasurement,
newMeasurement: InstanceMeasurement,
): boolean {
return false;
}

export function startViewTransition(
suspendedState: null | SuspendedState,
rootContainer: Container,
transitionTypes: null | TransitionTypes,
mutationCallback: () => void,
layoutCallback: () => void,
afterMutationCallback: () => void,
spawnedWorkCallback: () => void,
passiveCallback: () => mixed,
errorCallback: mixed => void,
blockedCallback: string => void, // Profiling-only
finishedAnimation: () => void, // Profiling-only
): null | RunningViewTransition {
mutationCallback();
layoutCallback();
// Skip afterMutationCallback(). We don't need it since we're not animating.
spawnedWorkCallback();
if (enableProfilerTimer) {
finishedAnimation();
}
// Skip passiveCallback(). Spawned work will schedule a task.
return null;
}

export type RunningViewTransition = null;

export function startGestureTransition(
suspendedState: null | SuspendedState,
rootContainer: Container,
timeline: GestureTimeline,
rangeStart: number,
rangeEnd: number,
transitionTypes: null | TransitionTypes,
mutationCallback: () => void,
animateCallback: () => void,
errorCallback: mixed => void,
finishedAnimation: () => void, // Profiling-only
): null | RunningViewTransition {
mutationCallback();
animateCallback();
if (enableProfilerTimer) {
finishedAnimation();
}
return null;
}

export function stopViewTransition(transition: RunningViewTransition) {}

export function addViewTransitionFinishedListener(
transition: RunningViewTransition,
callback: () => void,
) {
callback();
}

export type ViewTransitionInstance = null | {name: string, ...};

export function createViewTransitionInstance(
name: string,
): ViewTransitionInstance {
return null;
}

export type GestureTimeline = null;

export function getCurrentGestureOffset(provider: GestureTimeline): number {
throw new Error(
'startGestureTransition is not yet supported in React Native.',
);
}

export function clearContainer(container: Container): void {
// TODO Implement this for React Native
// UIManager does not expose a "remove all" type method.
Expand Down
8 changes: 4 additions & 4 deletions packages/react-reconciler/src/ReactFiberCommitViewTransitions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
ViewTransitionNamedStatic,
} from './ReactFiberFlags';
import {
supportsMutation,
supportsViewTransition,
applyViewTransitionName,
restoreViewTransitionName,
measureInstance,
Expand Down Expand Up @@ -139,7 +139,7 @@ function applyViewTransitionToHostInstancesRecursive(
collectMeasurements: null | Array<InstanceMeasurement>,
stopAtNestedViewTransitions: boolean,
): boolean {
if (!supportsMutation) {
if (!supportsViewTransition) {
Copy link
Member

@rickhanlonii rickhanlonii Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sus, i don't know if this makes sense. need to think about this more

return false;
}
let inViewport = false;
Expand Down Expand Up @@ -201,7 +201,7 @@ function restoreViewTransitionOnHostInstances(
child: null | Fiber,
stopAtNestedViewTransitions: boolean,
): void {
if (!supportsMutation) {
if (!supportsViewTransition) {
return;
}
while (child !== null) {
Expand Down Expand Up @@ -648,7 +648,7 @@ function measureViewTransitionHostInstancesRecursive(
previousMeasurements: null | Array<InstanceMeasurement>,
stopAtNestedViewTransitions: boolean,
): boolean {
if (!supportsMutation) {
if (!supportsViewTransition) {
return true;
}
let inViewport = false;
Expand Down
6 changes: 5 additions & 1 deletion packages/react-reconciler/src/ReactFiberCommitWork.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ import {
supportsHydration,
supportsResources,
supportsSingletons,
supportsViewTransition,
clearSuspenseBoundary,
clearSuspenseBoundaryFromContainer,
createContainerChildSet,
Expand Down Expand Up @@ -3709,7 +3710,10 @@ function commitPassiveMountOnFiber(
}

if (isViewTransitionEligible) {
if (supportsMutation && rootViewTransitionNameCanceled) {
if (
supportsViewTransition &&
rootViewTransitionNameCanceled
) {
restoreRootViewTransitionName(finishedRoot.containerInfo);
}
}
Expand Down
20 changes: 0 additions & 20 deletions packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,25 +37,5 @@ export const hideTextInstance = shim;
export const unhideInstance = shim;
export const unhideTextInstance = shim;
export const clearContainer = shim;
export const applyViewTransitionName = shim;
export const restoreViewTransitionName = shim;
export const cancelViewTransitionName = shim;
export const cancelRootViewTransitionName = shim;
export const restoreRootViewTransitionName = shim;
export const cloneRootViewTransitionContainer = shim;
export const removeRootViewTransitionClone = shim;
export type InstanceMeasurement = null;
export const measureInstance = shim;
export const measureClonedInstance = shim;
export const wasInstanceInViewport = shim;
export const hasInstanceChanged = shim;
export const hasInstanceAffectedParent = shim;
export const startViewTransition = shim;
export type RunningViewTransition = null;
export const startGestureTransition = shim;
export const stopViewTransition = shim;
export const addViewTransitionFinishedListener = shim;
export type ViewTransitionInstance = null | {name: string, ...};
export const createViewTransitionInstance = shim;
export type GestureTimeline = any;
export const getCurrentGestureOffset = shim;
Loading
Loading