@nativescript/core 8.9.0-napi-es5.0 → 8.9.0-napi.1

package/ui/transition/shared-transition-helper.ios.js

@@ -3,531 +3,448 @@ import { isNumber } from '../../utils/types';
 import { Screen } from '../../platform';
 import { CORE_ANIMATION_DEFAULTS } from '../../utils/common';
 import { ios as iOSUtils } from '../../utils/native-helper';
-var SharedTransitionHelper = /** @class */ (function () {
-    function SharedTransitionHelper() {
-    }
-    SharedTransitionHelper.animate = function (state, transitionContext, type) {
-        var _this = this;
-        var transition = state.instance;
-        setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
-            var _a, _b, sharedElements_1, presented_1, presenting_1, sharedElementTags_1, pageOut_1, pageStart_1, startFrame, pageEnd_1, pageEndTags_1, positionSharedTags, positionIndependentTags, snapshotData, _i, snapshotData_1, data, cleanupPresent_1, animateProperties_1, pageOut_2, pageEnd, pageEndTags, pageReturn_1, _c, _d, p, snapshotData, _e, snapshotData_2, data, pageEndProps, _loop_1, _f, snapshotData_3, data, cleanupDismiss_1, animateProperties_2;
-            var _this = this;
-            var _g;
-            return __generator(this, function (_h) {
-                switch (_h.label) {
-                    case 0:
-                        _a = state.activeType;
-                        switch (_a) {
-                            case SharedTransitionAnimationType.present: return [3 /*break*/, 1];
-                            case SharedTransitionAnimationType.dismiss: return [3 /*break*/, 4];
-                        }
-                        return [3 /*break*/, 9];
-                    case 1:
-                        // console.log('-- Transition present --');
-                        SharedTransition.notifyEvent(SharedTransition.startedEvent, {
-                            id: transition.id,
-                            type: type,
-                            action: 'present',
-                        });
-                        if (type === 'modal') {
-                            transitionContext.containerView.addSubview(transition.presented.view);
-                        }
-                        else if (type === 'page') {
-                            transitionContext.containerView.insertSubviewAboveSubview(transition.presented.view, transition.presenting.view);
-                        }
-                        transition.presented.view.layoutIfNeeded();
-                        _b = SharedTransition.getSharedElements(state.page, state.toPage), sharedElements_1 = _b.sharedElements, presented_1 = _b.presented, presenting_1 = _b.presenting;
-                        sharedElementTags_1 = sharedElements_1.map(function (v) { return v.sharedTransitionTag; });
-                        if (!transition.sharedElements) {
-                            transition.sharedElements = {
-                                presented: [],
-                                presenting: [],
-                                independent: [],
-                            };
-                        }
-                        if (SharedTransition.DEBUG) {
-                            console.log("  ".concat(type, ": Present"));
-                            console.log("1. Found sharedTransitionTags to animate:", sharedElementTags_1);
-                            console.log("2. Take snapshots of shared elements and position them based on presenting view:");
-                        }
-                        pageOut_1 = state.pageOut;
-                        pageStart_1 = state.pageStart;
-                        startFrame = getRectFromProps(pageStart_1, getPageStartDefaultsForType(type));
-                        pageEnd_1 = state.pageEnd;
-                        pageEndTags_1 = (pageEnd_1 === null || pageEnd_1 === void 0 ? void 0 : pageEnd_1.sharedTransitionTags) || {};
-                        positionSharedTags = function () { return __awaiter(_this, void 0, void 0, function () {
-                            var _loop_2, _i, sharedElements_2, presentingView;
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0:
-                                        _loop_2 = function (presentingView) {
-                                            var presentingSharedElement, presentedView, presentedSharedElement, pageEndProps, snapshot, startFrame_1, endFrame;
-                                            return __generator(this, function (_b) {
-                                                switch (_b.label) {
-                                                    case 0:
-                                                        presentingSharedElement = presentingView.ios;
-                                                        presentedView = presented_1.find(function (v) { return v.sharedTransitionTag === presentingView.sharedTransitionTag; });
-                                                        presentedSharedElement = presentedView.ios;
-                                                        pageEndProps = pageEndTags_1[presentingView.sharedTransitionTag];
-                                                        snapshot = UIImageView.alloc().init();
-                                                        if (!(pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.callback)) return [3 /*break*/, 2];
-                                                        return [4 /*yield*/, (pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.callback(presentedView, 'present'))];
-                                                    case 1:
-                                                        _b.sent();
-                                                        _b.label = 2;
-                                                    case 2:
-                                                        // treat images differently...
-                                                        if (presentedSharedElement instanceof UIImageView) {
-                                                            // in case the image is loaded async, we need to update the snapshot when it changes
-                                                            // todo: remove listener on transition end
-                                                            presentedView.on('imageSourceChange', function () {
-                                                                snapshot.image = iOSUtils.snapshotView(presentedSharedElement, Screen.mainScreen.scale);
-                                                                snapshot.tintColor = presentedSharedElement.tintColor;
-                                                            });
-                                                            snapshot.tintColor = presentedSharedElement.tintColor;
-                                                            snapshot.contentMode = presentedSharedElement.contentMode;
-                                                        }
-                                                        iOSUtils.copyLayerProperties(snapshot, presentingSharedElement, pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.propertiesToMatch);
-                                                        snapshot.clipsToBounds = true;
-                                                        startFrame_1 = presentingSharedElement.convertRectToView(presentingSharedElement.bounds, transitionContext.containerView);
-                                                        endFrame = presentedSharedElement.convertRectToView(presentedSharedElement.bounds, transitionContext.containerView);
-                                                        snapshot.frame = startFrame_1;
-                                                        if (SharedTransition.DEBUG) {
-                                                            console.log('---> ', presentingView.sharedTransitionTag, ' frame:', iOSUtils.printCGRect(snapshot.frame));
-                                                        }
-                                                        transition.sharedElements.presenting.push({
-                                                            view: presentingView,
-                                                            startFrame: startFrame_1,
-                                                            endFrame: endFrame,
-                                                            snapshot: snapshot,
-                                                            startOpacity: presentingView.opacity,
-                                                            endOpacity: isNumber(pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.opacity) ? pageEndProps.opacity : presentedView.opacity,
-                                                            propertiesToMatch: pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.propertiesToMatch,
-                                                            zIndex: isNumber(pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.zIndex) ? pageEndProps.zIndex : 0,
-                                                        });
-                                                        transition.sharedElements.presented.push({
-                                                            view: presentedView,
-                                                            startFrame: endFrame,
-                                                            endFrame: startFrame_1,
-                                                            startOpacity: presentedView.opacity,
-                                                            endOpacity: presentingView.opacity,
-                                                            propertiesToMatch: pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.propertiesToMatch,
-                                                        });
-                                                        // set initial opacity to match the source view opacity
-                                                        snapshot.alpha = presentingView.opacity;
-                                                        // hide both while animating within the transition context
-                                                        presentingView.opacity = 0;
-                                                        presentedView.opacity = 0;
-                                                        return [2 /*return*/];
-                                                }
-                                            });
-                                        };
-                                        _i = 0, sharedElements_2 = sharedElements_1;
-                                        _a.label = 1;
-                                    case 1:
-                                        if (!(_i < sharedElements_2.length)) return [3 /*break*/, 4];
-                                        presentingView = sharedElements_2[_i];
-                                        return [5 /*yield**/, _loop_2(presentingView)];
-                                    case 2:
-                                        _a.sent();
-                                        _a.label = 3;
-                                    case 3:
-                                        _i++;
-                                        return [3 /*break*/, 1];
-                                    case 4: return [2 /*return*/];
-                                }
-                            });
-                        }); };
-                        positionIndependentTags = function () { return __awaiter(_this, void 0, void 0, function () {
-                            var _loop_3, _a, _b, _c, _i, tag, state_1;
-                            return __generator(this, function (_d) {
-                                switch (_d.label) {
-                                    case 0:
-                                        _loop_3 = function (tag) {
-                                            var pageStartIndependentProps, pageEndProps, independentView, isPresented, independentSharedElement, snapshot, startFrame_2, startFrameRect, startFrameAdjusted, endFrameRect, endFrame;
-                                            return __generator(this, function (_e) {
-                                                switch (_e.label) {
-                                                    case 0:
-                                                        if (!!sharedElementTags_1.includes(tag)) return [3 /*break*/, 3];
-                                                        pageStartIndependentProps = (pageStart_1 === null || pageStart_1 === void 0 ? void 0 : pageStart_1.sharedTransitionTags) ? pageStart_1 === null || pageStart_1 === void 0 ? void 0 : pageStart_1.sharedTransitionTags[tag] : null;
-                                                        pageEndProps = pageEndTags_1[tag];
-                                                        independentView = presenting_1.find(function (v) { return v.sharedTransitionTag === tag; });
-                                                        isPresented = false;
-                                                        if (!independentView) {
-                                                            independentView = presented_1.find(function (v) { return v.sharedTransitionTag === tag; });
-                                                            if (!independentView) {
-                                                                return [2 /*return*/, "break"];
-                                                            }
-                                                            isPresented = true;
-                                                        }
-                                                        independentSharedElement = independentView.ios;
-                                                        if (!(pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.callback)) return [3 /*break*/, 2];
-                                                        return [4 /*yield*/, (pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.callback(independentView, 'present'))];
-                                                    case 1:
-                                                        _e.sent();
-                                                        _e.label = 2;
-                                                    case 2:
-                                                        snapshot = UIImageView.alloc().initWithImage(iOSUtils.snapshotView(independentSharedElement, Screen.mainScreen.scale));
-                                                        // }
-                                                        if (independentSharedElement instanceof UIImageView) {
-                                                            // in case the image is loaded async, we need to update the snapshot when it changes
-                                                            // todo: remove listener on transition end
-                                                            // if (isPresented) {
-                                                            // 	independentView.on('imageSourceChange', () => {
-                                                            // 		snapshot.image = iOSNativeHelper.snapshotView(independentSharedElement, Screen.mainScreen.scale);
-                                                            // 		snapshot.tintColor = independentSharedElement.tintColor;
-                                                            // 	});
-                                                            // }
-                                                            snapshot.tintColor = independentSharedElement.tintColor;
-                                                            snapshot.contentMode = independentSharedElement.contentMode;
-                                                        }
-                                                        snapshot.clipsToBounds = true;
-                                                        startFrame_2 = independentSharedElement.convertRectToView(independentSharedElement.bounds, transitionContext.containerView);
-                                                        startFrameRect = getRectFromProps(pageStartIndependentProps);
-                                                        startFrameAdjusted = CGRectMake(startFrame_2.origin.x + startFrameRect.x, startFrame_2.origin.y + startFrameRect.y, startFrame_2.size.width, startFrame_2.size.height);
-                                                        // console.log('startFrameAdjusted:', tag, iOSNativeHelper.printCGRect(startFrameAdjusted));
-                                                        // if (pageStartIndependentProps?.scale) {
-                                                        // 	snapshot.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(startFrameAdjusted.origin.x, startFrameAdjusted.origin.y), CGAffineTransformMakeScale(pageStartIndependentProps.scale.x, pageStartIndependentProps.scale.y))
-                                                        // } else {
-                                                        snapshot.frame = startFrame_2; //startFrameAdjusted;
-                                                        // }
-                                                        if (SharedTransition.DEBUG) {
-                                                            console.log('---> ', independentView.sharedTransitionTag, ' frame:', iOSUtils.printCGRect(snapshot.frame));
-                                                        }
-                                                        endFrameRect = getRectFromProps(pageEndProps);
-                                                        endFrame = CGRectMake(startFrame_2.origin.x + endFrameRect.x, startFrame_2.origin.y + endFrameRect.y, startFrame_2.size.width, startFrame_2.size.height);
-                                                        // console.log('endFrame:', tag, iOSNativeHelper.printCGRect(endFrame));
-                                                        transition.sharedElements.independent.push({
-                                                            view: independentView,
-                                                            isPresented: isPresented,
-                                                            startFrame: startFrame_2,
-                                                            snapshot: snapshot,
-                                                            endFrame: endFrame,
-                                                            startTransform: independentSharedElement.transform,
-                                                            scale: pageEndProps.scale,
-                                                            startOpacity: independentView.opacity,
-                                                            endOpacity: isNumber(pageEndProps.opacity) ? pageEndProps.opacity : 0,
-                                                            propertiesToMatch: pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.propertiesToMatch,
-                                                            zIndex: isNumber(pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.zIndex) ? pageEndProps.zIndex : 0,
-                                                        });
-                                                        independentView.opacity = 0;
-                                                        _e.label = 3;
-                                                    case 3: return [2 /*return*/];
-                                                }
-                                            });
-                                        };
-                                        _a = pageEndTags_1;
-                                        _b = [];
-                                        for (_c in _a)
-                                            _b.push(_c);
-                                        _i = 0;
-                                        _d.label = 1;
-                                    case 1:
-                                        if (!(_i < _b.length)) return [3 /*break*/, 4];
-                                        _c = _b[_i];
-                                        if (!(_c in _a)) return [3 /*break*/, 3];
-                                        tag = _c;
-                                        return [5 /*yield**/, _loop_3(tag)];
-                                    case 2:
-                                        state_1 = _d.sent();
-                                        if (state_1 === "break")
-                                            return [3 /*break*/, 4];
-                                        _d.label = 3;
-                                    case 3:
-                                        _i++;
-                                        return [3 /*break*/, 1];
-                                    case 4: return [2 /*return*/];
-                                }
-                            });
-                        }); };
-                        // position all sharedTransitionTag elements
-                        return [4 /*yield*/, positionSharedTags()];
-                    case 2:
-                        // position all sharedTransitionTag elements
-                        _h.sent();
-                        return [4 /*yield*/, positionIndependentTags()];
-                    case 3:
-                        _h.sent();
-                        snapshotData = transition.sharedElements.presenting.concat(transition.sharedElements.independent);
-                        snapshotData.sort(function (a, b) { return (a.zIndex > b.zIndex ? 1 : -1); });
-                        if (SharedTransition.DEBUG) {
-                            console.log("zIndex settings:", snapshotData.map(function (s) {
-                                return {
-                                    sharedTransitionTag: s.view.sharedTransitionTag,
-                                    zIndex: s.zIndex,
-                                };
-                            }));
-                        }
-                        for (_i = 0, snapshotData_1 = snapshotData; _i < snapshotData_1.length; _i++) {
-                            data = snapshotData_1[_i];
-                            // add snapshot to animate
-                            transitionContext.containerView.addSubview(data.snapshot);
-                        }
-                        // Important: always set after above shared element positions have had their start positions set
-                        transition.presented.view.alpha = isNumber(pageStart_1 === null || pageStart_1 === void 0 ? void 0 : pageStart_1.opacity) ? pageStart_1 === null || pageStart_1 === void 0 ? void 0 : pageStart_1.opacity : 0;
-                        transition.presented.view.frame = CGRectMake(startFrame.x, startFrame.y, startFrame.width, startFrame.height);
-                        cleanupPresent_1 = function () {
-                            for (var _i = 0, _a = transition.sharedElements.presented; _i < _a.length; _i++) {
-                                var presented_2 = _a[_i];
-                                presented_2.view.opacity = presented_2.startOpacity;
+export class SharedTransitionHelper {
+    static animate(state, transitionContext, type) {
+        const transition = state.instance;
+        setTimeout(async () => {
+            // Run on next tick
+            // ensures that existing UI state finishes before snapshotting
+            // (eg, button touch up state)
+            switch (state.activeType) {
+                case SharedTransitionAnimationType.present: {
+                    // console.log('-- Transition present --');
+                    SharedTransition.notifyEvent(SharedTransition.startedEvent, {
+                        id: transition.id,
+                        type,
+                        action: 'present',
+                    });
+                    if (type === 'modal') {
+                        transitionContext.containerView.addSubview(transition.presented.view);
+                    }
+                    else if (type === 'page') {
+                        transitionContext.containerView.insertSubviewAboveSubview(transition.presented.view, transition.presenting.view);
+                    }
+                    transition.presented.view.layoutIfNeeded();
+                    const { sharedElements, presented, presenting } = SharedTransition.getSharedElements(state.page, state.toPage);
+                    const sharedElementTags = sharedElements.map((v) => v.sharedTransitionTag);
+                    if (!transition.sharedElements) {
+                        transition.sharedElements = {
+                            presented: [],
+                            presenting: [],
+                            independent: [],
+                        };
+                    }
+                    if (SharedTransition.DEBUG) {
+                        console.log(`  ${type}: Present`);
+                        console.log(`1. Found sharedTransitionTags to animate:`, sharedElementTags);
+                        console.log(`2. Take snapshots of shared elements and position them based on presenting view:`);
+                    }
+                    const pageOut = state.pageOut;
+                    const pageStart = state.pageStart;
+                    const startFrame = getRectFromProps(pageStart, getPageStartDefaultsForType(type));
+                    const pageEnd = state.pageEnd;
+                    const pageEndTags = pageEnd?.sharedTransitionTags || {};
+                    // console.log('pageEndIndependentTags:', pageEndIndependentTags);
+                    const positionSharedTags = async () => {
+                        for (const presentingView of sharedElements) {
+                            const presentingSharedElement = presentingView.ios;
+                            // console.log('fromTarget instanceof UIImageView:', fromTarget instanceof UIImageView)
+                            // TODO: discuss whether we should check if UIImage/UIImageView type to always snapshot images or if other view types could be duped/added vs. snapshotted
+                            // Note: snapshot may be most efficient/simple
+                            // console.log('---> ', presentingView.sharedTransitionTag, ': ', presentingSharedElement)
+                            const presentedView = presented.find((v) => v.sharedTransitionTag === presentingView.sharedTransitionTag);
+                            const presentedSharedElement = presentedView.ios;
+                            const pageEndProps = pageEndTags[presentingView.sharedTransitionTag];
+                            const snapshot = UIImageView.alloc().init();
+                            if (pageEndProps?.callback) {
+                                await pageEndProps?.callback(presentedView, 'present');
                             }
-                            for (var _b = 0, _c = transition.sharedElements.presenting; _b < _c.length; _b++) {
-                                var presenting_2 = _c[_b];
-                                presenting_2.snapshot.removeFromSuperview();
+                            // treat images differently...
+                            if (presentedSharedElement instanceof UIImageView) {
+                                // in case the image is loaded async, we need to update the snapshot when it changes
+                                // todo: remove listener on transition end
+                                presentedView.on('imageSourceChange', () => {
+                                    snapshot.image = iOSUtils.snapshotView(presentedSharedElement, Screen.mainScreen.scale);
+                                    snapshot.tintColor = presentedSharedElement.tintColor;
+                                });
+                                snapshot.tintColor = presentedSharedElement.tintColor;
+                                snapshot.contentMode = presentedSharedElement.contentMode;
                             }
-                            for (var _d = 0, _e = transition.sharedElements.independent; _d < _e.length; _d++) {
-                                var independent = _e[_d];
-                                independent.snapshot.removeFromSuperview();
-                                if (independent.isPresented) {
-                                    independent.view.opacity = independent.startOpacity;
-                                }
+                            iOSUtils.copyLayerProperties(snapshot, presentingSharedElement, pageEndProps?.propertiesToMatch);
+                            snapshot.clipsToBounds = true;
+                            // console.log('---> snapshot: ', snapshot);
+                            const startFrame = presentingSharedElement.convertRectToView(presentingSharedElement.bounds, transitionContext.containerView);
+                            const endFrame = presentedSharedElement.convertRectToView(presentedSharedElement.bounds, transitionContext.containerView);
+                            snapshot.frame = startFrame;
+                            if (SharedTransition.DEBUG) {
+                                console.log('---> ', presentingView.sharedTransitionTag, ' frame:', iOSUtils.printCGRect(snapshot.frame));
                             }
-                            SharedTransition.updateState(transition.id, {
-                                activeType: SharedTransitionAnimationType.dismiss,
+                            transition.sharedElements.presenting.push({
+                                view: presentingView,
+                                startFrame,
+                                endFrame,
+                                snapshot,
+                                startOpacity: presentingView.opacity,
+                                endOpacity: isNumber(pageEndProps?.opacity) ? pageEndProps.opacity : presentedView.opacity,
+                                propertiesToMatch: pageEndProps?.propertiesToMatch,
+                                zIndex: isNumber(pageEndProps?.zIndex) ? pageEndProps.zIndex : 0,
                             });
-                            if (type === 'page') {
-                                transition.presenting.view.removeFromSuperview();
-                            }
-                            transitionContext.completeTransition(true);
-                            SharedTransition.notifyEvent(SharedTransition.finishedEvent, {
-                                id: transition.id,
-                                type: type,
-                                action: 'present',
+                            transition.sharedElements.presented.push({
+                                view: presentedView,
+                                startFrame: endFrame,
+                                endFrame: startFrame,
+                                startOpacity: presentedView.opacity,
+                                endOpacity: presentingView.opacity,
+                                propertiesToMatch: pageEndProps?.propertiesToMatch,
                             });
-                        };
-                        animateProperties_1 = function () {
-                            if (SharedTransition.DEBUG) {
-                                console.log('3. Animating shared elements:');
-                            }
-                            transition.presented.view.alpha = isNumber(pageEnd_1 === null || pageEnd_1 === void 0 ? void 0 : pageEnd_1.opacity) ? pageEnd_1 === null || pageEnd_1 === void 0 ? void 0 : pageEnd_1.opacity : 1;
-                            var endFrame = getRectFromProps(pageEnd_1);
-                            transition.presented.view.frame = CGRectMake(endFrame.x, endFrame.y, endFrame.width, endFrame.height);
-                            if (pageOut_1) {
-                                if (isNumber(pageOut_1.opacity)) {
-                                    transition.presenting.view.alpha = pageOut_1 === null || pageOut_1 === void 0 ? void 0 : pageOut_1.opacity;
+                            // set initial opacity to match the source view opacity
+                            snapshot.alpha = presentingView.opacity;
+                            // hide both while animating within the transition context
+                            presentingView.opacity = 0;
+                            presentedView.opacity = 0;
+                        }
+                    };
+                    const positionIndependentTags = async () => {
+                        // independent tags
+                        for (const tag in pageEndTags) {
+                            // only handle if independent (otherwise it's shared between both pages and handled above)
+                            if (!sharedElementTags.includes(tag)) {
+                                // only consider start when there's a matching end
+                                const pageStartIndependentProps = pageStart?.sharedTransitionTags ? pageStart?.sharedTransitionTags[tag] : null;
+                                // console.log('start:', tag, pageStartIndependentProps);
+                                const pageEndProps = pageEndTags[tag];
+                                let independentView = presenting.find((v) => v.sharedTransitionTag === tag);
+                                let isPresented = false;
+                                if (!independentView) {
+                                    independentView = presented.find((v) => v.sharedTransitionTag === tag);
+                                    if (!independentView) {
+                                        break;
+                                    }
+                                    isPresented = true;
                                 }
-                                var outFrame = getRectFromProps(pageOut_1);
-                                transition.presenting.view.frame = CGRectMake(outFrame.x, outFrame.y, outFrame.width, outFrame.height);
-                            }
-                            var _loop_4 = function (presented_3) {
-                                var presentingMatch = transition.sharedElements.presenting.find(function (v) { return v.view.sharedTransitionTag === presented_3.view.sharedTransitionTag; });
-                                // Workaround wrong origin due ongoing layout process.
-                                var updatedEndFrame = presented_3.view.ios.convertRectToView(presented_3.view.ios.bounds, transitionContext.containerView);
-                                var correctedEndFrame = CGRectMake(updatedEndFrame.origin.x, updatedEndFrame.origin.y, presentingMatch.endFrame.size.width, presentingMatch.endFrame.size.height);
-                                presentingMatch.snapshot.frame = correctedEndFrame;
-                                // apply view and layer properties to the snapshot view to match the source/presented view
-                                iOSUtils.copyLayerProperties(presentingMatch.snapshot, presented_3.view.ios, presented_3.propertiesToMatch);
-                                // create a snapshot of the presented view
-                                presentingMatch.snapshot.image = iOSUtils.snapshotView(presented_3.view.ios, Screen.mainScreen.scale);
-                                // apply correct alpha
-                                presentingMatch.snapshot.alpha = presentingMatch.endOpacity;
-                                if (SharedTransition.DEBUG) {
-                                    console.log("---> ".concat(presentingMatch.view.sharedTransitionTag, " animate to: "), iOSUtils.printCGRect(correctedEndFrame));
+                                const independentSharedElement = independentView.ios;
+                                if (pageEndProps?.callback) {
+                                    await pageEndProps?.callback(independentView, 'present');
                                 }
-                            };
-                            // animate page properties to the following:
-                            // https://stackoverflow.com/a/27997678/1418981
-                            // In order to have proper layout. Seems mostly needed when presenting.
-                            // For instance during presentation, destination view doesn't account navigation bar height.
-                            // Not sure if best to leave all the time?
-                            // owner.presented.view.setNeedsLayout();
-                            // owner.presented.view.layoutIfNeeded();
-                            for (var _i = 0, _a = transition.sharedElements.presented; _i < _a.length; _i++) {
-                                var presented_3 = _a[_i];
-                                _loop_4(presented_3);
-                            }
-                            for (var _b = 0, _c = transition.sharedElements.independent; _b < _c.length; _b++) {
-                                var independent = _c[_b];
-                                var endFrame_1 = independent.endFrame;
-                                // if (independent.isPresented) {
-                                // 	const updatedEndFrame = independent.view.ios.convertRectToView(independent.view.ios.bounds, transitionContext.containerView);
-                                // 	endFrame = CGRectMake(updatedEndFrame.origin.x, updatedEndFrame.origin.y, independent.endFrame.size.width, independent.endFrame.size.height);
+                                // let snapshot: UIImageView;
+                                // if (isPresented) {
+                                // 	snapshot = UIImageView.alloc().init();
+                                // } else {
+                                const snapshot = UIImageView.alloc().initWithImage(iOSUtils.snapshotView(independentSharedElement, Screen.mainScreen.scale));
                                 // }
-                                if (independent.scale) {
-                                    independent.snapshot.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(endFrame_1.origin.x, endFrame_1.origin.y), CGAffineTransformMakeScale(independent.scale.x, independent.scale.y));
+                                if (independentSharedElement instanceof UIImageView) {
+                                    // in case the image is loaded async, we need to update the snapshot when it changes
+                                    // todo: remove listener on transition end
+                                    // if (isPresented) {
+                                    // 	independentView.on('imageSourceChange', () => {
+                                    // 		snapshot.image = iOSNativeHelper.snapshotView(independentSharedElement, Screen.mainScreen.scale);
+                                    // 		snapshot.tintColor = independentSharedElement.tintColor;
+                                    // 	});
+                                    // }
+                                    snapshot.tintColor = independentSharedElement.tintColor;
+                                    snapshot.contentMode = independentSharedElement.contentMode;
                                 }
-                                else {
-                                    independent.snapshot.frame = endFrame_1;
-                                }
-                                independent.snapshot.alpha = independent.endOpacity;
+                                snapshot.clipsToBounds = true;
+                                const startFrame = independentSharedElement.convertRectToView(independentSharedElement.bounds, transitionContext.containerView);
+                                const startFrameRect = getRectFromProps(pageStartIndependentProps);
+                                // adjust for any specified start positions
+                                const startFrameAdjusted = CGRectMake(startFrame.origin.x + startFrameRect.x, startFrame.origin.y + startFrameRect.y, startFrame.size.width, startFrame.size.height);
+                                // console.log('startFrameAdjusted:', tag, iOSNativeHelper.printCGRect(startFrameAdjusted));
+                                // if (pageStartIndependentProps?.scale) {
+                                // 	snapshot.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(startFrameAdjusted.origin.x, startFrameAdjusted.origin.y), CGAffineTransformMakeScale(pageStartIndependentProps.scale.x, pageStartIndependentProps.scale.y))
+                                // } else {
+                                snapshot.frame = startFrame; //startFrameAdjusted;
+                                // }
                                 if (SharedTransition.DEBUG) {
-                                    console.log("---> ".concat(independent.view.sharedTransitionTag, " animate to: "), iOSUtils.printCGRect(independent.endFrame));
+                                    console.log('---> ', independentView.sharedTransitionTag, ' frame:', iOSUtils.printCGRect(snapshot.frame));
                                 }
+                                const endFrameRect = getRectFromProps(pageEndProps);
+                                const endFrame = CGRectMake(startFrame.origin.x + endFrameRect.x, startFrame.origin.y + endFrameRect.y, startFrame.size.width, startFrame.size.height);
+                                // console.log('endFrame:', tag, iOSNativeHelper.printCGRect(endFrame));
+                                transition.sharedElements.independent.push({
+                                    view: independentView,
+                                    isPresented,
+                                    startFrame,
+                                    snapshot,
+                                    endFrame,
+                                    startTransform: independentSharedElement.transform,
+                                    scale: pageEndProps.scale,
+                                    startOpacity: independentView.opacity,
+                                    endOpacity: isNumber(pageEndProps.opacity) ? pageEndProps.opacity : 0,
+                                    propertiesToMatch: pageEndProps?.propertiesToMatch,
+                                    zIndex: isNumber(pageEndProps?.zIndex) ? pageEndProps.zIndex : 0,
+                                });
+                                independentView.opacity = 0;
                             }
-                        };
-                        if (isNumber(pageEnd_1 === null || pageEnd_1 === void 0 ? void 0 : pageEnd_1.duration)) {
-                            // override spring and use only linear animation
-                            UIView.animateWithDurationDelayOptionsAnimationsCompletion((pageEnd_1 === null || pageEnd_1 === void 0 ? void 0 : pageEnd_1.duration) / 1000, 0, 0 /* UIViewAnimationOptions.CurveEaseInOut */, function () {
-                                animateProperties_1();
-                            }, function () {
-                                cleanupPresent_1();
-                            });
                         }
-                        else {
-                            iOSUtils.animateWithSpring(__assign(__assign({}, getSpringFromProps(pageEnd_1 === null || pageEnd_1 === void 0 ? void 0 : pageEnd_1.spring)), { animations: function () {
-                                    animateProperties_1();
-                                }, completion: function () {
-                                    cleanupPresent_1();
-                                } }));
+                    };
+                    // position all sharedTransitionTag elements
+                    await positionSharedTags();
+                    await positionIndependentTags();
+                    // combine to order by zIndex and add to transition context
+                    const snapshotData = transition.sharedElements.presenting.concat(transition.sharedElements.independent);
+                    snapshotData.sort((a, b) => (a.zIndex > b.zIndex ? 1 : -1));
+                    if (SharedTransition.DEBUG) {
+                        console.log(`zIndex settings:`, snapshotData.map((s) => {
+                            return {
+                                sharedTransitionTag: s.view.sharedTransitionTag,
+                                zIndex: s.zIndex,
+                            };
+                        }));
+                    }
+                    for (const data of snapshotData) {
+                        // add snapshot to animate
+                        transitionContext.containerView.addSubview(data.snapshot);
+                    }
+                    // Important: always set after above shared element positions have had their start positions set
+                    transition.presented.view.alpha = isNumber(pageStart?.opacity) ? pageStart?.opacity : 0;
+                    transition.presented.view.frame = CGRectMake(startFrame.x, startFrame.y, startFrame.width, startFrame.height);
+                    const cleanupPresent = () => {
+                        for (const presented of transition.sharedElements.presented) {
+                            presented.view.opacity = presented.startOpacity;
                         }
-                        return [3 /*break*/, 9];
-                    case 4:
-                        // console.log('-- Transition dismiss --');
-                        SharedTransition.notifyEvent(SharedTransition.startedEvent, {
-                            id: transition.id,
-                            type: type,
-                            action: 'dismiss',
-                        });
-                        if (type === 'page') {
-                            transitionContext.containerView.insertSubviewBelowSubview(transition.presenting.view, transition.presented.view);
+                        for (const presenting of transition.sharedElements.presenting) {
+                            presenting.snapshot.removeFromSuperview();
                         }
-                        // console.log('transitionContext.containerView.subviews.count:', transitionContext.containerView.subviews.count);
-                        if (SharedTransition.DEBUG) {
-                            console.log("  ".concat(type, ": Dismiss"));
-                            console.log("1. Dismiss sharedTransitionTags to animate:", transition.sharedElements.presented.map(function (p) { return p.view.sharedTransitionTag; }));
-                            console.log("2. Add back previously stored sharedElements to dismiss:");
+                        for (const independent of transition.sharedElements.independent) {
+                            independent.snapshot.removeFromSuperview();
+                            if (independent.isPresented) {
+                                independent.view.opacity = independent.startOpacity;
+                            }
                         }
-                        pageOut_2 = state.pageOut;
-                        pageEnd = state.pageEnd;
-                        pageEndTags = (pageEnd === null || pageEnd === void 0 ? void 0 : pageEnd.sharedTransitionTags) || {};
-                        pageReturn_1 = state.pageReturn;
-                        for (_c = 0, _d = transition.sharedElements.presented; _c < _d.length; _c++) {
-                            p = _d[_c];
-                            p.view.opacity = 0;
+                        SharedTransition.updateState(transition.id, {
+                            activeType: SharedTransitionAnimationType.dismiss,
+                        });
+                        if (type === 'page') {
+                            transition.presenting.view.removeFromSuperview();
                         }
-                        snapshotData = transition.sharedElements.presenting.concat(transition.sharedElements.independent);
-                        snapshotData.sort(function (a, b) { return (a.zIndex > b.zIndex ? 1 : -1); });
+                        transitionContext.completeTransition(true);
+                        SharedTransition.notifyEvent(SharedTransition.finishedEvent, {
+                            id: transition.id,
+                            type,
+                            action: 'present',
+                        });
+                    };
+                    const animateProperties = () => {
                         if (SharedTransition.DEBUG) {
-                            console.log("zIndex settings:", snapshotData.map(function (s) {
-                                return {
-                                    sharedTransitionTag: s.view.sharedTransitionTag,
-                                    zIndex: s.zIndex,
-                                };
-                            }));
+                            console.log('3. Animating shared elements:');
                         }
-                        _e = 0, snapshotData_2 = snapshotData;
-                        _h.label = 5;
-                    case 5:
-                        if (!(_e < snapshotData_2.length)) return [3 /*break*/, 8];
-                        data = snapshotData_2[_e];
-                        pageEndProps = pageEndTags[data.view.sharedTransitionTag];
-                        if (!(pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.callback)) return [3 /*break*/, 7];
-                        return [4 /*yield*/, (pageEndProps === null || pageEndProps === void 0 ? void 0 : pageEndProps.callback(data.view, 'dismiss'))];
-                    case 6:
-                        _h.sent();
-                        _h.label = 7;
-                    case 7:
-                        _e++;
-                        return [3 /*break*/, 5];
-                    case 8:
-                        _loop_1 = function (data) {
-                            var view = data.view.ios;
-                            var currentAlpha = view.alpha;
-                            if (pageReturn_1 === null || pageReturn_1 === void 0 ? void 0 : pageReturn_1.useStartOpacity) {
-                                // when desired, reset the alpha to the start value so the view is visible in the snapshot
-                                view.alpha = data.startOpacity;
+                        transition.presented.view.alpha = isNumber(pageEnd?.opacity) ? pageEnd?.opacity : 1;
+                        const endFrame = getRectFromProps(pageEnd);
+                        transition.presented.view.frame = CGRectMake(endFrame.x, endFrame.y, endFrame.width, endFrame.height);
+                        if (pageOut) {
+                            if (isNumber(pageOut.opacity)) {
+                                transition.presenting.view.alpha = pageOut?.opacity;
                             }
-                            // take a new snapshot
-                            data.snapshot.image = iOSUtils.snapshotView(view, Screen.mainScreen.scale);
-                            // find the currently visible view with the same sharedTransitionTag
-                            var fromView = (_g = transition.sharedElements.presented.find(function (p) { return p.view.sharedTransitionTag === data.view.sharedTransitionTag; })) === null || _g === void 0 ? void 0 : _g.view;
-                            if (fromView) {
-                                // match the snapshot frame to the current frame of the fromView
-                                data.snapshot.frame = fromView.ios.convertRectToView(fromView.ios.bounds, transitionContext.containerView);
+                            const outFrame = getRectFromProps(pageOut);
+                            transition.presenting.view.frame = CGRectMake(outFrame.x, outFrame.y, outFrame.width, outFrame.height);
+                        }
+                        // animate page properties to the following:
+                        // https://stackoverflow.com/a/27997678/1418981
+                        // In order to have proper layout. Seems mostly needed when presenting.
+                        // For instance during presentation, destination view doesn't account navigation bar height.
+                        // Not sure if best to leave all the time?
+                        // owner.presented.view.setNeedsLayout();
+                        // owner.presented.view.layoutIfNeeded();
+                        for (const presented of transition.sharedElements.presented) {
+                            const presentingMatch = transition.sharedElements.presenting.find((v) => v.view.sharedTransitionTag === presented.view.sharedTransitionTag);
+                            // Workaround wrong origin due ongoing layout process.
+                            const updatedEndFrame = presented.view.ios.convertRectToView(presented.view.ios.bounds, transitionContext.containerView);
+                            const correctedEndFrame = CGRectMake(updatedEndFrame.origin.x, updatedEndFrame.origin.y, presentingMatch.endFrame.size.width, presentingMatch.endFrame.size.height);
+                            presentingMatch.snapshot.frame = correctedEndFrame;
+                            // apply view and layer properties to the snapshot view to match the source/presented view
+                            iOSUtils.copyLayerProperties(presentingMatch.snapshot, presented.view.ios, presented.propertiesToMatch);
+                            // create a snapshot of the presented view
+                            presentingMatch.snapshot.image = iOSUtils.snapshotView(presented.view.ios, Screen.mainScreen.scale);
+                            // apply correct alpha
+                            presentingMatch.snapshot.alpha = presentingMatch.endOpacity;
+                            if (SharedTransition.DEBUG) {
+                                console.log(`---> ${presentingMatch.view.sharedTransitionTag} animate to: `, iOSUtils.printCGRect(correctedEndFrame));
                             }
-                            // snapshot has been taken, we can restore the alpha
-                            view.alpha = currentAlpha;
-                            // we recalculate the startFrame because the view might have changed its position in the background
-                            data.startFrame = view.convertRectToView(view.bounds, transitionContext.containerView);
-                            // add snapshot to animate
-                            transitionContext.containerView.addSubview(data.snapshot);
-                        };
-                        // now that all the callbacks had their chance to run, we can take the snapshots
-                        for (_f = 0, snapshotData_3 = snapshotData; _f < snapshotData_3.length; _f++) {
-                            data = snapshotData_3[_f];
-                            _loop_1(data);
                         }
-                        cleanupDismiss_1 = function () {
-                            for (var _i = 0, _a = transition.sharedElements.presenting; _i < _a.length; _i++) {
-                                var presenting = _a[_i];
-                                presenting.view.opacity = presenting.startOpacity;
-                                presenting.snapshot.removeFromSuperview();
+                        for (const independent of transition.sharedElements.independent) {
+                            const endFrame = independent.endFrame;
+                            // if (independent.isPresented) {
+                            // 	const updatedEndFrame = independent.view.ios.convertRectToView(independent.view.ios.bounds, transitionContext.containerView);
+                            // 	endFrame = CGRectMake(updatedEndFrame.origin.x, updatedEndFrame.origin.y, independent.endFrame.size.width, independent.endFrame.size.height);
+                            // }
+                            if (independent.scale) {
+                                independent.snapshot.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(endFrame.origin.x, endFrame.origin.y), CGAffineTransformMakeScale(independent.scale.x, independent.scale.y));
                             }
-                            for (var _b = 0, _c = transition.sharedElements.independent; _b < _c.length; _b++) {
-                                var independent = _c[_b];
-                                independent.view.opacity = independent.startOpacity;
-                                independent.snapshot.removeFromSuperview();
+                            else {
+                                independent.snapshot.frame = endFrame;
                             }
-                            SharedTransition.finishState(transition.id);
-                            transition.sharedElements = null;
-                            transitionContext.completeTransition(true);
-                            SharedTransition.notifyEvent(SharedTransition.finishedEvent, {
-                                id: transition.id,
-                                type: type,
-                                action: 'dismiss',
-                            });
-                        };
-                        animateProperties_2 = function () {
+                            independent.snapshot.alpha = independent.endOpacity;
+                            if (SharedTransition.DEBUG) {
+                                console.log(`---> ${independent.view.sharedTransitionTag} animate to: `, iOSUtils.printCGRect(independent.endFrame));
+                            }
+                        }
+                    };
+                    if (isNumber(pageEnd?.duration)) {
+                        // override spring and use only linear animation
+                        UIView.animateWithDurationDelayOptionsAnimationsCompletion(pageEnd?.duration / 1000, 0, 0 /* UIViewAnimationOptions.CurveEaseInOut */, () => {
+                            animateProperties();
+                        }, () => {
+                            cleanupPresent();
+                        });
+                    }
+                    else {
+                        iOSUtils.animateWithSpring({
+                            ...getSpringFromProps(pageEnd?.spring),
+                            animations: () => {
+                                animateProperties();
+                            },
+                            completion: () => {
+                                cleanupPresent();
+                            },
+                        });
+                    }
+                    break;
+                }
+                case SharedTransitionAnimationType.dismiss: {
+                    // console.log('-- Transition dismiss --');
+                    SharedTransition.notifyEvent(SharedTransition.startedEvent, {
+                        id: transition.id,
+                        type,
+                        action: 'dismiss',
+                    });
+                    if (type === 'page') {
+                        transitionContext.containerView.insertSubviewBelowSubview(transition.presenting.view, transition.presented.view);
+                    }
+                    // console.log('transitionContext.containerView.subviews.count:', transitionContext.containerView.subviews.count);
+                    if (SharedTransition.DEBUG) {
+                        console.log(`  ${type}: Dismiss`);
+                        console.log(`1. Dismiss sharedTransitionTags to animate:`, transition.sharedElements.presented.map((p) => p.view.sharedTransitionTag));
+                        console.log(`2. Add back previously stored sharedElements to dismiss:`);
+                    }
+                    const pageOut = state.pageOut;
+                    const pageEnd = state.pageEnd;
+                    const pageEndTags = pageEnd?.sharedTransitionTags || {};
+                    const pageReturn = state.pageReturn;
+                    for (const p of transition.sharedElements.presented) {
+                        p.view.opacity = 0;
+                    }
+                    // combine to order by zIndex and add to transition context
+                    const snapshotData = transition.sharedElements.presenting.concat(transition.sharedElements.independent);
+                    snapshotData.sort((a, b) => (a.zIndex > b.zIndex ? 1 : -1));
+                    if (SharedTransition.DEBUG) {
+                        console.log(`zIndex settings:`, snapshotData.map((s) => {
+                            return {
+                                sharedTransitionTag: s.view.sharedTransitionTag,
+                                zIndex: s.zIndex,
+                            };
+                        }));
+                    }
+                    // first loop through all the shared elements and fire the callback
+                    for (const data of snapshotData) {
+                        const pageEndProps = pageEndTags[data.view.sharedTransitionTag];
+                        if (pageEndProps?.callback) {
+                            await pageEndProps?.callback(data.view, 'dismiss');
+                        }
+                    }
+                    // now that all the callbacks had their chance to run, we can take the snapshots
+                    for (const data of snapshotData) {
+                        const view = data.view.ios;
+                        const currentAlpha = view.alpha;
+                        if (pageReturn?.useStartOpacity) {
+                            // when desired, reset the alpha to the start value so the view is visible in the snapshot
+                            view.alpha = data.startOpacity;
+                        }
+                        // take a new snapshot
+                        data.snapshot.image = iOSUtils.snapshotView(view, Screen.mainScreen.scale);
+                        // find the currently visible view with the same sharedTransitionTag
+                        const fromView = transition.sharedElements.presented.find((p) => p.view.sharedTransitionTag === data.view.sharedTransitionTag)?.view;
+                        if (fromView) {
+                            // match the snapshot frame to the current frame of the fromView
+                            data.snapshot.frame = fromView.ios.convertRectToView(fromView.ios.bounds, transitionContext.containerView);
+                        }
+                        // snapshot has been taken, we can restore the alpha
+                        view.alpha = currentAlpha;
+                        // we recalculate the startFrame because the view might have changed its position in the background
+                        data.startFrame = view.convertRectToView(view.bounds, transitionContext.containerView);
+                        // add snapshot to animate
+                        transitionContext.containerView.addSubview(data.snapshot);
+                    }
+                    const cleanupDismiss = () => {
+                        for (const presenting of transition.sharedElements.presenting) {
+                            presenting.view.opacity = presenting.startOpacity;
+                            presenting.snapshot.removeFromSuperview();
+                        }
+                        for (const independent of transition.sharedElements.independent) {
+                            independent.view.opacity = independent.startOpacity;
+                            independent.snapshot.removeFromSuperview();
+                        }
+                        SharedTransition.finishState(transition.id);
+                        transition.sharedElements = null;
+                        transitionContext.completeTransition(true);
+                        SharedTransition.notifyEvent(SharedTransition.finishedEvent, {
+                            id: transition.id,
+                            type,
+                            action: 'dismiss',
+                        });
+                    };
+                    const animateProperties = () => {
+                        if (SharedTransition.DEBUG) {
+                            console.log('3. Dismissing shared elements:');
+                        }
+                        transition.presented.view.alpha = isNumber(pageReturn?.opacity) ? pageReturn?.opacity : 0;
+                        const endFrame = getRectFromProps(pageReturn, getPageStartDefaultsForType(type));
+                        transition.presented.view.frame = CGRectMake(endFrame.x, endFrame.y, endFrame.width, endFrame.height);
+                        if (pageOut) {
+                            // always return to defaults if pageOut had been used
+                            transition.presenting.view.alpha = 1;
+                            const outFrame = getRectFromProps(null);
+                            transition.presenting.view.frame = CGRectMake(0, 0, outFrame.width, outFrame.height);
+                        }
+                        for (const presenting of transition.sharedElements.presenting) {
+                            iOSUtils.copyLayerProperties(presenting.snapshot, presenting.view.ios, presenting.propertiesToMatch);
+                            presenting.snapshot.frame = presenting.startFrame;
+                            presenting.snapshot.alpha = presenting.startOpacity;
                             if (SharedTransition.DEBUG) {
-                                console.log('3. Dismissing shared elements:');
+                                console.log(`---> ${presenting.view.sharedTransitionTag} animate to: `, iOSUtils.printCGRect(presenting.snapshot.frame));
                             }
-                            transition.presented.view.alpha = isNumber(pageReturn_1 === null || pageReturn_1 === void 0 ? void 0 : pageReturn_1.opacity) ? pageReturn_1 === null || pageReturn_1 === void 0 ? void 0 : pageReturn_1.opacity : 0;
-                            var endFrame = getRectFromProps(pageReturn_1, getPageStartDefaultsForType(type));
-                            transition.presented.view.frame = CGRectMake(endFrame.x, endFrame.y, endFrame.width, endFrame.height);
-                            if (pageOut_2) {
-                                // always return to defaults if pageOut had been used
-                                transition.presenting.view.alpha = 1;
-                                var outFrame = getRectFromProps(null);
-                                transition.presenting.view.frame = CGRectMake(0, 0, outFrame.width, outFrame.height);
+                        }
+                        for (const independent of transition.sharedElements.independent) {
+                            independent.snapshot.alpha = independent.startOpacity;
+                            if (independent.scale) {
+                                independent.snapshot.transform = independent.startTransform;
                             }
-                            for (var _i = 0, _a = transition.sharedElements.presenting; _i < _a.length; _i++) {
-                                var presenting = _a[_i];
-                                iOSUtils.copyLayerProperties(presenting.snapshot, presenting.view.ios, presenting.propertiesToMatch);
-                                presenting.snapshot.frame = presenting.startFrame;
-                                presenting.snapshot.alpha = presenting.startOpacity;
-                                if (SharedTransition.DEBUG) {
-                                    console.log("---> ".concat(presenting.view.sharedTransitionTag, " animate to: "), iOSUtils.printCGRect(presenting.snapshot.frame));
-                                }
+                            else {
+                                independent.snapshot.frame = independent.startFrame;
                             }
-                            for (var _b = 0, _c = transition.sharedElements.independent; _b < _c.length; _b++) {
-                                var independent = _c[_b];
-                                independent.snapshot.alpha = independent.startOpacity;
-                                if (independent.scale) {
-                                    independent.snapshot.transform = independent.startTransform;
-                                }
-                                else {
-                                    independent.snapshot.frame = independent.startFrame;
-                                }
-                                if (SharedTransition.DEBUG) {
-                                    console.log("---> ".concat(independent.view.sharedTransitionTag, " animate to: "), iOSUtils.printCGRect(independent.snapshot.frame));
-                                }
+                            if (SharedTransition.DEBUG) {
+                                console.log(`---> ${independent.view.sharedTransitionTag} animate to: `, iOSUtils.printCGRect(independent.snapshot.frame));
                             }
-                        };
-                        if (isNumber(pageReturn_1 === null || pageReturn_1 === void 0 ? void 0 : pageReturn_1.duration)) {
-                            // override spring and use only linear animation
-                            UIView.animateWithDurationDelayOptionsAnimationsCompletion((pageReturn_1 === null || pageReturn_1 === void 0 ? void 0 : pageReturn_1.duration) / 1000, 0, 0 /* UIViewAnimationOptions.CurveEaseInOut */, function () {
-                                animateProperties_2();
-                            }, function () {
-                                cleanupDismiss_1();
-                            });
                         }
-                        else {
-                            iOSUtils.animateWithSpring(__assign(__assign({}, getSpringFromProps(pageReturn_1 === null || pageReturn_1 === void 0 ? void 0 : pageReturn_1.spring)), { animations: function () {
-                                    animateProperties_2();
-                                }, completion: function () {
-                                    cleanupDismiss_1();
-                                } }));
-                        }
-                        return [3 /*break*/, 9];
-                    case 9: return [2 /*return*/];
+                    };
+                    if (isNumber(pageReturn?.duration)) {
+                        // override spring and use only linear animation
+                        UIView.animateWithDurationDelayOptionsAnimationsCompletion(pageReturn?.duration / 1000, 0, 0 /* UIViewAnimationOptions.CurveEaseInOut */, () => {
+                            animateProperties();
+                        }, () => {
+                            cleanupDismiss();
+                        });
+                    }
+                    else {
+                        iOSUtils.animateWithSpring({
+                            ...getSpringFromProps(pageReturn?.spring),
+                            animations: () => {
+                                animateProperties();
+                            },
+                            completion: () => {
+                                cleanupDismiss();
+                            },
+                        });
+                    }
+                    break;
                 }
-            });
-        }); });
-    };
-    SharedTransitionHelper.interactiveStart = function (state, interactiveState, type) {
+            }
+        });
+    }
+    static interactiveStart(state, interactiveState, type) {
         SharedTransition.notifyEvent(SharedTransition.startedEvent, {
             id: state.instance.id,
-            type: type,
+            type,
             action: 'interactiveStart',
         });
         switch (type) {
@@ -535,57 +452,48 @@ var SharedTransitionHelper = /** @class */ (function () {
                 interactiveState.transitionContext.containerView.insertSubviewBelowSubview(state.instance.presenting.view, state.instance.presented.view);
                 break;
         }
-    };
-    SharedTransitionHelper.interactiveUpdate = function (state, interactiveState, type, percent) {
-        var _a;
+    }
+    static interactiveUpdate(state, interactiveState, type, percent) {
         if (interactiveState) {
             if (!interactiveState.added) {
                 interactiveState.added = true;
-                for (var _i = 0, _b = state.instance.sharedElements.presented; _i < _b.length; _i++) {
-                    var p = _b[_i];
+                for (const p of state.instance.sharedElements.presented) {
                     p.view.opacity = 0;
                 }
-                for (var _c = 0, _d = state.instance.sharedElements.presenting; _c < _d.length; _c++) {
-                    var p = _d[_c];
+                for (const p of state.instance.sharedElements.presenting) {
                     p.snapshot.alpha = p.endOpacity;
                     interactiveState.transitionContext.containerView.addSubview(p.snapshot);
                 }
-                var pageStart = state.pageStart;
-                var startFrame_3 = getRectFromProps(pageStart, getPageStartDefaultsForType(type));
-                interactiveState.propertyAnimator = UIViewPropertyAnimator.alloc().initWithDurationDampingRatioAnimations(1, 1, function () {
-                    var _a, _b;
-                    for (var _i = 0, _c = state.instance.sharedElements.presenting; _i < _c.length; _i++) {
-                        var p = _c[_i];
+                const pageStart = state.pageStart;
+                const startFrame = getRectFromProps(pageStart, getPageStartDefaultsForType(type));
+                interactiveState.propertyAnimator = UIViewPropertyAnimator.alloc().initWithDurationDampingRatioAnimations(1, 1, () => {
+                    for (const p of state.instance.sharedElements.presenting) {
                         p.snapshot.frame = p.startFrame;
                         iOSUtils.copyLayerProperties(p.snapshot, p.view.ios, p.propertiesToMatch);
                         p.snapshot.alpha = 1;
                     }
-                    state.instance.presented.view.alpha = isNumber((_a = state.pageReturn) === null || _a === void 0 ? void 0 : _a.opacity) ? (_b = state.pageReturn) === null || _b === void 0 ? void 0 : _b.opacity : 0;
-                    state.instance.presented.view.frame = CGRectMake(startFrame_3.x, startFrame_3.y, state.instance.presented.view.bounds.size.width, state.instance.presented.view.bounds.size.height);
+                    state.instance.presented.view.alpha = isNumber(state.pageReturn?.opacity) ? state.pageReturn?.opacity : 0;
+                    state.instance.presented.view.frame = CGRectMake(startFrame.x, startFrame.y, state.instance.presented.view.bounds.size.width, state.instance.presented.view.bounds.size.height);
                 });
             }
             interactiveState.propertyAnimator.fractionComplete = percent;
             SharedTransition.notifyEvent(SharedTransition.interactiveUpdateEvent, {
-                id: (_a = state === null || state === void 0 ? void 0 : state.instance) === null || _a === void 0 ? void 0 : _a.id,
-                type: type,
-                percent: percent,
+                id: state?.instance?.id,
+                type,
+                percent,
             });
         }
-    };
-    SharedTransitionHelper.interactiveCancel = function (state, interactiveState, type) {
-        var _a, _b;
-        if ((state === null || state === void 0 ? void 0 : state.instance) && (interactiveState === null || interactiveState === void 0 ? void 0 : interactiveState.added) && (interactiveState === null || interactiveState === void 0 ? void 0 : interactiveState.propertyAnimator)) {
+    }
+    static interactiveCancel(state, interactiveState, type) {
+        if (state?.instance && interactiveState?.added && interactiveState?.propertyAnimator) {
             interactiveState.propertyAnimator.reversed = true;
-            var duration = isNumber((_a = state.pageEnd) === null || _a === void 0 ? void 0 : _a.duration) ? ((_b = state.pageEnd) === null || _b === void 0 ? void 0 : _b.duration) / 1000 : CORE_ANIMATION_DEFAULTS.duration;
+            const duration = isNumber(state.pageEnd?.duration) ? state.pageEnd?.duration / 1000 : CORE_ANIMATION_DEFAULTS.duration;
             interactiveState.propertyAnimator.continueAnimationWithTimingParametersDurationFactor(null, duration);
-            setTimeout(function () {
-                var _a, _b;
-                for (var _i = 0, _c = state.instance.sharedElements.presented; _i < _c.length; _i++) {
-                    var p = _c[_i];
+            setTimeout(() => {
+                for (const p of state.instance.sharedElements.presented) {
                     p.view.opacity = 1;
                 }
-                for (var _d = 0, _e = state.instance.sharedElements.presenting; _d < _e.length; _d++) {
-                    var p = _e[_d];
+                for (const p of state.instance.sharedElements.presenting) {
                     p.snapshot.removeFromSuperview();
                 }
                 state.instance.presented.view.alpha = 1;
@@ -593,27 +501,24 @@ var SharedTransitionHelper = /** @class */ (function () {
                 interactiveState.added = false;
                 interactiveState.transitionContext.cancelInteractiveTransition();
                 interactiveState.transitionContext.completeTransition(false);
-                SharedTransition.updateState((_a = state === null || state === void 0 ? void 0 : state.instance) === null || _a === void 0 ? void 0 : _a.id, {
+                SharedTransition.updateState(state?.instance?.id, {
                     interactiveBegan: false,
                     interactiveCancelled: true,
                 });
                 SharedTransition.notifyEvent(SharedTransition.interactiveCancelledEvent, {
-                    id: (_b = state === null || state === void 0 ? void 0 : state.instance) === null || _b === void 0 ? void 0 : _b.id,
-                    type: type,
+                    id: state?.instance?.id,
+                    type,
                 });
             }, duration * 1000);
         }
-    };
-    SharedTransitionHelper.interactiveFinish = function (state, interactiveState, type) {
-        var _a, _b;
-        if ((state === null || state === void 0 ? void 0 : state.instance) && (interactiveState === null || interactiveState === void 0 ? void 0 : interactiveState.added) && (interactiveState === null || interactiveState === void 0 ? void 0 : interactiveState.propertyAnimator)) {
+    }
+    static interactiveFinish(state, interactiveState, type) {
+        if (state?.instance && interactiveState?.added && interactiveState?.propertyAnimator) {
             interactiveState.propertyAnimator.reversed = false;
-            var duration = isNumber((_a = state.pageReturn) === null || _a === void 0 ? void 0 : _a.duration) ? ((_b = state.pageReturn) === null || _b === void 0 ? void 0 : _b.duration) / 1000 : CORE_ANIMATION_DEFAULTS.duration;
+            const duration = isNumber(state.pageReturn?.duration) ? state.pageReturn?.duration / 1000 : CORE_ANIMATION_DEFAULTS.duration;
             interactiveState.propertyAnimator.continueAnimationWithTimingParametersDurationFactor(null, duration);
-            setTimeout(function () {
-                var _a;
-                for (var _i = 0, _b = state.instance.sharedElements.presenting; _i < _b.length; _i++) {
-                    var presenting = _b[_i];
+            setTimeout(() => {
+                for (const presenting of state.instance.sharedElements.presenting) {
                     presenting.view.opacity = presenting.startOpacity;
                     presenting.snapshot.removeFromSuperview();
                 }
@@ -623,14 +528,12 @@ var SharedTransitionHelper = /** @class */ (function () {
                 interactiveState.transitionContext.finishInteractiveTransition();
                 interactiveState.transitionContext.completeTransition(true);
                 SharedTransition.notifyEvent(SharedTransition.finishedEvent, {
-                    id: (_a = state === null || state === void 0 ? void 0 : state.instance) === null || _a === void 0 ? void 0 : _a.id,
-                    type: type,
+                    id: state?.instance?.id,
+                    type,
                     action: 'interactiveFinish',
                 });
             }, duration * 1000);
         }
-    };
-    return SharedTransitionHelper;
-}());
-export { SharedTransitionHelper };
+    }
+}
 //# sourceMappingURL=shared-transition-helper.ios.js.map