@nativescript/core 8.5.0-alpha.0 → 8.5.0-alpha.1

package/ui/transition/index.ios.js

@@ -1,9 +1,11 @@
+import { Screen } from '../../platform';
 let transitionId = 0;
 export class Transition {
-    constructor(duration, curve = 0 /* UIViewAnimationCurve.EaseInOut */) {
+    constructor(duration = 350, nativeCurve = 0 /* UIViewAnimationCurve.EaseInOut */) {
         this._duration = duration ? duration / 1000 : 0.35;
-        this._curve = curve;
-        this._id = transitionId++;
+        this._curve = nativeCurve;
+        transitionId++;
+        this.id = transitionId;
     }
     getDuration() {
         return this._duration;
@@ -18,26 +20,40 @@ export class Transition {
         throw new Error('Abstract method call');
     }
     toString() {
-        return `Transition@${this._id}`;
+        return `Transition@${this.id}`;
     }
 }
 Transition.AndroidTransitionType = {};
-export class CustomTransitionModal extends Transition {
-    // Extend this class to create your own
-    dismissedController(dismissed) {
-        return null;
-    }
-    presentedController(presented, presenting, source) {
-        return null;
-    }
-    interactionDismiss(animator) {
-        return null;
-    }
-    interactionPresented(animator) {
-        return null;
-    }
-    presentedViewController(presented, presenting, source) {
-        return null;
-    }
+export function iosSnapshotView(view) {
+    if (view instanceof UIImageView) {
+        return view.image;
+    }
+    // console.log('snapshotView view.frame:', printRect(view.frame));
+    UIGraphicsBeginImageContextWithOptions(CGSizeMake(view.frame.size.width, view.frame.size.height), false, Screen.mainScreen.scale);
+    view.layer.renderInContext(UIGraphicsGetCurrentContext());
+    const image = UIGraphicsGetImageFromCurrentImageContext();
+    UIGraphicsEndImageContext();
+    return image;
+}
+// todo: figure out all the properties/layer properties that we want to transition automatically
+// note: some need to be done at various stages of the animation and are not in here. (e.g. alpha)
+export function iosMatchLayerProperties(view, toView) {
+    const viewPropertiesToMatch = ['backgroundColor'];
+    const layerPropertiesToMatch = ['cornerRadius', 'borderWidth', 'borderColor'];
+    viewPropertiesToMatch.forEach((property) => {
+        if (view[property] !== toView[property]) {
+            console.log('|    -- matching view property:', property);
+            view[property] = toView[property];
+        }
+    });
+    layerPropertiesToMatch.forEach((property) => {
+        if (view.layer[property] !== toView.layer[property]) {
+            console.log('|    -- matching layer property:', property);
+            view.layer[property] = toView.layer[property];
+        }
+    });
+}
+export function iosPrintRect(r) {
+    return `CGRect(${r.origin.x} ${r.origin.y} ${r.size.width} ${r.size.height})`;
 }
 //# sourceMappingURL=index.ios.js.map

package/ui/transition/index.ios.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../../../../packages/core/ui/transition/index.ios.ts"],"names":[],"mappings":"AAAA,IAAI,YAAY,GAAG,CAAC,CAAC;AACrB,MAAM,OAAO,UAAU;IAMtB,YAAY,QAAgB,EAAE,8CAA4D;QACzF,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QACnD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,GAAG,GAAG,YAAY,EAAE,CAAC;IAC3B,CAAC;IAEM,WAAW;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAEM,QAAQ;QACd,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IAEM,oBAAoB,CAAC,iBAAuD,EAAE,YAA8B,EAAE,UAA4B,EAAE,SAA0C;QAC5L,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;IACzC,CAAC;IAEM,qBAAqB,CAAC,cAAsB;QAClD,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;IACzC,CAAC;IAEM,QAAQ;QACd,OAAO,cAAc,IAAI,CAAC,GAAG,EAAE,CAAC;IACjC,CAAC;;AA7BM,gCAAqB,GAAG,EAAE,CAAC;AAgCnC,MAAM,OAAO,qBAAsB,SAAQ,UAAU;IACpD,uCAAuC;IACvC,mBAAmB,CAAE,SAA2B;QAC/C,OAAO,IAAI,CAAC;IACb,CAAC;IAED,mBAAmB,CAAE,SAA2B,EAAE,UAA4B,EAAE,MAAwB;QACvG,OAAO,IAAI,CAAC;IACb,CAAC;IAED,kBAAkB,CAAE,QAA+C;QAClE,OAAO,IAAI,CAAC;IACb,CAAC;IAED,oBAAoB,CAAE,QAA+C;QACpE,OAAO,IAAI,CAAC;IACb,CAAC;IAED,uBAAuB,CAAE,SAA2B,EAAE,UAA4B,EAAE,MAAwB;QAC3G,OAAO,IAAI,CAAC;IACb,CAAC;CACD"}
+{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../../../../packages/core/ui/transition/index.ios.ts"],"names":[],"mappings":"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"}

package/ui/transition/modal-transition.android.d.ts

@@ -0,0 +1,6 @@
+import { BackstackEntry } from '../frame';
+import { Transition } from '.';
+export declare class ModalTransition extends Transition {
+    createAndroidAnimator(transitionType: string): void;
+    test(fragmentTransaction: androidx.fragment.app.FragmentTransaction, currentEntry: BackstackEntry, newEntry: BackstackEntry): void;
+}

package/ui/transition/modal-transition.android.js

@@ -0,0 +1,54 @@
+import { Transition } from '.';
+import { SharedTransition } from './shared-transition';
+export class ModalTransition extends Transition {
+    createAndroidAnimator(transitionType) {
+        console.log('HELLO ModalTransition', transitionType);
+    }
+    test(fragmentTransaction, currentEntry, newEntry) {
+        console.log('HELLO ModalTransition', fragmentTransaction);
+        const fromPage = currentEntry.resolvedPage;
+        const toPage = newEntry.resolvedPage;
+        const currentFragment = currentEntry ? currentEntry.fragment : null;
+        const newFragment = newEntry.fragment;
+        const { sharedElements, presented, presenting } = SharedTransition.getSharedElements(fromPage, toPage);
+        // fragmentTransaction.addSharedElement();
+        toPage.on('loaded', () => {
+            presented.forEach((v) => {
+                console.log({
+                    presentedSharedElements: true,
+                    nativeView: !!v.nativeView,
+                    sharedTransitionTag: v.sharedTransitionTag,
+                });
+                androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag);
+            });
+            // setTimeout(() => {
+            newFragment.startPostponedEnterTransition();
+            // }, 2000)
+        });
+        presenting.forEach((v) => {
+            console.log({
+                presentingSharedElements: true,
+                nativeView: !!v.nativeView,
+                sharedTransitionTag: v.sharedTransitionTag,
+            });
+            androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag);
+        });
+        presenting.forEach((v) => {
+            fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag);
+        });
+        fragmentTransaction.setReorderingAllowed(true);
+        const transitionSet = new androidx.transition.TransitionSet();
+        transitionSet.setDuration(2000);
+        transitionSet.addTransition(new androidx.transition.ChangeBounds());
+        transitionSet.addTransition(new androidx.transition.ChangeTransform());
+        // transitionSet.addTransition(new androidx.transition.ChangeClipBounds());
+        // postpone enter until we call "loaded" on the new page
+        newFragment.postponeEnterTransition();
+        newFragment.setSharedElementEnterTransition(transitionSet);
+        newFragment.setSharedElementReturnTransition(transitionSet);
+        // newFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds());
+        // currentFragment.setSharedElementEnterTransition(new androidx.transition.ChangeBounds());
+        // currentFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds());
+    }
+}
+//# sourceMappingURL=modal-transition.android.js.map

package/ui/transition/modal-transition.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-transition.android.js","sourceRoot":"","sources":["../../../../../packages/core/ui/transition/modal-transition.android.ts"],"names":[],"mappings":"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"}

package/ui/transition/modal-transition.d.ts

@@ -0,0 +1,2 @@
+import { Transition } from '.';
+export declare class ModalTransition extends Transition {}

package/ui/transition/modal-transition.ios.d.ts

@@ -0,0 +1,40 @@
+import type { View } from '../core/view';
+import { Transition } from '.';
+export declare class ModalTransition extends Transition {
+    transitionController: ModalTransitionController;
+    presented: UIViewController;
+    presenting: UIViewController;
+    sharedElements: {
+        presented?: Array<{
+            view: View;
+            startFrame?: CGRect;
+            endFrame?: CGRect;
+            snapshot?: UIImageView;
+            startOpacity?: number;
+            endOpacity?: number;
+        }>;
+        presenting?: Array<{
+            view: View;
+            startFrame: CGRect;
+            endFrame?: CGRect;
+            snapshot?: UIImageView;
+            startOpacity?: number;
+            endOpacity?: number;
+        }>;
+    };
+    iosPresentedController(presented: UIViewController, presenting: UIViewController, source: UIViewController): UIViewControllerAnimatedTransitioning;
+    iosDismissedController(dismissed: UIViewController): UIViewControllerAnimatedTransitioning;
+    iosInteractionDismiss(animator: UIViewControllerAnimatedTransitioning): UIViewControllerInteractiveTransitioning;
+    iosInteractionPresented(animator: UIViewControllerAnimatedTransitioning): UIViewControllerInteractiveTransitioning;
+    iosPresentedViewController(presented: UIViewController, presenting: UIViewController, source: UIViewController): UIPresentationController;
+}
+declare class ModalTransitionController extends NSObject implements UIViewControllerAnimatedTransitioning {
+    static ObjCProtocols: {
+        prototype: UIViewControllerAnimatedTransitioning;
+    }[];
+    owner: WeakRef<ModalTransition>;
+    static initWithOwner(owner: WeakRef<ModalTransition>): ModalTransitionController;
+    transitionDuration(transitionContext: UIViewControllerContextTransitioning): number;
+    animateTransition(transitionContext: UIViewControllerContextTransitioning): void;
+}
+export {};

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

@@ -0,0 +1,251 @@
+import { Screen } from '../../platform';
+import { Transition, iosMatchLayerProperties, iosPrintRect, iosSnapshotView } from '.';
+import { SharedTransition, SharedTransitionAnimationType, DEFAULT_DURATION } from './shared-transition';
+export class ModalTransition extends Transition {
+    iosPresentedController(presented, presenting, source) {
+        this.transitionController = ModalTransitionController.initWithOwner(new WeakRef(this));
+        this.presented = presented;
+        // console.log('presenting:', presenting)
+        return this.transitionController;
+    }
+    iosDismissedController(dismissed) {
+        this.transitionController = ModalTransitionController.initWithOwner(new WeakRef(this));
+        this.presented = dismissed;
+        return this.transitionController;
+    }
+    iosInteractionDismiss(animator) {
+        console.log('-- iosInteractionDismiss --');
+        return null;
+    }
+    iosInteractionPresented(animator) {
+        console.log('-- iosInteractionPresented --');
+        return null;
+    }
+    iosPresentedViewController(presented, presenting, source) {
+        console.log('-- iosPresentedViewController --');
+        return null;
+    }
+}
+var ModalTransitionController = /** @class */ (function (_super) {
+    __extends(ModalTransitionController, _super);
+    function ModalTransitionController() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ModalTransitionController.initWithOwner = function (owner) {
+        var ctrl = ModalTransitionController.new();
+        ctrl.owner = owner;
+        return ctrl;
+    };
+    ModalTransitionController.prototype.transitionDuration = function (transitionContext) {
+        return DEFAULT_DURATION;
+    };
+    ModalTransitionController.prototype.animateTransition = function (transitionContext) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        // console.log('ModalTransitionController animateTransition:', animationType);
+        var owner = this.owner.deref();
+        if (owner) {
+            // console.log('owner.id:', owner.id);
+            var state_1 = SharedTransition.getState(owner.id);
+            if (!state_1) {
+                return;
+            }
+            // console.log('state.activeType:', state.activeType)
+            switch (state_1.activeType) {
+                case SharedTransitionAnimationType.present: {
+                    console.log('-- Transition present --');
+                    transitionContext.containerView.addSubview(owner.presented.view);
+                    owner.presented.view.layoutIfNeeded();
+                    var _q = SharedTransition.getSharedElements(state_1.page, state_1.toPage), sharedElements = _q.sharedElements, presented = _q.presented;
+                    console.log('  ');
+                    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;
+                        // 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)
+                        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 = iosSnapshotView(presentedSharedElement);
+                                sharedElementSnapshot.tintColor = presentedSharedElement.tintColor;
+                            });
+                            sharedElementSnapshot.tintColor = presentedSharedElement.tintColor;
+                            sharedElementSnapshot.contentMode = presentedSharedElement.contentMode;
+                        }
+                        iosMatchLayerProperties(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;
+                        console.log('---> ', presentingView.sharedTransitionTag, ' frame:', iosPrintRect(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;
+                        }
+                        // 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
+                        function () {
+                            for (var _i = 0, _a = owner.sharedElements.presenting; _i < _a.length; _i++) {
+                                var presenting = _a[_i];
+                                presenting.snapshot.alpha = presenting.endOpacity;
+                            }
+                        }, function () {
+                            for (var _i = 0, _a = owner.sharedElements.presenting; _i < _a.length; _i++) {
+                                var presenting = _a[_i];
+                                presenting.snapshot.removeFromSuperview();
+                            }
+                            SharedTransition.updateState({
+                                id: owner.id,
+                                activeType: SharedTransitionAnimationType.dismiss,
+                            });
+                            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();
+                        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
+                            iosMatchLayerProperties(presentingMatch.snapshot, presented_2.view.ios);
+                            // create a snapshot of the presented view
+                            presentingMatch.snapshot.image = iosSnapshotView(presented_2.view.ios);
+                            // apply correct alpha
+                            presentingMatch.snapshot.alpha = presentingMatch.endOpacity;
+                            console.log("---> ".concat(presentingMatch.view.sharedTransitionTag, " animate to: "), iosPrintRect(correctedEndFrame));
+                        };
+                        for (var _i = 0, _a = owner.sharedElements.presented; _i < _a.length; _i++) {
+                            var presented_2 = _a[_i];
+                            _loop_2(presented_2);
+                        }
+                        console.log('  ');
+                    };
+                    // starting page properties
+                    owner.presented.view.alpha = typeof ((_a = state_1.toPageStart) === null || _a === void 0 ? void 0 : _a.opacity) === 'number' ? (_b = state_1.toPageStart) === null || _b === void 0 ? void 0 : _b.opacity : 0;
+                    var startX = typeof ((_c = state_1.toPageStart) === null || _c === void 0 ? void 0 : _c.x) === 'number' ? (_d = state_1.toPageStart) === null || _d === void 0 ? void 0 : _d.x : 0;
+                    var startY = typeof ((_e = state_1.toPageStart) === null || _e === void 0 ? void 0 : _e.y) === 'number' ? (_f = state_1.toPageStart) === null || _f === void 0 ? void 0 : _f.y : Screen.mainScreen.heightDIPs;
+                    var startWidth = typeof ((_g = state_1.toPageStart) === null || _g === void 0 ? void 0 : _g.width) === 'number' ? (_h = state_1.toPageStart) === null || _h === void 0 ? void 0 : _h.width : Screen.mainScreen.widthDIPs;
+                    var startHeight = typeof ((_j = state_1.toPageStart) === null || _j === void 0 ? void 0 : _j.height) === 'number' ? (_k = state_1.toPageStart) === null || _k === void 0 ? void 0 : _k.height : Screen.mainScreen.heightDIPs;
+                    owner.presented.view.frame = CGRectMake(startX, startY, startWidth, startHeight);
+                    UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(typeof ((_l = state_1.toPageStart) === null || _l === void 0 ? void 0 : _l.duration) === 'number' ? ((_m = state_1.toPageStart) === null || _m === void 0 ? void 0 : _m.duration) / 1000 : DEFAULT_DURATION, 0, 0.5, 3, UIViewAnimationOptions.CurveEaseInOut, function () {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                        // animate page properties to the following:
+                        owner.presented.view.alpha = typeof ((_a = state_1.toPageEnd) === null || _a === void 0 ? void 0 : _a.opacity) === 'number' ? (_b = state_1.toPageEnd) === null || _b === void 0 ? void 0 : _b.opacity : 1;
+                        var endX = typeof ((_c = state_1.toPageEnd) === null || _c === void 0 ? void 0 : _c.x) === 'number' ? (_d = state_1.toPageEnd) === null || _d === void 0 ? void 0 : _d.x : 0;
+                        var endY = typeof ((_e = state_1.toPageEnd) === null || _e === void 0 ? void 0 : _e.y) === 'number' ? (_f = state_1.toPageEnd) === null || _f === void 0 ? void 0 : _f.y : 0;
+                        var endWidth = typeof ((_g = state_1.toPageEnd) === null || _g === void 0 ? void 0 : _g.width) === 'number' ? (_h = state_1.toPageEnd) === null || _h === void 0 ? void 0 : _h.width : Screen.mainScreen.widthDIPs;
+                        var endHeight = typeof ((_j = state_1.toPageEnd) === null || _j === void 0 ? void 0 : _j.height) === 'number' ? (_k = state_1.toPageEnd) === null || _k === void 0 ? void 0 : _k.height : Screen.mainScreen.heightDIPs;
+                        owner.presented.view.frame = CGRectMake(endX, endY, endWidth, endHeight);
+                        updateFramePresent_1();
+                    }, function () {
+                        cleanupPresent_1();
+                    });
+                    break;
+                }
+                case SharedTransitionAnimationType.dismiss: {
+                    console.log('-- Transition dismiss --');
+                    // console.log('transitionContext.containerView.subviews.count:', transitionContext.containerView.subviews.count);
+                    console.log('  ');
+                    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 _r = 0, _s = owner.sharedElements.presented; _r < _s.length; _r++) {
+                        var p = _s[_r];
+                        p.view.opacity = 0;
+                    }
+                    for (var _t = 0, _u = owner.sharedElements.presenting; _t < _u.length; _t++) {
+                        var p = _u[_t];
+                        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;
+                        }
+                        SharedTransition.finishState(owner.id);
+                        transitionContext.completeTransition(true);
+                    };
+                    var updateFrameDismiss_1 = function () {
+                        console.log('3. Dismissing shared elements:');
+                        for (var _i = 0, _a = owner.sharedElements.presenting; _i < _a.length; _i++) {
+                            var presenting = _a[_i];
+                            iosMatchLayerProperties(presenting.snapshot, presenting.view.ios);
+                            presenting.snapshot.frame = presenting.startFrame;
+                            presenting.snapshot.alpha = presenting.startOpacity;
+                            console.log("---> ".concat(presenting.view.sharedTransitionTag, " animate to: "), iosPrintRect(presenting.startFrame));
+                        }
+                        console.log('  ');
+                    };
+                    UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(typeof ((_o = state_1.fromPageEnd) === null || _o === void 0 ? void 0 : _o.duration) === 'number' ? ((_p = state_1.fromPageEnd) === null || _p === void 0 ? void 0 : _p.duration) / 1000 : DEFAULT_DURATION, 0, 0.5, 3, UIViewAnimationOptions.CurveEaseInOut, function () {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                        owner.presented.view.alpha = typeof ((_a = state_1.fromPageEnd) === null || _a === void 0 ? void 0 : _a.opacity) === 'number' ? (_b = state_1.fromPageEnd) === null || _b === void 0 ? void 0 : _b.opacity : 0;
+                        var endX = typeof ((_c = state_1.fromPageEnd) === null || _c === void 0 ? void 0 : _c.x) === 'number' ? (_d = state_1.fromPageEnd) === null || _d === void 0 ? void 0 : _d.x : 0;
+                        var endY = typeof ((_e = state_1.fromPageEnd) === null || _e === void 0 ? void 0 : _e.y) === 'number' ? (_f = state_1.fromPageEnd) === null || _f === void 0 ? void 0 : _f.y : Screen.mainScreen.heightDIPs;
+                        var endWidth = typeof ((_g = state_1.fromPageEnd) === null || _g === void 0 ? void 0 : _g.width) === 'number' ? (_h = state_1.fromPageEnd) === null || _h === void 0 ? void 0 : _h.width : Screen.mainScreen.widthDIPs;
+                        var endHeight = typeof ((_j = state_1.fromPageEnd) === null || _j === void 0 ? void 0 : _j.height) === 'number' ? (_k = state_1.fromPageEnd) === null || _k === void 0 ? void 0 : _k.height : Screen.mainScreen.heightDIPs;
+                        owner.presented.view.frame = CGRectMake(endX, endY, endWidth, endHeight);
+                        updateFrameDismiss_1();
+                    }, function () {
+                        cleanupDismiss_1();
+                    });
+                    break;
+                }
+            }
+        }
+    };
+    ModalTransitionController.ObjCProtocols = [UIViewControllerAnimatedTransitioning];
+    return ModalTransitionController;
+}(NSObject));
+//# sourceMappingURL=modal-transition.ios.js.map

