0
votes

Is it possible to achieve the page transition shown in the image below using nativescript core?

As you can see, to make the transition from one view to the previous (parent) one, I'm making a pan gesture slowly and depending on where my finger horizontally is, the view is being shown and coming into existence from left. You can't see the finger but you can see the slow transition controlled by my finger. I'm making a pan gesture from very left of screen to the right. The transitions that I've so far read about, run in one go without giving any control to the user. Is this one possible using nativescript core?

ios transition example

So far I've tried writing a custom transition class/method and providing it as a transition instance to navigation entry, but couldn't find a way to manually control the actual transition using pan gesture.

const customNavigation = new CustomTransitionIOS(4000, 2);
const navigationEntry: NavigationEntry = {
    moduleName: "settings",
    animated: true,
    transition: {
        instance: customNavigation
    },
    context: {
        name: "John"
    },
    clearHistory: true
};
1
That's the default back navigation gesture you get on iOS. You don't really have to do anything, it's a default feature out of the box. When you have a previous page on history, you can simply do that unless you had disabled it by hiding ActionBar / setting enableSwipeBackNavigation to false. - Manoj
Thanks, no Manoj, I'm talking about nativescript core based app not the default ios app, when i create a nativescript app, it doesn't allow to move the page as shown. If you do the transition, it will open the target page in a slide (or fade in etc.). What I'm showing in the image above is that the speed of transition is driven by my finger movement. For exmaple, in the middle of my pan gesture, I can stop moving my finger (still touching screen) and the page will stay there in the middle - half transitioned - until I take my finger off screen and then it will finish the transition. - Rahul
I'm also talking about NativeScript but I said iOS because it's iOS only feature. If you have issues, please share a Playground sample. - Manoj
In the default navigation that you're suggesting, can you stop/pause the page transition in between. So both pages - the parent and child - are paused on the screen each one taking half the screen since my finger is holding both in the middle. Can you do that? - Rahul
Hi Manoj, please see this play.nativescript.org/?template=play-ng&id=DVxbTC&v=582 I want to apply this kind of transition (click on a detail item, then slowly swipe from left to right on the detail page, doing which slowly brings the home page) how do i do this using nativescript core. The sample uses nativescript with angular. - Rahul

1 Answers

0
votes

Found it. I actually needed to use Frame.topmost() function instead of simply navigating to another view.

Frame.topmost().navigate('another-page');