@nativescript/core 8.5.0-alpha.2 → 8.5.0-alpha.3

package/ui/transition/page-transition.ios.js

@@ -1,199 +1,489 @@
-import { Transition, iosMatchLayerProperties, iosSnapshotView, iosPrintRect } from '.';
+import { Transition } from '.';
 import { Screen } from '../../platform';
-import { SharedTransition, SharedTransitionAnimationType, DEFAULT_DURATION } from './shared-transition';
+import { iOSNativeHelper } from '../../utils/native-helper';
+import { isNumber } from '../../utils/types';
+import { GestureStateTypes } from '../gestures';
+import { SharedTransition, SharedTransitionAnimationType, DEFAULT_DURATION, DEFAULT_SPRING } from './shared-transition';
 export class PageTransition extends Transition {
-    animateIOSTransition(transitionContext, fromViewCtrl, toViewCtrl, operation) {
-        console.log('--- PageTransitionController animateTransition');
-        console.log('toViewCtrl:', toViewCtrl);
-        console.log('fromViewCtrl:', fromViewCtrl);
-        // console.log('owner.id:', owner.id);
-        const state = SharedTransition.getState(this.id);
-        if (!state) {
-            return;
+    iosNavigatedController(navigationController, operation, fromVC, toVC) {
+        this.navigationController = navigationController;
+        if (!this.transitionController) {
+            this.presented = toVC;
+            this.presenting = fromVC;
         }
-        console.log('state.activeType:', state.activeType);
-        console.log('operation:', operation);
-        // switch (state.activeType) {
-        switch (operation) {
-            case 1 /* UINavigationControllerOperation.Push */: {
-                this.presented = toViewCtrl;
-                console.log('-- Transition present --', this.presented);
-                // transitionContext.containerView.addSubview(this.presented.view);
-                transitionContext.containerView.insertSubviewAboveSubview(this.presented.view, fromViewCtrl.view);
-                this.presented.view.layoutIfNeeded();
-                const { sharedElements, presented } = SharedTransition.getSharedElements(state.page, state.toPage);
-                console.log('  ');
-                console.log(`1. Found sharedTransitionTags to animate:`, sharedElements.map((v) => v.sharedTransitionTag));
-                console.log(`2. Take snapshots of shared elements and position them based on presenting view:`);
-                for (const presentingView of sharedElements) {
-                    if (!this.sharedElements) {
-                        this.sharedElements = {
-                            presented: [],
-                            presenting: [],
-                        };
-                    }
-                    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 sharedElementSnapshot = UIImageView.alloc().init(); // WithImage(snapshotView(presentedSharedElement));
-                    // 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', () => {
-                            sharedElementSnapshot.image = iosSnapshotView(presentedSharedElement);
-                            sharedElementSnapshot.tintColor = presentedSharedElement.tintColor;
-                        });
-                        sharedElementSnapshot.tintColor = presentedSharedElement.tintColor;
-                        sharedElementSnapshot.contentMode = presentedSharedElement.contentMode;
-                    }
-                    iosMatchLayerProperties(sharedElementSnapshot, presentingSharedElement);
-                    sharedElementSnapshot.clipsToBounds = true;
-                    // console.log('---> snapshot: ', sharedElementSnapshot);
-                    const startFrame = presentingSharedElement.convertRectToView(presentingSharedElement.bounds, transitionContext.containerView);
-                    const endFrame = presentedSharedElement.convertRectToView(presentedSharedElement.bounds, transitionContext.containerView);
-                    sharedElementSnapshot.frame = startFrame;
-                    console.log('---> ', presentingView.sharedTransitionTag, ' frame:', iosPrintRect(sharedElementSnapshot.frame));
-                    this.sharedElements.presenting.push({
-                        view: presentingView,
-                        startFrame,
-                        endFrame,
-                        snapshot: sharedElementSnapshot,
-                        startOpacity: presentingView.opacity,
-                        endOpacity: presentedView.opacity,
-                    });
-                    this.sharedElements.presented.push({
-                        view: presentedView,
-                        startFrame: endFrame,
-                        endFrame: startFrame,
-                        startOpacity: presentedView.opacity,
-                        endOpacity: presentingView.opacity,
+        this.transitionController = PageTransitionController.initWithOwner(new WeakRef(this));
+        // console.log('iosNavigatedController presenting:', this.presenting);
+        this.operation = operation;
+        return this.transitionController;
+    }
+    iosInteractionDismiss(animator) {
+        // console.log('-- iosInteractionDismiss --');
+        this.interactiveController = PercentInteractiveController.initWithOwner(new WeakRef(this));
+        return this.interactiveController;
+    }
+    setupInteractiveGesture(startCallback, view) {
+        // console.log(' -- setupInteractiveGesture --');
+        this._interactiveStartCallback = startCallback;
+        if (!this._interactiveDismissGesture) {
+            // console.log('setup but tearing down first!');
+            view.off('pan', this._interactiveDismissGesture);
+            this._interactiveDismissGesture = this._interactiveDismissGestureHandler.bind(this);
+        }
+        view.on('pan', this._interactiveDismissGesture);
+        this._interactiveGestureTeardown = () => {
+            // console.log(`-- TEARDOWN setupInteractiveGesture --`);
+            view.off('pan', this._interactiveDismissGesture);
+            this._interactiveDismissGesture = null;
+        };
+        return this._interactiveGestureTeardown;
+    }
+    _interactiveDismissGestureHandler(args) {
+        if (args?.ios?.view) {
+            // console.log('this.id:', this.id);
+            const state = SharedTransition.getState(this.id);
+            const percent = state.interactive?.dismiss?.percentFormula ? state.interactive.dismiss.percentFormula(args) : args.deltaX / (args.ios.view.bounds.size.width / 2);
+            if (SharedTransition.DEBUG) {
+                console.log('Interactive dismissal percentage:', percent);
+            }
+            switch (args.state) {
+                case GestureStateTypes.began:
+                    SharedTransition.updateState(this.id, {
+                        interactiveBegan: true,
+                        interactiveCancelled: false,
                     });
-                    // set initial opacity to match the source view opacity
-                    sharedElementSnapshot.alpha = presentingView.opacity;
-                    // hide both while animating within the transition context
-                    presentingView.opacity = 0;
-                    presentedView.opacity = 0;
-                    // add snapshot to animate
-                    transitionContext.containerView.addSubview(sharedElementSnapshot);
-                }
-                const cleanupPresent = () => {
-                    for (const presented of this.sharedElements.presented) {
-                        presented.view.opacity = presented.startOpacity;
-                    }
-                    // TODO: Discuss with Igor whether this is necessary
-                    // potential this could help smooth some shared element transitions
-                    UIView.animateWithDurationAnimationsCompletion(0, // Igor: disabled for now, we'll talk about this and decide
-                    () => {
-                        for (const presenting of this.sharedElements.presenting) {
-                            presenting.snapshot.alpha = presenting.endOpacity;
+                    if (this._interactiveStartCallback) {
+                        this._interactiveStartCallback();
+                    }
+                    break;
+                case GestureStateTypes.changed:
+                    if (percent < 1) {
+                        if (this.interactiveController) {
+                            this.interactiveController.updateInteractiveTransition(percent);
                         }
-                    }, () => {
-                        for (const presenting of this.sharedElements.presenting) {
-                            presenting.snapshot.removeFromSuperview();
+                    }
+                    break;
+                case GestureStateTypes.cancelled:
+                case GestureStateTypes.ended:
+                    if (this.interactiveController) {
+                        const finishThreshold = isNumber(state.interactive?.dismiss?.finishThreshold) ? state.interactive.dismiss.finishThreshold : 0.5;
+                        if (percent > finishThreshold) {
+                            if (this._interactiveGestureTeardown) {
+                                this._interactiveGestureTeardown();
+                                this._interactiveGestureTeardown = null;
+                            }
+                            this.interactiveController.finishInteractiveTransition();
                         }
-                        SharedTransition.updateState(this.id, {
-                            activeType: SharedTransitionAnimationType.dismiss,
-                        });
-                        transitionContext.completeTransition(true);
-                    });
-                };
-                const updateFramePresent = () => {
-                    // 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();
-                    console.log('3. Animating shared elements:');
-                    for (const presented of this.sharedElements.presented) {
-                        const presentingMatch = this.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
-                        iosMatchLayerProperties(presentingMatch.snapshot, presented.view.ios);
-                        // create a snapshot of the presented view
-                        presentingMatch.snapshot.image = iosSnapshotView(presented.view.ios);
-                        // apply correct alpha
-                        presentingMatch.snapshot.alpha = presentingMatch.endOpacity;
-                        console.log(`---> ${presentingMatch.view.sharedTransitionTag} animate to: `, iosPrintRect(correctedEndFrame));
-                    }
-                    console.log('  ');
-                };
-                // starting page properties
-                this.presented.view.alpha = typeof state.toPageStart?.opacity === 'number' ? state.toPageStart?.opacity : 0;
-                const startX = typeof state.toPageStart?.x === 'number' ? state.toPageStart?.x : Screen.mainScreen.widthDIPs;
-                const startY = typeof state.toPageStart?.y === 'number' ? state.toPageStart?.y : 0;
-                const startWidth = typeof state.toPageStart?.width === 'number' ? state.toPageStart?.width : Screen.mainScreen.widthDIPs;
-                const startHeight = typeof state.toPageStart?.height === 'number' ? state.toPageStart?.height : Screen.mainScreen.heightDIPs;
-                this.presented.view.frame = CGRectMake(startX, startY, startWidth, startHeight);
-                UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(typeof state.toPageStart?.duration === 'number' ? state.toPageStart?.duration / 1000 : DEFAULT_DURATION, 0, 0.5, 3, 0 /* UIViewAnimationOptions.CurveEaseInOut */, () => {
-                    // animate page properties to the following:
-                    this.presented.view.alpha = typeof state.toPageEnd?.opacity === 'number' ? state.toPageEnd?.opacity : 1;
-                    const endX = typeof state.toPageEnd?.x === 'number' ? state.toPageEnd?.x : 0;
-                    const endY = typeof state.toPageEnd?.y === 'number' ? state.toPageEnd?.y : 0;
-                    const endWidth = typeof state.toPageEnd?.width === 'number' ? state.toPageEnd?.width : Screen.mainScreen.widthDIPs;
-                    const endHeight = typeof state.toPageEnd?.height === 'number' ? state.toPageEnd?.height : Screen.mainScreen.heightDIPs;
-                    this.presented.view.frame = CGRectMake(endX, endY, endWidth, endHeight);
-                    updateFramePresent();
-                }, () => {
-                    cleanupPresent();
-                });
-                break;
+                        else {
+                            SharedTransition.updateState(this.id, {
+                                interactiveCancelled: true,
+                            });
+                            this.interactiveController.cancelInteractiveTransition();
+                        }
+                    }
+                    break;
+            }
+        }
+    }
+}
+var PercentInteractiveController = /** @class */ (function (_super) {
+    __extends(PercentInteractiveController, _super);
+    function PercentInteractiveController() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.started = false;
+        _this.added = false;
+        return _this;
+    }
+    PercentInteractiveController.initWithOwner = function (owner) {
+        var ctrl = PercentInteractiveController.new();
+        ctrl.owner = owner;
+        return ctrl;
+    };
+    PercentInteractiveController.prototype.startInteractiveTransition = function (transitionContext) {
+        var _a;
+        // console.log('startInteractiveTransition');
+        this.transitionContext = transitionContext;
+        if (!this.started) {
+            this.started = true;
+            var owner = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.deref();
+            if (owner) {
+                this.transitionContext.containerView.insertSubviewBelowSubview(owner.presenting.view, owner.presented.view);
             }
-            case 2 /* UINavigationControllerOperation.Pop */: {
-                // this.presented = fromViewCtrl;
-                console.log('-- Transition dismiss --', this.presented);
-                transitionContext.containerView.insertSubviewBelowSubview(toViewCtrl.view, fromViewCtrl.view);
-                // console.log('transitionContext.containerView.subviews.count:', transitionContext.containerView.subviews.count);
-                console.log('  ');
-                console.log(`1. Dismiss sharedTransitionTags to animate:`, this.sharedElements.presented.map((p) => p.view.sharedTransitionTag));
-                console.log(`2. Add back previously stored sharedElements to dismiss:`);
-                for (const p of this.sharedElements.presented) {
+        }
+    };
+    PercentInteractiveController.prototype.updateInteractiveTransition = function (percentComplete) {
+        var _a;
+        var owner = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.deref();
+        if (owner) {
+            if (!this.added) {
+                this.added = true;
+                for (var _i = 0, _b = owner.sharedElements.presented; _i < _b.length; _i++) {
+                    var p = _b[_i];
                     p.view.opacity = 0;
                 }
-                for (const p of this.sharedElements.presenting) {
+                for (var _c = 0, _d = owner.sharedElements.presenting; _c < _d.length; _c++) {
+                    var p = _d[_c];
                     p.snapshot.alpha = p.endOpacity;
-                    transitionContext.containerView.addSubview(p.snapshot);
+                    this.transitionContext.containerView.addSubview(p.snapshot);
                 }
-                const cleanupDismiss = () => {
-                    for (const presenting of this.sharedElements.presenting) {
+                var state = SharedTransition.getState(owner.id);
+                var props_1 = state.fromPageEnd;
+                this.backgroundAnimation = UIViewPropertyAnimator.alloc().initWithDurationDampingRatioAnimations(1, 1, function () {
+                    for (var _i = 0, _a = owner.sharedElements.presenting; _i < _a.length; _i++) {
+                        var p = _a[_i];
+                        p.snapshot.frame = p.startFrame;
+                        iOSNativeHelper.copyLayerProperties(p.snapshot, p.view.ios);
+                        p.snapshot.alpha = 1;
+                    }
+                    owner.presented.view.alpha = isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.opacity) ? props_1 === null || props_1 === void 0 ? void 0 : props_1.opacity : 0;
+                    var endX = isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.x) ? props_1 === null || props_1 === void 0 ? void 0 : props_1.x : Screen.mainScreen.widthDIPs;
+                    var endY = isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.y) ? props_1 === null || props_1 === void 0 ? void 0 : props_1.y : 0;
+                    var endWidth = isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.width) ? props_1 === null || props_1 === void 0 ? void 0 : props_1.width : Screen.mainScreen.widthDIPs;
+                    var endHeight = isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.height) ? props_1 === null || props_1 === void 0 ? void 0 : props_1.height : Screen.mainScreen.heightDIPs;
+                    owner.presented.view.frame = CGRectMake(endX, endY, endWidth, endHeight);
+                });
+            }
+            this.backgroundAnimation.fractionComplete = percentComplete;
+        }
+    };
+    PercentInteractiveController.prototype.cancelInteractiveTransition = function () {
+        var _this = this;
+        var _a, _b, _c;
+        // console.log('cancelInteractiveTransition');
+        var owner = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.deref();
+        if (owner && this.added) {
+            var state = SharedTransition.getState(owner.id);
+            if (!state) {
+                return;
+            }
+            if (this.backgroundAnimation) {
+                this.backgroundAnimation.reversed = true;
+                var duration = isNumber((_b = state.toPageStart) === null || _b === void 0 ? void 0 : _b.duration) ? ((_c = state.toPageStart) === null || _c === void 0 ? void 0 : _c.duration) / 1000 : 0.35;
+                this.backgroundAnimation.continueAnimationWithTimingParametersDurationFactor(null, duration);
+                setTimeout(function () {
+                    for (var _i = 0, _a = owner.sharedElements.presented; _i < _a.length; _i++) {
+                        var p = _a[_i];
+                        p.view.opacity = 1;
+                    }
+                    for (var _b = 0, _c = owner.sharedElements.presenting; _b < _c.length; _b++) {
+                        var p = _c[_b];
+                        p.snapshot.removeFromSuperview();
+                    }
+                    owner.presented.view.alpha = 1;
+                    _this.backgroundAnimation = null;
+                    _this.added = false;
+                    _this.transitionContext.cancelInteractiveTransition();
+                    _this.transitionContext.completeTransition(false);
+                }, duration * 1000);
+            }
+        }
+    };
+    PercentInteractiveController.prototype.finishInteractiveTransition = function () {
+        var _this = this;
+        var _a, _b, _c;
+        // console.log('finishInteractiveTransition');
+        var owner = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.deref();
+        if (owner && this.added) {
+            if (this.backgroundAnimation) {
+                this.backgroundAnimation.reversed = false;
+                var state = SharedTransition.getState(owner.id);
+                if (!state) {
+                    SharedTransition.finishState(owner.id);
+                    this.transitionContext.completeTransition(true);
+                    return;
+                }
+                var duration = isNumber((_b = state.fromPageEnd) === null || _b === void 0 ? void 0 : _b.duration) ? ((_c = state.fromPageEnd) === null || _c === void 0 ? void 0 : _c.duration) / 1000 : 0.35;
+                this.backgroundAnimation.continueAnimationWithTimingParametersDurationFactor(null, duration);
+                setTimeout(function () {
+                    for (var _i = 0, _a = owner.sharedElements.presenting; _i < _a.length; _i++) {
+                        var presenting = _a[_i];
                         presenting.view.opacity = presenting.startOpacity;
                         presenting.snapshot.removeFromSuperview();
                     }
-                    SharedTransition.finishState(this.id);
-                    transitionContext.completeTransition(true);
-                };
-                const updateFrameDismiss = () => {
-                    console.log('3. Dismissing shared elements:');
-                    for (const presenting of this.sharedElements.presenting) {
-                        iosMatchLayerProperties(presenting.snapshot, presenting.view.ios);
-                        presenting.snapshot.frame = presenting.startFrame;
-                        presenting.snapshot.alpha = presenting.startOpacity;
-                        console.log(`---> ${presenting.view.sharedTransitionTag} animate to: `, iosPrintRect(presenting.startFrame));
-                    }
-                    console.log('  ');
-                };
-                UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(typeof state.fromPageEnd?.duration === 'number' ? state.fromPageEnd?.duration / 1000 : DEFAULT_DURATION, 0, 0.5, 3, 0 /* UIViewAnimationOptions.CurveEaseInOut */, () => {
-                    this.presented.view.alpha = typeof state.fromPageEnd?.opacity === 'number' ? state.fromPageEnd?.opacity : 0;
-                    const endX = typeof state.fromPageEnd?.x === 'number' ? state.fromPageEnd?.x : Screen.mainScreen.widthDIPs;
-                    const endY = typeof state.fromPageEnd?.y === 'number' ? state.fromPageEnd?.y : 0;
-                    const endWidth = typeof state.fromPageEnd?.width === 'number' ? state.fromPageEnd?.width : Screen.mainScreen.widthDIPs;
-                    const endHeight = typeof state.fromPageEnd?.height === 'number' ? state.fromPageEnd?.height : Screen.mainScreen.heightDIPs;
-                    this.presented.view.frame = CGRectMake(endX, endY, endWidth, endHeight);
-                    updateFrameDismiss();
-                }, () => {
-                    cleanupDismiss();
-                });
-                break;
+                    SharedTransition.finishState(owner.id);
+                    _this.backgroundAnimation = null;
+                    _this.added = false;
+                    _this.transitionContext.finishInteractiveTransition();
+                    _this.transitionContext.completeTransition(true);
+                }, duration * 1000);
             }
         }
+    };
+    PercentInteractiveController.ObjCProtocols = [UIViewControllerInteractiveTransitioning];
+    return PercentInteractiveController;
+}(UIPercentDrivenInteractiveTransition));
+var PageTransitionController = /** @class */ (function (_super) {
+    __extends(PageTransitionController, _super);
+    function PageTransitionController() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-}
+    PageTransitionController.initWithOwner = function (owner) {
+        var ctrl = PageTransitionController.new();
+        ctrl.owner = owner;
+        return ctrl;
+    };
+    PageTransitionController.prototype.transitionDuration = function (transitionContext) {
+        var owner = this.owner.deref();
+        if (owner) {
+            return owner.getDuration();
+        }
+        return DEFAULT_DURATION;
+    };
+    PageTransitionController.prototype.animateTransition = function (transitionContext) {
+        var owner = this.owner.deref();
+        if (owner) {
+            // console.log('--- PageTransitionController animateTransition');
+            // console.log('owner.presented:', owner.presented);
+            // console.log('owner.presenting:', owner.presenting);
+            // console.log('owner.id:', owner.id);
+            var state_1 = SharedTransition.getState(owner.id);
+            if (!state_1) {
+                return;
+            }
+            // console.log('state.activeType:', state.activeType);
+            // console.log('operation:', owner.operation);
+            // switch (state.activeType) {
+            switch (owner.operation) {
+                case UINavigationControllerOperation.Push: {
+                    // console.log('pushing!!');
+                    // this.presented = toViewCtrl;
+                    // this.presenting = fromViewCtrl;
+                    transitionContext.containerView.insertSubviewAboveSubview(owner.presented.view, owner.presenting.view);
+                    owner.presented.view.layoutIfNeeded();
+                    var _a = SharedTransition.getSharedElements(state_1.page, state_1.toPage), sharedElements = _a.sharedElements, presented = _a.presented;
+                    if (SharedTransition.DEBUG) {
+                        console.log('  PageTransition: Push');
+                        console.log("1. Found sharedTransitionTags to animate:", sharedElements.map(function (v) { return v.sharedTransitionTag; }));
+                        console.log("2. Take snapshots of shared elements and position them based on presenting view:");
+                    }
+                    var _loop_1 = function (presentingView) {
+                        if (!owner.sharedElements) {
+                            owner.sharedElements = {
+                                presented: [],
+                                presenting: [],
+                            };
+                        }
+                        var presentingSharedElement = presentingView.ios;
+                        // 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)
+                        var presentedView = presented.find(function (v) { return v.sharedTransitionTag === presentingView.sharedTransitionTag; });
+                        var presentedSharedElement = presentedView.ios;
+                        var sharedElementSnapshot = UIImageView.alloc().init(); // WithImage(snapshotView(presentedSharedElement));
+                        // 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 () {
+                                sharedElementSnapshot.image = iOSNativeHelper.snapshotView(presentedSharedElement, Screen.mainScreen.scale);
+                                sharedElementSnapshot.tintColor = presentedSharedElement.tintColor;
+                            });
+                            sharedElementSnapshot.tintColor = presentedSharedElement.tintColor;
+                            sharedElementSnapshot.contentMode = presentedSharedElement.contentMode;
+                        }
+                        iOSNativeHelper.copyLayerProperties(sharedElementSnapshot, presentingSharedElement);
+                        sharedElementSnapshot.clipsToBounds = true;
+                        // console.log('---> snapshot: ', sharedElementSnapshot);
+                        var startFrame = presentingSharedElement.convertRectToView(presentingSharedElement.bounds, transitionContext.containerView);
+                        var endFrame = presentedSharedElement.convertRectToView(presentedSharedElement.bounds, transitionContext.containerView);
+                        sharedElementSnapshot.frame = startFrame;
+                        if (SharedTransition.DEBUG) {
+                            console.log('---> ', presentingView.sharedTransitionTag, ' frame:', iOSNativeHelper.printCGRect(sharedElementSnapshot.frame));
+                        }
+                        owner.sharedElements.presenting.push({
+                            view: presentingView,
+                            startFrame: startFrame,
+                            endFrame: endFrame,
+                            snapshot: sharedElementSnapshot,
+                            startOpacity: presentingView.opacity,
+                            endOpacity: presentedView.opacity,
+                        });
+                        owner.sharedElements.presented.push({
+                            view: presentedView,
+                            startFrame: endFrame,
+                            endFrame: startFrame,
+                            startOpacity: presentedView.opacity,
+                            endOpacity: presentingView.opacity,
+                        });
+                        // set initial opacity to match the source view opacity
+                        sharedElementSnapshot.alpha = presentingView.opacity;
+                        // hide both while animating within the transition context
+                        presentingView.opacity = 0;
+                        presentedView.opacity = 0;
+                        // add snapshot to animate
+                        transitionContext.containerView.addSubview(sharedElementSnapshot);
+                    };
+                    for (var _i = 0, sharedElements_1 = sharedElements; _i < sharedElements_1.length; _i++) {
+                        var presentingView = sharedElements_1[_i];
+                        _loop_1(presentingView);
+                    }
+                    var cleanupPresent_1 = function () {
+                        for (var _i = 0, _a = owner.sharedElements.presented; _i < _a.length; _i++) {
+                            var presented_1 = _a[_i];
+                            presented_1.view.opacity = presented_1.startOpacity;
+                        }
+                        for (var _b = 0, _c = owner.sharedElements.presenting; _b < _c.length; _b++) {
+                            var presenting = _c[_b];
+                            presenting.snapshot.removeFromSuperview();
+                        }
+                        SharedTransition.updateState(owner.id, {
+                            activeType: SharedTransitionAnimationType.dismiss,
+                        });
+                        owner.presenting.view.removeFromSuperview();
+                        transitionContext.completeTransition(true);
+                    };
+                    var updateFramePresent_1 = function () {
+                        // 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();
+                        if (SharedTransition.DEBUG) {
+                            console.log('3. Animating shared elements:');
+                        }
+                        var _loop_2 = function (presented_2) {
+                            var presentingMatch = owner.sharedElements.presenting.find(function (v) { return v.view.sharedTransitionTag === presented_2.view.sharedTransitionTag; });
+                            // Workaround wrong origin due ongoing layout process.
+                            var updatedEndFrame = presented_2.view.ios.convertRectToView(presented_2.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
+                            iOSNativeHelper.copyLayerProperties(presentingMatch.snapshot, presented_2.view.ios);
+                            // create a snapshot of the presented view
+                            presentingMatch.snapshot.image = iOSNativeHelper.snapshotView(presented_2.view.ios, Screen.mainScreen.scale);
+                            // apply correct alpha
+                            presentingMatch.snapshot.alpha = presentingMatch.endOpacity;
+                            if (SharedTransition.DEBUG) {
+                                console.log("---> ".concat(presentingMatch.view.sharedTransitionTag, " animate to: "), iOSNativeHelper.printCGRect(correctedEndFrame));
+                            }
+                        };
+                        for (var _i = 0, _a = owner.sharedElements.presented; _i < _a.length; _i++) {
+                            var presented_2 = _a[_i];
+                            _loop_2(presented_2);
+                        }
+                    };
+                    // starting page properties
+                    var toProps = state_1.toPageStart;
+                    owner.presented.view.alpha = isNumber(toProps === null || toProps === void 0 ? void 0 : toProps.opacity) ? toProps === null || toProps === void 0 ? void 0 : toProps.opacity : 0;
+                    var startX = isNumber(toProps === null || toProps === void 0 ? void 0 : toProps.x) ? toProps === null || toProps === void 0 ? void 0 : toProps.x : Screen.mainScreen.widthDIPs;
+                    var startY = isNumber(toProps === null || toProps === void 0 ? void 0 : toProps.y) ? toProps === null || toProps === void 0 ? void 0 : toProps.y : 0;
+                    var startWidth = isNumber(toProps === null || toProps === void 0 ? void 0 : toProps.width) ? toProps === null || toProps === void 0 ? void 0 : toProps.width : Screen.mainScreen.widthDIPs;
+                    var startHeight = isNumber(toProps === null || toProps === void 0 ? void 0 : toProps.height) ? toProps === null || toProps === void 0 ? void 0 : toProps.height : Screen.mainScreen.heightDIPs;
+                    owner.presented.view.frame = CGRectMake(startX, startY, startWidth, startHeight);
+                    var animateProperties_1 = function () {
+                        var props = state_1.toPageEnd;
+                        // animate page properties to the following:
+                        owner.presented.view.alpha = isNumber(props === null || props === void 0 ? void 0 : props.opacity) ? props === null || props === void 0 ? void 0 : props.opacity : 1;
+                        var endX = isNumber(props === null || props === void 0 ? void 0 : props.x) ? props === null || props === void 0 ? void 0 : props.x : 0;
+                        var endY = isNumber(props === null || props === void 0 ? void 0 : props.y) ? props === null || props === void 0 ? void 0 : props.y : 0;
+                        var endWidth = isNumber(props === null || props === void 0 ? void 0 : props.width) ? props === null || props === void 0 ? void 0 : props.width : Screen.mainScreen.widthDIPs;
+                        var endHeight = isNumber(props === null || props === void 0 ? void 0 : props.height) ? props === null || props === void 0 ? void 0 : props.height : Screen.mainScreen.heightDIPs;
+                        owner.presented.view.frame = CGRectMake(endX, endY, endWidth, endHeight);
+                    };
+                    if (isNumber(toProps === null || toProps === void 0 ? void 0 : toProps.duration)) {
+                        // override spring and use only linear animation
+                        UIView.animateWithDurationAnimationsCompletion((toProps === null || toProps === void 0 ? void 0 : toProps.duration) / 1000, function () {
+                            animateProperties_1();
+                            updateFramePresent_1();
+                        }, function () {
+                            cleanupPresent_1();
+                        });
+                    }
+                    else {
+                        var spring = toProps === null || toProps === void 0 ? void 0 : toProps.spring;
+                        iOSNativeHelper.animateWithSpring({
+                            tension: isNumber(spring === null || spring === void 0 ? void 0 : spring.tension) ? spring === null || spring === void 0 ? void 0 : spring.tension : DEFAULT_SPRING.tension,
+                            friction: isNumber(spring === null || spring === void 0 ? void 0 : spring.friction) ? spring === null || spring === void 0 ? void 0 : spring.tension : DEFAULT_SPRING.friction,
+                            animations: function () {
+                                animateProperties_1();
+                                updateFramePresent_1();
+                            },
+                            completion: function () {
+                                cleanupPresent_1();
+                            },
+                        });
+                    }
+                    break;
+                }
+                case UINavigationControllerOperation.Pop: {
+                    // console.log('popping!');
+                    transitionContext.containerView.insertSubviewBelowSubview(owner.presenting.view, owner.presented.view);
+                    // console.log('transitionContext.containerView.subviews.count:', transitionContext.containerView.subviews.count);
+                    if (SharedTransition.DEBUG) {
+                        console.log('  PageTransition: Pop');
+                        console.log("1. Dismiss sharedTransitionTags to animate:", owner.sharedElements.presented.map(function (p) { return p.view.sharedTransitionTag; }));
+                        console.log("2. Add back previously stored sharedElements to dismiss:");
+                    }
+                    for (var _b = 0, _c = owner.sharedElements.presented; _b < _c.length; _b++) {
+                        var p = _c[_b];
+                        p.view.opacity = 0;
+                    }
+                    for (var _d = 0, _e = owner.sharedElements.presenting; _d < _e.length; _d++) {
+                        var p = _e[_d];
+                        p.snapshot.alpha = p.endOpacity;
+                        transitionContext.containerView.addSubview(p.snapshot);
+                    }
+                    var cleanupDismiss_1 = function () {
+                        for (var _i = 0, _a = owner.sharedElements.presenting; _i < _a.length; _i++) {
+                            var presenting = _a[_i];
+                            presenting.view.opacity = presenting.startOpacity;
+                            presenting.snapshot.removeFromSuperview();
+                        }
+                        SharedTransition.finishState(owner.id);
+                        transitionContext.completeTransition(true);
+                    };
+                    var updateFrameDismiss_1 = function () {
+                        if (SharedTransition.DEBUG) {
+                            console.log('3. Dismissing shared elements:');
+                        }
+                        for (var _i = 0, _a = owner.sharedElements.presenting; _i < _a.length; _i++) {
+                            var presenting = _a[_i];
+                            iOSNativeHelper.copyLayerProperties(presenting.snapshot, presenting.view.ios);
+                            presenting.snapshot.frame = presenting.startFrame;
+                            presenting.snapshot.alpha = presenting.startOpacity;
+                            if (SharedTransition.DEBUG) {
+                                console.log("---> ".concat(presenting.view.sharedTransitionTag, " animate to: "), iOSNativeHelper.printCGRect(presenting.startFrame));
+                            }
+                        }
+                    };
+                    var props_1 = state_1.fromPageEnd;
+                    var animateProperties_2 = function () {
+                        owner.presented.view.alpha = isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.opacity) ? props_1 === null || props_1 === void 0 ? void 0 : props_1.opacity : 0;
+                        var endX = isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.x) ? props_1 === null || props_1 === void 0 ? void 0 : props_1.x : Screen.mainScreen.widthDIPs;
+                        var endY = isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.y) ? props_1 === null || props_1 === void 0 ? void 0 : props_1.y : 0;
+                        var endWidth = isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.width) ? props_1 === null || props_1 === void 0 ? void 0 : props_1.width : Screen.mainScreen.widthDIPs;
+                        var endHeight = isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.height) ? props_1 === null || props_1 === void 0 ? void 0 : props_1.height : Screen.mainScreen.heightDIPs;
+                        owner.presented.view.frame = CGRectMake(endX, endY, endWidth, endHeight);
+                    };
+                    if (isNumber(props_1 === null || props_1 === void 0 ? void 0 : props_1.duration)) {
+                        // override spring and use only linear animation
+                        UIView.animateWithDurationAnimationsCompletion((props_1 === null || props_1 === void 0 ? void 0 : props_1.duration) / 1000, function () {
+                            animateProperties_2();
+                            updateFrameDismiss_1();
+                        }, function () {
+                            cleanupDismiss_1();
+                        });
+                    }
+                    else {
+                        var spring = props_1 === null || props_1 === void 0 ? void 0 : props_1.spring;
+                        iOSNativeHelper.animateWithSpring({
+                            tension: isNumber(spring === null || spring === void 0 ? void 0 : spring.tension) ? spring === null || spring === void 0 ? void 0 : spring.tension : DEFAULT_SPRING.tension,
+                            friction: isNumber(spring === null || spring === void 0 ? void 0 : spring.friction) ? spring === null || spring === void 0 ? void 0 : spring.tension : DEFAULT_SPRING.friction,
+                            animations: function () {
+                                animateProperties_2();
+                                updateFrameDismiss_1();
+                            },
+                            completion: function () {
+                                cleanupDismiss_1();
+                            },
+                        });
+                    }
+                    break;
+                }
+            }
+        }
+    };
+    PageTransitionController.ObjCProtocols = [UIViewControllerAnimatedTransitioning];
+    return PageTransitionController;
+}(NSObject));
 //# sourceMappingURL=page-transition.ios.js.map