Instagram/FB-like back navigation w/ animation

Question

I need to add back navigation on swipe. I can do that fairly easily by just adding a swipe listener to the page view and calling goBack. But I really would like the animation that goes with it (in Instagram or FB) where as soon as you start dragging your thumb, the page translates to the right and the previous page starts to translate into view. And then once you get to a certain point it actually performs the navigation.

I tried animating the page, as well as the frame to the right figuring since the view isn't being destroyed it might work. But it doesn't display the page Im navigating back to.

Looking for help on how to accomplish this!

If you are referring to the iOS swipe navigation, it comes by default on Page. You can always swipe from left to right to go back to previous page from current page. — Manoj, Oct 06 '19 at 23:55
@Manoj no, I realize there is a default swipe for iOS. Im talking about the swipe back like Instagram or FB, where you can swipe anywhere on the screen and it will start - versus the default which is the left ~20px or so — bakerac4, Oct 07 '19 at 00:22

score 1 · Accepted Answer · answered Oct 07 '19 at 01:19

I guess you might have come across the other SO thread answering this question natively.

All you have to do is modify the default gesture recogniser on iOS frame.

export function onNavigatedFrom(args: EventData) {
    console.log("Adding gesture...");
    const frame = (<Page>args.object).frame;
    if (frame.ios && !(<any>frame)._gestureRecognizer) {
        const controller = frame.ios.controller;
        const popGestureRecognizer = controller.interactivePopGestureRecognizer;
        const targets = popGestureRecognizer.valueForKey("targets");
        if (targets) {
            let gestureRecognizer = UIPanGestureRecognizer.alloc().init();
            gestureRecognizer.setValueForKey(targets, "targets");
            frame.nativeView.addGestureRecognizer(gestureRecognizer);
            (<any>frame)._gestureRecognizer = gestureRecognizer;
        }
    }
}

export function onNavigatedTo(args: EventData) {
    console.log("Back to root page, removing gesture...");
    const frame = (<Page>args.object).frame;
    if (frame.ios && (<any>frame)._gestureRecognizer) {
        frame.nativeView.removeGestureRecognizer((<any>frame)._gestureRecognizer);
        (<any>frame)._gestureRecognizer = null;
    }
}

Playground Sample

I eventually figured this out. This answer is exactly what does it and I was heading back to post this. Thanks for your help, I appreciate it! — bakerac4, Oct 07 '19 at 02:03

Instagram/FB-like back navigation w/ animation

1 Answers1