Add Clean Up Callbacks to View Transition and Gesture Transition Events (#35564)

Stacked on #35556 and #35559.
Given that we don't automatically clean up all view transition
animations since #35337 and browsers are buggy, it's important that you
clean up any `Animation` started manually from the events. However,
there was no clean up function for when the View Transition is forced to
stop. This also makes it harder to clean up custom timers etc too.
This lets you return a clean up function from all the events on
`<ViewTransition>`.

Author: sebmarkbage

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

@@ -82,8 +82,12 @@ export default function Page({url, navigate}) {
 {rotate: '0deg',transformOrigin: '30px 8px'},
 {rotate: '360deg',transformOrigin: '30px 8px'},
 ];
-viewTransition.old.animate(keyframes,250);
-viewTransition.new.animate(keyframes,250);
+constanimation1=viewTransition.old.animate(keyframes,250);
+constanimation2=viewTransition.new.animate(keyframes,250);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }
 
 functiononGestureTransition(
@@ -105,8 +109,12 @@ export default function Page({url, navigate}) {
 rangeStart: (reverse ? rangeEnd : rangeStart)+'%',
 rangeEnd: (reverse ? rangeStart : rangeEnd)+'%',
 };
-viewTransition.old.animate(keyframes,options);
-viewTransition.new.animate(keyframes,options);
+constanimation1=viewTransition.old.animate(keyframes,options);
+constanimation2=viewTransition.new.animate(keyframes,options);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }else{
 // Custom Timeline
 constoptions={
@@ -120,11 +128,10 @@ export default function Page({url, navigate}) {
 // Let the custom timeline take control of driving the animations.
 constcleanup1=timeline.animate(animation1);
 constcleanup2=timeline.animate(animation2);
-// TODO: Support returning a clean up function from ViewTransition events.
-// return () => {
-// cleanup1();
-// cleanup2();
-// };
+return()=>{
+cleanup1();
+cleanup2();
+};
 }
 }
 

packages/react-art/src/ReactFiberConfigART.js

@@ -549,6 +549,13 @@ export function startGestureTransition() {
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2337,6 +2337,7 @@ export function startViewTransition(
 
 exporttypeRunningViewTransition={
 skipTransition(): void,
+finished: Promise<void>,
  ...
 };
 
@@ -2784,6 +2785,13 @@ export function stopViewTransition(transition: RunningViewTransition) {
 transition.skipTransition();
 }
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+transition.finished.finally(callback);
+}
+
 interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
 _scope: HTMLElement;
 _selector: string;

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -713,6 +713,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-noop-renderer/src/createReactNoop.js

@@ -888,6 +888,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
 stopViewTransition(transition: RunningViewTransition){},
 
+addViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+},
+
 createViewTransitionInstance(name: string): ViewTransitionInstance{
  return null;
 },

packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js

@@ -54,6 +54,7 @@ export const startViewTransition = shim;
 exporttypeRunningViewTransition=null;
 exportconststartGestureTransition=shim;
 exportconststopViewTransition=shim;
+exportconstaddViewTransitionFinishedListener=shim;
 exporttypeViewTransitionInstance=null|{name: string, ...};
 exportconstcreateViewTransitionInstance=shim;
 exporttypeGestureTimeline=any;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -120,6 +120,7 @@ import {
 startViewTransition,
 startGestureTransition,
 stopViewTransition,
+addViewTransitionFinishedListener,
 createViewTransitionInstance,
 flushHydrationEvents,
 }from'./ReactFiberConfig';
@@ -733,8 +734,9 @@ let pendingEffectsRenderEndTime: number = -0; // Profiling-only
 letpendingPassiveTransitions: Array<Transition>|null=null;
 let pendingRecoverableErrors: null|Array<CapturedValue<mixed>>=null;
 let pendingViewTransition: null|RunningViewTransition=null;
-letpendingViewTransitionEvents: Array<(types: Array<string>)=>void>|null=
-null;
+letpendingViewTransitionEvents: Array<
+(types: Array<string>)=>void|(()=>void),
+>|null=null;
 let pendingTransitionTypes: null|TransitionTypes=null;
 let pendingDidIncludeRenderPhaseUpdate: boolean=false;
 let pendingSuspendedCommitReason: SuspendedCommitReason=null;// Profiling-only
@@ -899,7 +901,10 @@ export function requestDeferredLane(): Lane {
 
 exportfunctionscheduleViewTransitionEvent(
 fiber: Fiber,
-callback: ?(instance: ViewTransitionInstance,types: Array<string>)=>void,
+callback: ?(
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 ): void{
 if(enableViewTransition){
 if(callback!=null){
@@ -925,7 +930,7 @@ export function scheduleGestureTransitionEvent(
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 ): void{
 if(enableGestureTransition){
 if(callback!=null){
@@ -4143,6 +4148,7 @@ function flushSpawnedWork(): void {
 
 pendingEffectsStatus=NO_PENDING_EFFECTS;
 
+constcommittedViewTransition=pendingViewTransition;
 pendingViewTransition=null;// The view transition has now fully started.
 
 // Tell Scheduler to yield at the end of the frame, so the browser has an
@@ -4262,9 +4268,14 @@ function flushSpawnedWork(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+if(committedViewTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(committedViewTransition,cleanup);
+}
+}
 }
 }
 }
@@ -4532,9 +4543,18 @@ function flushGestureAnimations(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+constappliedGesture=root.pendingGestures;
+if(appliedGesture!==null){
+const runningTransition =appliedGesture.running;
+if(runningTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(runningTransition,cleanup);
+}
+}
+}
 }
 }
 }

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -162,6 +162,8 @@ export const hasInstanceAffectedParent = $$$config.hasInstanceAffectedParent;
 exportconststartViewTransition=$$$config.startViewTransition;
 exportconststartGestureTransition=$$$config.startGestureTransition;
 exportconststopViewTransition=$$$config.stopViewTransition;
+exportconstaddViewTransitionFinishedListener=
+$$$config.addViewTransitionFinishedListener;
 exportconstgetCurrentGestureOffset=$$$config.getCurrentGestureOffset;
 exportconstcreateViewTransitionInstance=
 $$$config.createViewTransitionInstance;

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -459,6 +459,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/shared/ReactTypes.js

@@ -303,34 +303,46 @@ export type ViewTransitionProps = {
 exit?: ViewTransitionClass,
 share?: ViewTransitionClass,
 update?: ViewTransitionClass,
-onEnter?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onExit?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onShare?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onUpdate?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
+onEnter?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+ ) =>void|(()=>void),
+onExit?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onShare?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onUpdate?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 onGestureEnter?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureExit?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureShare?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureUpdate?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 };
 
 export type ActivityProps = {

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

@@ -82,8 +82,12 @@ export default function Page({url, navigate}) {
 {rotate: '0deg',transformOrigin: '30px 8px'},
 {rotate: '360deg',transformOrigin: '30px 8px'},
 ];
-viewTransition.old.animate(keyframes,250);
-viewTransition.new.animate(keyframes,250);
+constanimation1=viewTransition.old.animate(keyframes,250);
+constanimation2=viewTransition.new.animate(keyframes,250);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }
 
 functiononGestureTransition(
@@ -105,8 +109,12 @@ export default function Page({url, navigate}) {
 rangeStart: (reverse ? rangeEnd : rangeStart)+'%',
 rangeEnd: (reverse ? rangeStart : rangeEnd)+'%',
 };
-viewTransition.old.animate(keyframes,options);
-viewTransition.new.animate(keyframes,options);
+constanimation1=viewTransition.old.animate(keyframes,options);
+constanimation2=viewTransition.new.animate(keyframes,options);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }else{
 // Custom Timeline
 constoptions={
@@ -120,11 +128,10 @@ export default function Page({url, navigate}) {
 // Let the custom timeline take control of driving the animations.
 constcleanup1=timeline.animate(animation1);
 constcleanup2=timeline.animate(animation2);
-// TODO: Support returning a clean up function from ViewTransition events.
-// return () => {
-// cleanup1();
-// cleanup2();
-// };
+return()=>{
+cleanup1();
+cleanup2();
+};
 }
 }
 

packages/react-art/src/ReactFiberConfigART.js

@@ -549,6 +549,13 @@ export function startGestureTransition() {
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2337,6 +2337,7 @@ export function startViewTransition(
 
 exporttypeRunningViewTransition={
 skipTransition(): void,
+finished: Promise<void>,
  ...
 };
 
@@ -2784,6 +2785,13 @@ export function stopViewTransition(transition: RunningViewTransition) {
 transition.skipTransition();
 }
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+transition.finished.finally(callback);
+}
+
 interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
 _scope: HTMLElement;
 _selector: string;

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -713,6 +713,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-noop-renderer/src/createReactNoop.js

@@ -888,6 +888,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
 stopViewTransition(transition: RunningViewTransition){},
 
+addViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+},
+
 createViewTransitionInstance(name: string): ViewTransitionInstance{
  return null;
 },

packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js

@@ -54,6 +54,7 @@ export const startViewTransition = shim;
 exporttypeRunningViewTransition=null;
 exportconststartGestureTransition=shim;
 exportconststopViewTransition=shim;
+exportconstaddViewTransitionFinishedListener=shim;
 exporttypeViewTransitionInstance=null|{name: string, ...};
 exportconstcreateViewTransitionInstance=shim;
 exporttypeGestureTimeline=any;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -120,6 +120,7 @@ import {
 startViewTransition,
 startGestureTransition,
 stopViewTransition,
+addViewTransitionFinishedListener,
 createViewTransitionInstance,
 flushHydrationEvents,
 }from'./ReactFiberConfig';
@@ -733,8 +734,9 @@ let pendingEffectsRenderEndTime: number = -0; // Profiling-only
 letpendingPassiveTransitions: Array<Transition>|null=null;
 let pendingRecoverableErrors: null|Array<CapturedValue<mixed>>=null;
 let pendingViewTransition: null|RunningViewTransition=null;
-letpendingViewTransitionEvents: Array<(types: Array<string>)=>void>|null=
-null;
+letpendingViewTransitionEvents: Array<
+(types: Array<string>)=>void|(()=>void),
+>|null=null;
 let pendingTransitionTypes: null|TransitionTypes=null;
 let pendingDidIncludeRenderPhaseUpdate: boolean=false;
 let pendingSuspendedCommitReason: SuspendedCommitReason=null;// Profiling-only
@@ -899,7 +901,10 @@ export function requestDeferredLane(): Lane {
 
 exportfunctionscheduleViewTransitionEvent(
 fiber: Fiber,
-callback: ?(instance: ViewTransitionInstance,types: Array<string>)=>void,
+callback: ?(
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 ): void{
 if(enableViewTransition){
 if(callback!=null){
@@ -925,7 +930,7 @@ export function scheduleGestureTransitionEvent(
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 ): void{
 if(enableGestureTransition){
 if(callback!=null){
@@ -4143,6 +4148,7 @@ function flushSpawnedWork(): void {
 
 pendingEffectsStatus=NO_PENDING_EFFECTS;
 
+constcommittedViewTransition=pendingViewTransition;
 pendingViewTransition=null;// The view transition has now fully started.
 
 // Tell Scheduler to yield at the end of the frame, so the browser has an
@@ -4262,9 +4268,14 @@ function flushSpawnedWork(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+if(committedViewTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(committedViewTransition,cleanup);
+}
+}
 }
 }
 }
@@ -4532,9 +4543,18 @@ function flushGestureAnimations(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+constappliedGesture=root.pendingGestures;
+if(appliedGesture!==null){
+const runningTransition =appliedGesture.running;
+if(runningTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(runningTransition,cleanup);
+}
+}
+}
 }
 }
 }

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -162,6 +162,8 @@ export const hasInstanceAffectedParent = $$$config.hasInstanceAffectedParent;
 exportconststartViewTransition=$$$config.startViewTransition;
 exportconststartGestureTransition=$$$config.startGestureTransition;
 exportconststopViewTransition=$$$config.stopViewTransition;
+exportconstaddViewTransitionFinishedListener=
+$$$config.addViewTransitionFinishedListener;
 exportconstgetCurrentGestureOffset=$$$config.getCurrentGestureOffset;
 exportconstcreateViewTransitionInstance=
 $$$config.createViewTransitionInstance;

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -459,6 +459,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/shared/ReactTypes.js

@@ -303,34 +303,46 @@ export type ViewTransitionProps = {
 exit?: ViewTransitionClass,
 share?: ViewTransitionClass,
 update?: ViewTransitionClass,
-onEnter?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onExit?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onShare?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onUpdate?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
+onEnter?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+ ) =>void|(()=>void),
+onExit?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onShare?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onUpdate?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 onGestureEnter?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureExit?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureShare?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureUpdate?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 };
 
 export type ActivityProps = {

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

@@ -82,8 +82,12 @@ export default function Page({url, navigate}) {
 {rotate: '0deg',transformOrigin: '30px 8px'},
 {rotate: '360deg',transformOrigin: '30px 8px'},
 ];
-viewTransition.old.animate(keyframes,250);
-viewTransition.new.animate(keyframes,250);
+constanimation1=viewTransition.old.animate(keyframes,250);
+constanimation2=viewTransition.new.animate(keyframes,250);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }
 
 functiononGestureTransition(
@@ -105,8 +109,12 @@ export default function Page({url, navigate}) {
 rangeStart: (reverse ? rangeEnd : rangeStart)+'%',
 rangeEnd: (reverse ? rangeStart : rangeEnd)+'%',
 };
-viewTransition.old.animate(keyframes,options);
-viewTransition.new.animate(keyframes,options);
+constanimation1=viewTransition.old.animate(keyframes,options);
+constanimation2=viewTransition.new.animate(keyframes,options);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }else{
 // Custom Timeline
 constoptions={
@@ -120,11 +128,10 @@ export default function Page({url, navigate}) {
 // Let the custom timeline take control of driving the animations.
 constcleanup1=timeline.animate(animation1);
 constcleanup2=timeline.animate(animation2);
-// TODO: Support returning a clean up function from ViewTransition events.
-// return () => {
-// cleanup1();
-// cleanup2();
-// };
+return()=>{
+cleanup1();
+cleanup2();
+};
 }
 }
 

packages/react-art/src/ReactFiberConfigART.js

@@ -549,6 +549,13 @@ export function startGestureTransition() {
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2337,6 +2337,7 @@ export function startViewTransition(
 
 exporttypeRunningViewTransition={
 skipTransition(): void,
+finished: Promise<void>,
  ...
 };
 
@@ -2784,6 +2785,13 @@ export function stopViewTransition(transition: RunningViewTransition) {
 transition.skipTransition();
 }
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+transition.finished.finally(callback);
+}
+
 interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
 _scope: HTMLElement;
 _selector: string;

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -713,6 +713,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-noop-renderer/src/createReactNoop.js

@@ -888,6 +888,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
 stopViewTransition(transition: RunningViewTransition){},
 
+addViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+},
+
 createViewTransitionInstance(name: string): ViewTransitionInstance{
  return null;
 },

packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js

@@ -54,6 +54,7 @@ export const startViewTransition = shim;
 exporttypeRunningViewTransition=null;
 exportconststartGestureTransition=shim;
 exportconststopViewTransition=shim;
+exportconstaddViewTransitionFinishedListener=shim;
 exporttypeViewTransitionInstance=null|{name: string, ...};
 exportconstcreateViewTransitionInstance=shim;
 exporttypeGestureTimeline=any;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -120,6 +120,7 @@ import {
 startViewTransition,
 startGestureTransition,
 stopViewTransition,
+addViewTransitionFinishedListener,
 createViewTransitionInstance,
 flushHydrationEvents,
 }from'./ReactFiberConfig';
@@ -733,8 +734,9 @@ let pendingEffectsRenderEndTime: number = -0; // Profiling-only
 letpendingPassiveTransitions: Array<Transition>|null=null;
 let pendingRecoverableErrors: null|Array<CapturedValue<mixed>>=null;
 let pendingViewTransition: null|RunningViewTransition=null;
-letpendingViewTransitionEvents: Array<(types: Array<string>)=>void>|null=
-null;
+letpendingViewTransitionEvents: Array<
+(types: Array<string>)=>void|(()=>void),
+>|null=null;
 let pendingTransitionTypes: null|TransitionTypes=null;
 let pendingDidIncludeRenderPhaseUpdate: boolean=false;
 let pendingSuspendedCommitReason: SuspendedCommitReason=null;// Profiling-only
@@ -899,7 +901,10 @@ export function requestDeferredLane(): Lane {
 
 exportfunctionscheduleViewTransitionEvent(
 fiber: Fiber,
-callback: ?(instance: ViewTransitionInstance,types: Array<string>)=>void,
+callback: ?(
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 ): void{
 if(enableViewTransition){
 if(callback!=null){
@@ -925,7 +930,7 @@ export function scheduleGestureTransitionEvent(
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 ): void{
 if(enableGestureTransition){
 if(callback!=null){
@@ -4143,6 +4148,7 @@ function flushSpawnedWork(): void {
 
 pendingEffectsStatus=NO_PENDING_EFFECTS;
 
+constcommittedViewTransition=pendingViewTransition;
 pendingViewTransition=null;// The view transition has now fully started.
 
 // Tell Scheduler to yield at the end of the frame, so the browser has an
@@ -4262,9 +4268,14 @@ function flushSpawnedWork(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+if(committedViewTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(committedViewTransition,cleanup);
+}
+}
 }
 }
 }
@@ -4532,9 +4543,18 @@ function flushGestureAnimations(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+constappliedGesture=root.pendingGestures;
+if(appliedGesture!==null){
+const runningTransition =appliedGesture.running;
+if(runningTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(runningTransition,cleanup);
+}
+}
+}
 }
 }
 }

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -162,6 +162,8 @@ export const hasInstanceAffectedParent = $$$config.hasInstanceAffectedParent;
 exportconststartViewTransition=$$$config.startViewTransition;
 exportconststartGestureTransition=$$$config.startGestureTransition;
 exportconststopViewTransition=$$$config.stopViewTransition;
+exportconstaddViewTransitionFinishedListener=
+$$$config.addViewTransitionFinishedListener;
 exportconstgetCurrentGestureOffset=$$$config.getCurrentGestureOffset;
 exportconstcreateViewTransitionInstance=
 $$$config.createViewTransitionInstance;

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -459,6 +459,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/shared/ReactTypes.js

@@ -303,34 +303,46 @@ export type ViewTransitionProps = {
 exit?: ViewTransitionClass,
 share?: ViewTransitionClass,
 update?: ViewTransitionClass,
-onEnter?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onExit?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onShare?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onUpdate?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
+onEnter?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+ ) =>void|(()=>void),
+onExit?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onShare?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onUpdate?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 onGestureEnter?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureExit?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureShare?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureUpdate?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 };
 
 export type ActivityProps = {

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

@@ -82,8 +82,12 @@ export default function Page({url, navigate}) {
 {rotate: '0deg',transformOrigin: '30px 8px'},
 {rotate: '360deg',transformOrigin: '30px 8px'},
 ];
-viewTransition.old.animate(keyframes,250);
-viewTransition.new.animate(keyframes,250);
+constanimation1=viewTransition.old.animate(keyframes,250);
+constanimation2=viewTransition.new.animate(keyframes,250);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }
 
 functiononGestureTransition(
@@ -105,8 +109,12 @@ export default function Page({url, navigate}) {
 rangeStart: (reverse ? rangeEnd : rangeStart)+'%',
 rangeEnd: (reverse ? rangeStart : rangeEnd)+'%',
 };
-viewTransition.old.animate(keyframes,options);
-viewTransition.new.animate(keyframes,options);
+constanimation1=viewTransition.old.animate(keyframes,options);
+constanimation2=viewTransition.new.animate(keyframes,options);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }else{
 // Custom Timeline
 constoptions={
@@ -120,11 +128,10 @@ export default function Page({url, navigate}) {
 // Let the custom timeline take control of driving the animations.
 constcleanup1=timeline.animate(animation1);
 constcleanup2=timeline.animate(animation2);
-// TODO: Support returning a clean up function from ViewTransition events.
-// return () => {
-// cleanup1();
-// cleanup2();
-// };
+return()=>{
+cleanup1();
+cleanup2();
+};
 }
 }
 

packages/react-art/src/ReactFiberConfigART.js

@@ -549,6 +549,13 @@ export function startGestureTransition() {
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2337,6 +2337,7 @@ export function startViewTransition(
 
 exporttypeRunningViewTransition={
 skipTransition(): void,
+finished: Promise<void>,
  ...
 };
 
@@ -2784,6 +2785,13 @@ export function stopViewTransition(transition: RunningViewTransition) {
 transition.skipTransition();
 }
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+transition.finished.finally(callback);
+}
+
 interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
 _scope: HTMLElement;
 _selector: string;

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -713,6 +713,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-noop-renderer/src/createReactNoop.js

@@ -888,6 +888,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
 stopViewTransition(transition: RunningViewTransition){},
 
+addViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+},
+
 createViewTransitionInstance(name: string): ViewTransitionInstance{
  return null;
 },

packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js

@@ -54,6 +54,7 @@ export const startViewTransition = shim;
 exporttypeRunningViewTransition=null;
 exportconststartGestureTransition=shim;
 exportconststopViewTransition=shim;
+exportconstaddViewTransitionFinishedListener=shim;
 exporttypeViewTransitionInstance=null|{name: string, ...};
 exportconstcreateViewTransitionInstance=shim;
 exporttypeGestureTimeline=any;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -120,6 +120,7 @@ import {
 startViewTransition,
 startGestureTransition,
 stopViewTransition,
+addViewTransitionFinishedListener,
 createViewTransitionInstance,
 flushHydrationEvents,
 }from'./ReactFiberConfig';
@@ -733,8 +734,9 @@ let pendingEffectsRenderEndTime: number = -0; // Profiling-only
 letpendingPassiveTransitions: Array<Transition>|null=null;
 let pendingRecoverableErrors: null|Array<CapturedValue<mixed>>=null;
 let pendingViewTransition: null|RunningViewTransition=null;
-letpendingViewTransitionEvents: Array<(types: Array<string>)=>void>|null=
-null;
+letpendingViewTransitionEvents: Array<
+(types: Array<string>)=>void|(()=>void),
+>|null=null;
 let pendingTransitionTypes: null|TransitionTypes=null;
 let pendingDidIncludeRenderPhaseUpdate: boolean=false;
 let pendingSuspendedCommitReason: SuspendedCommitReason=null;// Profiling-only
@@ -899,7 +901,10 @@ export function requestDeferredLane(): Lane {
 
 exportfunctionscheduleViewTransitionEvent(
 fiber: Fiber,
-callback: ?(instance: ViewTransitionInstance,types: Array<string>)=>void,
+callback: ?(
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 ): void{
 if(enableViewTransition){
 if(callback!=null){
@@ -925,7 +930,7 @@ export function scheduleGestureTransitionEvent(
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 ): void{
 if(enableGestureTransition){
 if(callback!=null){
@@ -4143,6 +4148,7 @@ function flushSpawnedWork(): void {
 
 pendingEffectsStatus=NO_PENDING_EFFECTS;
 
+constcommittedViewTransition=pendingViewTransition;
 pendingViewTransition=null;// The view transition has now fully started.
 
 // Tell Scheduler to yield at the end of the frame, so the browser has an
@@ -4262,9 +4268,14 @@ function flushSpawnedWork(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+if(committedViewTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(committedViewTransition,cleanup);
+}
+}
 }
 }
 }
@@ -4532,9 +4543,18 @@ function flushGestureAnimations(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+constappliedGesture=root.pendingGestures;
+if(appliedGesture!==null){
+const runningTransition =appliedGesture.running;
+if(runningTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(runningTransition,cleanup);
+}
+}
+}
 }
 }
 }

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -162,6 +162,8 @@ export const hasInstanceAffectedParent = $$$config.hasInstanceAffectedParent;
 exportconststartViewTransition=$$$config.startViewTransition;
 exportconststartGestureTransition=$$$config.startGestureTransition;
 exportconststopViewTransition=$$$config.stopViewTransition;
+exportconstaddViewTransitionFinishedListener=
+$$$config.addViewTransitionFinishedListener;
 exportconstgetCurrentGestureOffset=$$$config.getCurrentGestureOffset;
 exportconstcreateViewTransitionInstance=
 $$$config.createViewTransitionInstance;

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -459,6 +459,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/shared/ReactTypes.js

@@ -303,34 +303,46 @@ export type ViewTransitionProps = {
 exit?: ViewTransitionClass,
 share?: ViewTransitionClass,
 update?: ViewTransitionClass,
-onEnter?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onExit?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onShare?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onUpdate?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
+onEnter?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+ ) =>void|(()=>void),
+onExit?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onShare?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onUpdate?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 onGestureEnter?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureExit?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureShare?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureUpdate?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 };
 
 export type ActivityProps = {

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

@@ -82,8 +82,12 @@ export default function Page({url, navigate}) {
 {rotate: '0deg',transformOrigin: '30px 8px'},
 {rotate: '360deg',transformOrigin: '30px 8px'},
 ];
-viewTransition.old.animate(keyframes,250);
-viewTransition.new.animate(keyframes,250);
+constanimation1=viewTransition.old.animate(keyframes,250);
+constanimation2=viewTransition.new.animate(keyframes,250);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }
 
 functiononGestureTransition(
@@ -105,8 +109,12 @@ export default function Page({url, navigate}) {
 rangeStart: (reverse ? rangeEnd : rangeStart)+'%',
 rangeEnd: (reverse ? rangeStart : rangeEnd)+'%',
 };
-viewTransition.old.animate(keyframes,options);
-viewTransition.new.animate(keyframes,options);
+constanimation1=viewTransition.old.animate(keyframes,options);
+constanimation2=viewTransition.new.animate(keyframes,options);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }else{
 // Custom Timeline
 constoptions={
@@ -120,11 +128,10 @@ export default function Page({url, navigate}) {
 // Let the custom timeline take control of driving the animations.
 constcleanup1=timeline.animate(animation1);
 constcleanup2=timeline.animate(animation2);
-// TODO: Support returning a clean up function from ViewTransition events.
-// return () => {
-// cleanup1();
-// cleanup2();
-// };
+return()=>{
+cleanup1();
+cleanup2();
+};
 }
 }
 

packages/react-art/src/ReactFiberConfigART.js

@@ -549,6 +549,13 @@ export function startGestureTransition() {
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2337,6 +2337,7 @@ export function startViewTransition(
 
 exporttypeRunningViewTransition={
 skipTransition(): void,
+finished: Promise<void>,
  ...
 };
 
@@ -2784,6 +2785,13 @@ export function stopViewTransition(transition: RunningViewTransition) {
 transition.skipTransition();
 }
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+transition.finished.finally(callback);
+}
+
 interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
 _scope: HTMLElement;
 _selector: string;

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -713,6 +713,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-noop-renderer/src/createReactNoop.js

@@ -888,6 +888,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
 stopViewTransition(transition: RunningViewTransition){},
 
+addViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+},
+
 createViewTransitionInstance(name: string): ViewTransitionInstance{
  return null;
 },

packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js

@@ -54,6 +54,7 @@ export const startViewTransition = shim;
 exporttypeRunningViewTransition=null;
 exportconststartGestureTransition=shim;
 exportconststopViewTransition=shim;
+exportconstaddViewTransitionFinishedListener=shim;
 exporttypeViewTransitionInstance=null|{name: string, ...};
 exportconstcreateViewTransitionInstance=shim;
 exporttypeGestureTimeline=any;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -120,6 +120,7 @@ import {
 startViewTransition,
 startGestureTransition,
 stopViewTransition,
+addViewTransitionFinishedListener,
 createViewTransitionInstance,
 flushHydrationEvents,
 }from'./ReactFiberConfig';
@@ -733,8 +734,9 @@ let pendingEffectsRenderEndTime: number = -0; // Profiling-only
 letpendingPassiveTransitions: Array<Transition>|null=null;
 let pendingRecoverableErrors: null|Array<CapturedValue<mixed>>=null;
 let pendingViewTransition: null|RunningViewTransition=null;
-letpendingViewTransitionEvents: Array<(types: Array<string>)=>void>|null=
-null;
+letpendingViewTransitionEvents: Array<
+(types: Array<string>)=>void|(()=>void),
+>|null=null;
 let pendingTransitionTypes: null|TransitionTypes=null;
 let pendingDidIncludeRenderPhaseUpdate: boolean=false;
 let pendingSuspendedCommitReason: SuspendedCommitReason=null;// Profiling-only
@@ -899,7 +901,10 @@ export function requestDeferredLane(): Lane {
 
 exportfunctionscheduleViewTransitionEvent(
 fiber: Fiber,
-callback: ?(instance: ViewTransitionInstance,types: Array<string>)=>void,
+callback: ?(
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 ): void{
 if(enableViewTransition){
 if(callback!=null){
@@ -925,7 +930,7 @@ export function scheduleGestureTransitionEvent(
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 ): void{
 if(enableGestureTransition){
 if(callback!=null){
@@ -4143,6 +4148,7 @@ function flushSpawnedWork(): void {
 
 pendingEffectsStatus=NO_PENDING_EFFECTS;
 
+constcommittedViewTransition=pendingViewTransition;
 pendingViewTransition=null;// The view transition has now fully started.
 
 // Tell Scheduler to yield at the end of the frame, so the browser has an
@@ -4262,9 +4268,14 @@ function flushSpawnedWork(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+if(committedViewTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(committedViewTransition,cleanup);
+}
+}
 }
 }
 }
@@ -4532,9 +4543,18 @@ function flushGestureAnimations(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+constappliedGesture=root.pendingGestures;
+if(appliedGesture!==null){
+const runningTransition =appliedGesture.running;
+if(runningTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(runningTransition,cleanup);
+}
+}
+}
 }
 }
 }

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -162,6 +162,8 @@ export const hasInstanceAffectedParent = $$$config.hasInstanceAffectedParent;
 exportconststartViewTransition=$$$config.startViewTransition;
 exportconststartGestureTransition=$$$config.startGestureTransition;
 exportconststopViewTransition=$$$config.stopViewTransition;
+exportconstaddViewTransitionFinishedListener=
+$$$config.addViewTransitionFinishedListener;
 exportconstgetCurrentGestureOffset=$$$config.getCurrentGestureOffset;
 exportconstcreateViewTransitionInstance=
 $$$config.createViewTransitionInstance;

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -459,6 +459,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/shared/ReactTypes.js

@@ -303,34 +303,46 @@ export type ViewTransitionProps = {
 exit?: ViewTransitionClass,
 share?: ViewTransitionClass,
 update?: ViewTransitionClass,
-onEnter?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onExit?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onShare?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onUpdate?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
+onEnter?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+ ) =>void|(()=>void),
+onExit?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onShare?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onUpdate?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 onGestureEnter?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureExit?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureShare?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureUpdate?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 };
 
 export type ActivityProps = {

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

@@ -82,8 +82,12 @@ export default function Page({url, navigate}) {
 {rotate: '0deg',transformOrigin: '30px 8px'},
 {rotate: '360deg',transformOrigin: '30px 8px'},
 ];
-viewTransition.old.animate(keyframes,250);
-viewTransition.new.animate(keyframes,250);
+constanimation1=viewTransition.old.animate(keyframes,250);
+constanimation2=viewTransition.new.animate(keyframes,250);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }
 
 functiononGestureTransition(
@@ -105,8 +109,12 @@ export default function Page({url, navigate}) {
 rangeStart: (reverse ? rangeEnd : rangeStart)+'%',
 rangeEnd: (reverse ? rangeStart : rangeEnd)+'%',
 };
-viewTransition.old.animate(keyframes,options);
-viewTransition.new.animate(keyframes,options);
+constanimation1=viewTransition.old.animate(keyframes,options);
+constanimation2=viewTransition.new.animate(keyframes,options);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }else{
 // Custom Timeline
 constoptions={
@@ -120,11 +128,10 @@ export default function Page({url, navigate}) {
 // Let the custom timeline take control of driving the animations.
 constcleanup1=timeline.animate(animation1);
 constcleanup2=timeline.animate(animation2);
-// TODO: Support returning a clean up function from ViewTransition events.
-// return () => {
-// cleanup1();
-// cleanup2();
-// };
+return()=>{
+cleanup1();
+cleanup2();
+};
 }
 }
 

packages/react-art/src/ReactFiberConfigART.js

@@ -549,6 +549,13 @@ export function startGestureTransition() {
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2337,6 +2337,7 @@ export function startViewTransition(
 
 exporttypeRunningViewTransition={
 skipTransition(): void,
+finished: Promise<void>,
  ...
 };
 
@@ -2784,6 +2785,13 @@ export function stopViewTransition(transition: RunningViewTransition) {
 transition.skipTransition();
 }
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+transition.finished.finally(callback);
+}
+
 interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
 _scope: HTMLElement;
 _selector: string;

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -713,6 +713,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-noop-renderer/src/createReactNoop.js

@@ -888,6 +888,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
 stopViewTransition(transition: RunningViewTransition){},
 
+addViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+},
+
 createViewTransitionInstance(name: string): ViewTransitionInstance{
  return null;
 },

packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js

@@ -54,6 +54,7 @@ export const startViewTransition = shim;
 exporttypeRunningViewTransition=null;
 exportconststartGestureTransition=shim;
 exportconststopViewTransition=shim;
+exportconstaddViewTransitionFinishedListener=shim;
 exporttypeViewTransitionInstance=null|{name: string, ...};
 exportconstcreateViewTransitionInstance=shim;
 exporttypeGestureTimeline=any;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -120,6 +120,7 @@ import {
 startViewTransition,
 startGestureTransition,
 stopViewTransition,
+addViewTransitionFinishedListener,
 createViewTransitionInstance,
 flushHydrationEvents,
 }from'./ReactFiberConfig';
@@ -733,8 +734,9 @@ let pendingEffectsRenderEndTime: number = -0; // Profiling-only
 letpendingPassiveTransitions: Array<Transition>|null=null;
 let pendingRecoverableErrors: null|Array<CapturedValue<mixed>>=null;
 let pendingViewTransition: null|RunningViewTransition=null;
-letpendingViewTransitionEvents: Array<(types: Array<string>)=>void>|null=
-null;
+letpendingViewTransitionEvents: Array<
+(types: Array<string>)=>void|(()=>void),
+>|null=null;
 let pendingTransitionTypes: null|TransitionTypes=null;
 let pendingDidIncludeRenderPhaseUpdate: boolean=false;
 let pendingSuspendedCommitReason: SuspendedCommitReason=null;// Profiling-only
@@ -899,7 +901,10 @@ export function requestDeferredLane(): Lane {
 
 exportfunctionscheduleViewTransitionEvent(
 fiber: Fiber,
-callback: ?(instance: ViewTransitionInstance,types: Array<string>)=>void,
+callback: ?(
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 ): void{
 if(enableViewTransition){
 if(callback!=null){
@@ -925,7 +930,7 @@ export function scheduleGestureTransitionEvent(
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 ): void{
 if(enableGestureTransition){
 if(callback!=null){
@@ -4143,6 +4148,7 @@ function flushSpawnedWork(): void {
 
 pendingEffectsStatus=NO_PENDING_EFFECTS;
 
+constcommittedViewTransition=pendingViewTransition;
 pendingViewTransition=null;// The view transition has now fully started.
 
 // Tell Scheduler to yield at the end of the frame, so the browser has an
@@ -4262,9 +4268,14 @@ function flushSpawnedWork(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+if(committedViewTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(committedViewTransition,cleanup);
+}
+}
 }
 }
 }
@@ -4532,9 +4543,18 @@ function flushGestureAnimations(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+constappliedGesture=root.pendingGestures;
+if(appliedGesture!==null){
+const runningTransition =appliedGesture.running;
+if(runningTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(runningTransition,cleanup);
+}
+}
+}
 }
 }
 }

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -162,6 +162,8 @@ export const hasInstanceAffectedParent = $$$config.hasInstanceAffectedParent;
 exportconststartViewTransition=$$$config.startViewTransition;
 exportconststartGestureTransition=$$$config.startGestureTransition;
 exportconststopViewTransition=$$$config.stopViewTransition;
+exportconstaddViewTransitionFinishedListener=
+$$$config.addViewTransitionFinishedListener;
 exportconstgetCurrentGestureOffset=$$$config.getCurrentGestureOffset;
 exportconstcreateViewTransitionInstance=
 $$$config.createViewTransitionInstance;

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -459,6 +459,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/shared/ReactTypes.js

@@ -303,34 +303,46 @@ export type ViewTransitionProps = {
 exit?: ViewTransitionClass,
 share?: ViewTransitionClass,
 update?: ViewTransitionClass,
-onEnter?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onExit?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onShare?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onUpdate?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
+onEnter?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+ ) =>void|(()=>void),
+onExit?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onShare?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onUpdate?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 onGestureEnter?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureExit?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureShare?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureUpdate?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 };
 
 export type ActivityProps = {

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

@@ -82,8 +82,12 @@ export default function Page({url, navigate}) {
 {rotate: '0deg',transformOrigin: '30px 8px'},
 {rotate: '360deg',transformOrigin: '30px 8px'},
 ];
-viewTransition.old.animate(keyframes,250);
-viewTransition.new.animate(keyframes,250);
+constanimation1=viewTransition.old.animate(keyframes,250);
+constanimation2=viewTransition.new.animate(keyframes,250);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }
 
 functiononGestureTransition(
@@ -105,8 +109,12 @@ export default function Page({url, navigate}) {
 rangeStart: (reverse ? rangeEnd : rangeStart)+'%',
 rangeEnd: (reverse ? rangeStart : rangeEnd)+'%',
 };
-viewTransition.old.animate(keyframes,options);
-viewTransition.new.animate(keyframes,options);
+constanimation1=viewTransition.old.animate(keyframes,options);
+constanimation2=viewTransition.new.animate(keyframes,options);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }else{
 // Custom Timeline
 constoptions={
@@ -120,11 +128,10 @@ export default function Page({url, navigate}) {
 // Let the custom timeline take control of driving the animations.
 constcleanup1=timeline.animate(animation1);
 constcleanup2=timeline.animate(animation2);
-// TODO: Support returning a clean up function from ViewTransition events.
-// return () => {
-// cleanup1();
-// cleanup2();
-// };
+return()=>{
+cleanup1();
+cleanup2();
+};
 }
 }
 

packages/react-art/src/ReactFiberConfigART.js

@@ -549,6 +549,13 @@ export function startGestureTransition() {
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2337,6 +2337,7 @@ export function startViewTransition(
 
 exporttypeRunningViewTransition={
 skipTransition(): void,
+finished: Promise<void>,
  ...
 };
 
@@ -2784,6 +2785,13 @@ export function stopViewTransition(transition: RunningViewTransition) {
 transition.skipTransition();
 }
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+transition.finished.finally(callback);
+}
+
 interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
 _scope: HTMLElement;
 _selector: string;

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -713,6 +713,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-noop-renderer/src/createReactNoop.js

@@ -888,6 +888,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
 stopViewTransition(transition: RunningViewTransition){},
 
+addViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+},
+
 createViewTransitionInstance(name: string): ViewTransitionInstance{
  return null;
 },

packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js

@@ -54,6 +54,7 @@ export const startViewTransition = shim;
 exporttypeRunningViewTransition=null;
 exportconststartGestureTransition=shim;
 exportconststopViewTransition=shim;
+exportconstaddViewTransitionFinishedListener=shim;
 exporttypeViewTransitionInstance=null|{name: string, ...};
 exportconstcreateViewTransitionInstance=shim;
 exporttypeGestureTimeline=any;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -120,6 +120,7 @@ import {
 startViewTransition,
 startGestureTransition,
 stopViewTransition,
+addViewTransitionFinishedListener,
 createViewTransitionInstance,
 flushHydrationEvents,
 }from'./ReactFiberConfig';
@@ -733,8 +734,9 @@ let pendingEffectsRenderEndTime: number = -0; // Profiling-only
 letpendingPassiveTransitions: Array<Transition>|null=null;
 let pendingRecoverableErrors: null|Array<CapturedValue<mixed>>=null;
 let pendingViewTransition: null|RunningViewTransition=null;
-letpendingViewTransitionEvents: Array<(types: Array<string>)=>void>|null=
-null;
+letpendingViewTransitionEvents: Array<
+(types: Array<string>)=>void|(()=>void),
+>|null=null;
 let pendingTransitionTypes: null|TransitionTypes=null;
 let pendingDidIncludeRenderPhaseUpdate: boolean=false;
 let pendingSuspendedCommitReason: SuspendedCommitReason=null;// Profiling-only
@@ -899,7 +901,10 @@ export function requestDeferredLane(): Lane {
 
 exportfunctionscheduleViewTransitionEvent(
 fiber: Fiber,
-callback: ?(instance: ViewTransitionInstance,types: Array<string>)=>void,
+callback: ?(
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 ): void{
 if(enableViewTransition){
 if(callback!=null){
@@ -925,7 +930,7 @@ export function scheduleGestureTransitionEvent(
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 ): void{
 if(enableGestureTransition){
 if(callback!=null){
@@ -4143,6 +4148,7 @@ function flushSpawnedWork(): void {
 
 pendingEffectsStatus=NO_PENDING_EFFECTS;
 
+constcommittedViewTransition=pendingViewTransition;
 pendingViewTransition=null;// The view transition has now fully started.
 
 // Tell Scheduler to yield at the end of the frame, so the browser has an
@@ -4262,9 +4268,14 @@ function flushSpawnedWork(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+if(committedViewTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(committedViewTransition,cleanup);
+}
+}
 }
 }
 }
@@ -4532,9 +4543,18 @@ function flushGestureAnimations(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+constappliedGesture=root.pendingGestures;
+if(appliedGesture!==null){
+const runningTransition =appliedGesture.running;
+if(runningTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(runningTransition,cleanup);
+}
+}
+}
 }
 }
 }

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -162,6 +162,8 @@ export const hasInstanceAffectedParent = $$$config.hasInstanceAffectedParent;
 exportconststartViewTransition=$$$config.startViewTransition;
 exportconststartGestureTransition=$$$config.startGestureTransition;
 exportconststopViewTransition=$$$config.stopViewTransition;
+exportconstaddViewTransitionFinishedListener=
+$$$config.addViewTransitionFinishedListener;
 exportconstgetCurrentGestureOffset=$$$config.getCurrentGestureOffset;
 exportconstcreateViewTransitionInstance=
 $$$config.createViewTransitionInstance;

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -459,6 +459,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/shared/ReactTypes.js

@@ -303,34 +303,46 @@ export type ViewTransitionProps = {
 exit?: ViewTransitionClass,
 share?: ViewTransitionClass,
 update?: ViewTransitionClass,
-onEnter?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onExit?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onShare?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onUpdate?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
+onEnter?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+ ) =>void|(()=>void),
+onExit?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onShare?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onUpdate?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 onGestureEnter?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureExit?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureShare?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureUpdate?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 };
 
 export type ActivityProps = {

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

@@ -82,8 +82,12 @@ export default function Page({url, navigate}) {
 {rotate: '0deg',transformOrigin: '30px 8px'},
 {rotate: '360deg',transformOrigin: '30px 8px'},
 ];
-viewTransition.old.animate(keyframes,250);
-viewTransition.new.animate(keyframes,250);
+constanimation1=viewTransition.old.animate(keyframes,250);
+constanimation2=viewTransition.new.animate(keyframes,250);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }
 
 functiononGestureTransition(
@@ -105,8 +109,12 @@ export default function Page({url, navigate}) {
 rangeStart: (reverse ? rangeEnd : rangeStart)+'%',
 rangeEnd: (reverse ? rangeStart : rangeEnd)+'%',
 };
-viewTransition.old.animate(keyframes,options);
-viewTransition.new.animate(keyframes,options);
+constanimation1=viewTransition.old.animate(keyframes,options);
+constanimation2=viewTransition.new.animate(keyframes,options);
+return()=>{
+animation1.cancel();
+animation2.cancel();
+};
 }else{
 // Custom Timeline
 constoptions={
@@ -120,11 +128,10 @@ export default function Page({url, navigate}) {
 // Let the custom timeline take control of driving the animations.
 constcleanup1=timeline.animate(animation1);
 constcleanup2=timeline.animate(animation2);
-// TODO: Support returning a clean up function from ViewTransition events.
-// return () => {
-// cleanup1();
-// cleanup2();
-// };
+return()=>{
+cleanup1();
+cleanup2();
+};
 }
 }
 

packages/react-art/src/ReactFiberConfigART.js

@@ -549,6 +549,13 @@ export function startGestureTransition() {
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2337,6 +2337,7 @@ export function startViewTransition(
 
 exporttypeRunningViewTransition={
 skipTransition(): void,
+finished: Promise<void>,
  ...
 };
 
@@ -2784,6 +2785,13 @@ export function stopViewTransition(transition: RunningViewTransition) {
 transition.skipTransition();
 }
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+transition.finished.finally(callback);
+}
+
 interfaceViewTransitionPseudoElementTypeextendsmixin$Animatable{
 _scope: HTMLElement;
 _selector: string;

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -713,6 +713,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/react-noop-renderer/src/createReactNoop.js

@@ -888,6 +888,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
 stopViewTransition(transition: RunningViewTransition){},
 
+addViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+},
+
 createViewTransitionInstance(name: string): ViewTransitionInstance{
  return null;
 },

packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js

@@ -54,6 +54,7 @@ export const startViewTransition = shim;
 exporttypeRunningViewTransition=null;
 exportconststartGestureTransition=shim;
 exportconststopViewTransition=shim;
+exportconstaddViewTransitionFinishedListener=shim;
 exporttypeViewTransitionInstance=null|{name: string, ...};
 exportconstcreateViewTransitionInstance=shim;
 exporttypeGestureTimeline=any;

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -120,6 +120,7 @@ import {
 startViewTransition,
 startGestureTransition,
 stopViewTransition,
+addViewTransitionFinishedListener,
 createViewTransitionInstance,
 flushHydrationEvents,
 }from'./ReactFiberConfig';
@@ -733,8 +734,9 @@ let pendingEffectsRenderEndTime: number = -0; // Profiling-only
 letpendingPassiveTransitions: Array<Transition>|null=null;
 let pendingRecoverableErrors: null|Array<CapturedValue<mixed>>=null;
 let pendingViewTransition: null|RunningViewTransition=null;
-letpendingViewTransitionEvents: Array<(types: Array<string>)=>void>|null=
-null;
+letpendingViewTransitionEvents: Array<
+(types: Array<string>)=>void|(()=>void),
+>|null=null;
 let pendingTransitionTypes: null|TransitionTypes=null;
 let pendingDidIncludeRenderPhaseUpdate: boolean=false;
 let pendingSuspendedCommitReason: SuspendedCommitReason=null;// Profiling-only
@@ -899,7 +901,10 @@ export function requestDeferredLane(): Lane {
 
 exportfunctionscheduleViewTransitionEvent(
 fiber: Fiber,
-callback: ?(instance: ViewTransitionInstance,types: Array<string>)=>void,
+callback: ?(
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 ): void{
 if(enableViewTransition){
 if(callback!=null){
@@ -925,7 +930,7 @@ export function scheduleGestureTransitionEvent(
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 ): void{
 if(enableGestureTransition){
 if(callback!=null){
@@ -4143,6 +4148,7 @@ function flushSpawnedWork(): void {
 
 pendingEffectsStatus=NO_PENDING_EFFECTS;
 
+constcommittedViewTransition=pendingViewTransition;
 pendingViewTransition=null;// The view transition has now fully started.
 
 // Tell Scheduler to yield at the end of the frame, so the browser has an
@@ -4262,9 +4268,14 @@ function flushSpawnedWork(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+if(committedViewTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(committedViewTransition,cleanup);
+}
+}
 }
 }
 }
@@ -4532,9 +4543,18 @@ function flushGestureAnimations(): void {
 // Normalize the type. This is lazily created only for events.
 pendingTypes=[];
 }
-for(leti=0;i<pendingEvents.length;i++){
-const viewTransitionEvent =pendingEvents[i];
-viewTransitionEvent(pendingTypes);
+constappliedGesture=root.pendingGestures;
+if(appliedGesture!==null){
+const runningTransition =appliedGesture.running;
+if(runningTransition!==null){
+for(leti=0;i<pendingEvents.length;i++){
+constviewTransitionEvent=pendingEvents[i];
+constcleanup=viewTransitionEvent(pendingTypes);
+if(cleanup!==undefined){
+addViewTransitionFinishedListener(runningTransition,cleanup);
+}
+}
+}
 }
 }
 }

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -162,6 +162,8 @@ export const hasInstanceAffectedParent = $$$config.hasInstanceAffectedParent;
 exportconststartViewTransition=$$$config.startViewTransition;
 exportconststartGestureTransition=$$$config.startGestureTransition;
 exportconststopViewTransition=$$$config.stopViewTransition;
+exportconstaddViewTransitionFinishedListener=
+$$$config.addViewTransitionFinishedListener;
 exportconstgetCurrentGestureOffset=$$$config.getCurrentGestureOffset;
 exportconstcreateViewTransitionInstance=
 $$$config.createViewTransitionInstance;

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -459,6 +459,13 @@ export function startGestureTransition(
 
 exportfunctionstopViewTransition(transition: RunningViewTransition){}
 
+exportfunctionaddViewTransitionFinishedListener(
+transition: RunningViewTransition,
+callback: ()=>void,
+){
+callback();
+}
+
 exporttypeViewTransitionInstance=null|{name: string, ...};
 
 exportfunctioncreateViewTransitionInstance(

packages/shared/ReactTypes.js

@@ -303,34 +303,46 @@ export type ViewTransitionProps = {
 exit?: ViewTransitionClass,
 share?: ViewTransitionClass,
 update?: ViewTransitionClass,
-onEnter?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onExit?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onShare?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
-onUpdate?: (instance: ViewTransitionInstance,types: Array<string>)=>void,
+onEnter?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+ ) =>void|(()=>void),
+onExit?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onShare?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
+onUpdate?: (
+instance: ViewTransitionInstance,
+types: Array<string>,
+)=>void|(()=>void),
 onGestureEnter?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureExit?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureShare?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 onGestureUpdate?: (
 timeline: GestureProvider,
 options: GestureOptionsRequired,
 instance: ViewTransitionInstance,
 types: Array<string>,
-)=>void,
+)=>void|(()=>void),
 };
 
 export type ActivityProps = {