feat(android): allow shared element transitions to work with ListView/CollectionView/Pager (#10411)

farfromrefug · web-flow · commit e8c093d7a2ca · 2023-10-23T17:47:23.000-07:00
diff --git a/packages/core/ui/transition/page-transition.android.ts b/packages/core/ui/transition/page-transition.android.ts
@@ -77,7 +77,7 @@ function setTransitionName(view: ViewBase) {
 }
 
 export class PageTransition extends Transition {
-	constructor(duration?: number, curve?: any) {
+	constructor(duration?: number, curve?: any, private pageLoadedTimeout: number = 0) {
 		// disable custom curves until we can fix the issue with the animation not completing
 		if (curve) {
 			console.warn('PageTransition does not support custom curves at the moment. The passed in curve will be ignored.');
@@ -178,12 +178,10 @@ export class PageTransition extends Transition {
 		const state = SharedTransition.getState(this.id);
 		const pageEnd = state.pageEnd;
 
-		const { sharedElements, presented, presenting } = SharedTransition.getSharedElements(fromPage, toPage);
-		const sharedElementTags = sharedElements.map((v) => v.sharedTransitionTag);
-		if (SharedTransition.DEBUG) {
-			console.log(`  Page: ${state.activeType === SharedTransitionAnimationType.present ? 'Present' : 'Dismiss'}`);
-			console.log(`1. Found sharedTransitionTags to animate:`, sharedElementTags);
-		}
+		//we can't look for presented right now as the toPage might not be loaded
+		// and thus some views like ListView/Pager... might not have loaded their "children"
+		// presented will be handled in loaded event of toPage
+		const { presenting } = SharedTransition.getSharedElements(fromPage, toPage);
 
 		// Note: we can enhance android more over time with element targeting across different screens
 		// const pageStart = state.pageStart;
@@ -215,16 +213,15 @@ export class PageTransition extends Transition {
 		// 		independentView.opacity = 0;
 		// 	}
 		// }
-
-		toPage.once('loaded', () => {
-			presented.filter((v) => sharedElementTags.includes(v.sharedTransitionTag)).forEach(setTransitionName);
-			newFragment.startPostponedEnterTransition();
-		});
-
-		sharedElements.forEach((v) => {
-			setTransitionName(v);
-			fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag);
-		});
+		const onPageLoaded = () => {
+			// add a timeout so that Views like ListView / CollectionView can have their children instantiated
+			setTimeout(() => {
+				const { presented } = SharedTransition.getSharedElements(fromPage, toPage);
+				// const sharedElementTags = sharedElements.map((v) => v.sharedTransitionTag);
+				presented.forEach(setTransitionName);
+				newFragment.startPostponedEnterTransition();
+			}, this.pageLoadedTimeout);
+		};
 
 		fragmentTransaction.setReorderingAllowed(true);
 
@@ -252,6 +249,16 @@ export class PageTransition extends Transition {
 		newFragment.postponeEnterTransition();
 		newFragment.setSharedElementEnterTransition(transitionSet);
 		newFragment.setSharedElementReturnTransition(transitionSet);
+
+		presenting.forEach((v) => {
+			setTransitionName(v);
+			fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag);
+		});
+		if (toPage.isLoaded) {
+			onPageLoaded();
+		} else {
+			toPage.once('loaded', onPageLoaded);
+		}
 	}
 }
 
diff --git a/packages/core/ui/transition/page-transition.d.ts b/packages/core/ui/transition/page-transition.d.ts
@@ -1,2 +1,4 @@
 ﻿import { Transition } from '.';
-export declare class PageTransition extends Transition {}
+export declare class PageTransition extends Transition {
+	constructor(duration?: number, nativeCurve?: any /* UIViewAnimationCurve | string | CubicBezierAnimationCurve | android.view.animation.Interpolator | android.view.animation.LinearInterpolator */, pageLoadedTimeout?: number);
+}
