CODEWITHSUNDEEP
angular2-nativescript
Odubuc
Odubuc

Reputation: 676

How to use Page Transition in NativeScript

I'm trying to use page transition from routerExtensions without success. (2.3.0)

I tried in js:

this.routerExtensions.navigate(
    [
        'myPage'
    ], 
    {
        animated: true, 
        transition: 
        {
            name: 'flip', 
            duration: 2000, 
            curve: 'linear'
        }
    } 
);

and I tried in the xml:

<Button text="Goto myPage" [nsRouterLink]="['/myPage']" pageTransition="flip"></Button>

Both ways works as I navigate to "myPage" but without animations. Is there a setting I need to change to "enable" the animations or am I missing something obvious?

Upvotes: 5

Views: 5226

Answers (2)

George S
George S

Reputation: 333

With the provided context it's difficult to say exactly why it's not working.

All you should really need to do is:

Setup the components you're routing to:

app-routing.module.ts

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: '/home' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

Inject the native router extensions in the component with your router-outlet

app.component.ts

import { RouterExtensions } from "@nativescript/angular/router";

@Component({
    selector: "ns-app",
    templateUrl: "./app.component.html"
})
export class AppComponent {
  constructor(private routerExtensions: RouterExtensions) {}

  public navigate(link: string): void {
    this.routerExtensions.navigate([link], {
      animated: true,
      transition: { name: 'slide' }
    });
  }
}

And of course have a way to call this method app.component.ts

<StackLayout>
  <FlexboxLayout>
    <Button text="Home" (tap)="navigate('home')"></Button>
    <Button text="About" (tap)="navigate('about')"></Button>
    <Button text="Contact" (tap)="navigate('contact')"></Button>
  </FlexboxLayout>
  <StackLayout>
    <page-router-outlet actionBarVisibility="never"></page-router-outlet>
  </StackLayout>
</StackLayout>

I've setup a working repo demonstrating this here https://github.com/gsavchenko/nativescript-page-transitions. These are also possible to achieve in angular not using nativescript native routing APIs.

Cheers, let me know if there are further questions.

Upvotes: 5

Dlucidone
Dlucidone

Reputation: 1101

Have a look at the Groceries app by nativescript and its a great resource for all nativescript component - https://github.com/NativeScript/sample-Groceries. You can find the transition animation they have given in it.

Good Luck. If need any help ask.

Upvotes: -1

Related Questions