package/ui/transition/modal-transition.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-transition.ios.js","sourceRoot":"","sources":["../../../../../packages/core/ui/transition/modal-transition.ios.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,GAAG,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,6BAA6B,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAExG,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAS9C,sBAAsB,CAAC,SAA2B,EAAE,UAA4B,EAAE,MAAwB;QACzG,IAAI,CAAC,oBAAoB,GAAG,yBAAyB,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACvF,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,yCAAyC;QACzC,OAAO,IAAI,CAAC,oBAAoB,CAAC;IAClC,CAAC;IAED,sBAAsB,CAAC,SAA2B;QACjD,IAAI,CAAC,oBAAoB,GAAG,yBAAyB,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACvF,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,OAAO,IAAI,CAAC,oBAAoB,CAAC;IAClC,CAAC;IAED,qBAAqB,CAAC,QAA+C;QACpE,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC;IACb,CAAC;IAED,uBAAuB,CAAC,QAA+C;QACtE,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;QAC7C,OAAO,IAAI,CAAC;IACb,CAAC;IAED,0BAA0B,CAAC,SAA2B,EAAE,UAA4B,EAAE,MAAwB;QAC7G,OAAO,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAC;QAChD,OAAO,IAAI,CAAC;IACb,CAAC;CACD"}

