Nativescript: Navigating back from a page with an ActionBar to a page with no ActionBar has weird transition

Created on 30 May 2017  路  4Comments  路  Source: NativeScript/NativeScript

Setup:
An iOS app with two pages:

Page 1 has no ActionBar
this.page.actionBarHidden = true;

Page 2 has an ActionBar with back button

<ActionBar title="Page 2">
    <NavigationButton text="Back"></NavigationButton>
</ActionBar>

Steps:

  • You are on Page 1.
  • Navigate to Page 2 (by pressing some button the page).
  • Press the Back button on the Action Bar on Page 2

Expected:

  • Normal slideRight transition for Page 2 including the ActionBar; Page 1 appears.

Actual:

  • Page 2 has the expected iOS slideRight transition, but the ActionBar has a slideUp transition resulting in a very weird user experience.
ios question

All 4 comments

@melshall using this test application I was not able to reproduce the issue.

Can you please test the application on your side and give more details on how to reproduce the described behavior. For example, have you set curve and also on what device/emulator you are testing?
If your case differs please provide a code snippet or sample project we can work with.

I'm using an Angular based app and I'm testing on iOS 10.3 emulator and iPhone 7 (physical test device).

The back button handling was simply doing

onBack() {
    this.routerExtensions.back();
}

Thanks to your test app, changing it to:

onBack() {
    this.routerExtensions.navigate(["home"],
        {
            clearHistory: true,
            animated: true,
            transition: {
                name: 'slideRight'
            }
       });
}

resolved the issue.

The default behavior on iOS is the "slideRight" that's why I didn't explicitly trigger a transition. But it seems that with an ActionBar to no ActionBar transition, an explicit slideRight transition is needed for things to look right.

@melshall I have created this Angular test application using the described scenario but still was not able to reproduce the issue so I am closing this one as we have a workaround for your case and it seems that it is not consistently reproduced.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kn9ts picture kn9ts  路  3Comments

tsonevn picture tsonevn  路  3Comments

nirsalon picture nirsalon  路  3Comments

valentinstoychev picture valentinstoychev  路  3Comments

Leo-lay picture Leo-lay  路  3Comments