package/ui/transition/page-transition.android.d.ts

@@ -0,0 +1,6 @@
+import { BackstackEntry } from '../frame';
+import { Transition } from '.';
+export declare class PageTransition extends Transition {
+    createAndroidAnimator(transitionType: string): void;
+    test(fragmentTransaction: androidx.fragment.app.FragmentTransaction, currentEntry: BackstackEntry, newEntry: BackstackEntry): void;
+}

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

@@ -0,0 +1,54 @@
+import { Transition } from '.';
+import { SharedTransition } from './shared-transition';
+export class PageTransition extends Transition {
+    createAndroidAnimator(transitionType) {
+        console.log('HELLO PageTransition', transitionType);
+    }
+    test(fragmentTransaction, currentEntry, newEntry) {
+        console.log('HELLO PageTransition', fragmentTransaction);
+        const fromPage = currentEntry.resolvedPage;
+        const toPage = newEntry.resolvedPage;
+        const currentFragment = currentEntry ? currentEntry.fragment : null;
+        const newFragment = newEntry.fragment;
+        const { sharedElements, presented, presenting } = SharedTransition.getSharedElements(fromPage, toPage);
+        // fragmentTransaction.addSharedElement();
+        toPage.on('loaded', () => {
+            presented.forEach((v) => {
+                console.log({
+                    presentedSharedElements: true,
+                    nativeView: !!v.nativeView,
+                    sharedTransitionTag: v.sharedTransitionTag,
+                });
+                androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag);
+            });
+            // setTimeout(() => {
+            newFragment.startPostponedEnterTransition();
+            // }, 2000)
+        });
+        presenting.forEach((v) => {
+            console.log({
+                presentingSharedElements: true,
+                nativeView: !!v.nativeView,
+                sharedTransitionTag: v.sharedTransitionTag,
+            });
+            androidx.core.view.ViewCompat.setTransitionName(v.nativeView, v.sharedTransitionTag);
+        });
+        presenting.forEach((v) => {
+            fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag);
+        });
+        fragmentTransaction.setReorderingAllowed(true);
+        const transitionSet = new androidx.transition.TransitionSet();
+        transitionSet.setDuration(2000);
+        transitionSet.addTransition(new androidx.transition.ChangeBounds());
+        transitionSet.addTransition(new androidx.transition.ChangeTransform());
+        // transitionSet.addTransition(new androidx.transition.ChangeClipBounds());
+        // postpone enter until we call "loaded" on the new page
+        newFragment.postponeEnterTransition();
+        newFragment.setSharedElementEnterTransition(transitionSet);
+        newFragment.setSharedElementReturnTransition(transitionSet);
+        // newFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds());
+        // currentFragment.setSharedElementEnterTransition(new androidx.transition.ChangeBounds());
+        // currentFragment.setSharedElementReturnTransition(new androidx.transition.ChangeBounds());
+    }
+}
+//# sourceMappingURL=page-transition.android.js.map

package/ui/transition/page-transition.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-transition.android.js","sourceRoot":"","sources":["../../../../../packages/core/ui/transition/page-transition.android.ts"],"names":[],"mappings":"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"}

package/ui/transition/page-transition.d.ts

@@ -0,0 +1,2 @@
+import { Transition } from '.';
+export declare class PageTransition extends Transition {}

package/ui/transition/page-transition.ios.d.ts

@@ -0,0 +1,25 @@
+import type { View } from '../core/view';
+import { Transition } from '.';
+export declare class PageTransition extends Transition {
+    presented: UIViewController;
+    presenting: UIViewController;
+    sharedElements: {
+        presented?: Array<{
+            view: View;
+            startFrame?: CGRect;
+            endFrame?: CGRect;
+            snapshot?: UIImageView;
+            startOpacity?: number;
+            endOpacity?: number;
+        }>;
+        presenting?: Array<{
+            view: View;
+            startFrame: CGRect;
+            endFrame?: CGRect;
+            snapshot?: UIImageView;
+            startOpacity?: number;
+            endOpacity?: number;
+        }>;
+    };
+    animateIOSTransition(transitionContext: UIViewControllerContextTransitioning, fromViewCtrl: UIViewController, toViewCtrl: UIViewController, operation: UINavigationControllerOperation): void;
+}