Back navigation issues on iOS when running in {N}

Question

In {N} iOS platform, when you navigate to a new page, it seems like {N} automatically adds a "< Back" button to the left side of the action bar.

Can this event be intercepted?

Also, I visit a simple About page and then press this auto-generated Back and then visit again...usually on the 2nd or 3rd time - that page is frozen - doesn't accept any taps.

This page works fine in Android.

<Page navigatingTo="navigatingTo" xmlns="http://schemas.nativescript.org/tns.xsd" class="page">
    <Page.actionBar>
      <ActionBar class="action-bar" title="Settings">
         <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="onBackTap"/>
    </Page.actionBar>
</Page>

Can you share some code, this will help anyone who is reading this see exactly what you are trying to achieve and how. — Vladimir Amiorkov, Jan 23 '17 at 11:19
This is the page as is that's causing the problem - there's no model code. I can get to the page and press BACK and then revisit the page and cannot tap BACK any more. Also on the first BACK, I do not get the onBackTap() callback. This is on iOS. — dashman, Jan 23 '17 at 13:17
I think I solved the issue with the screen freezing. I navigate to this page from the sidedrawer. Now before navigating to the above page, I call closeDrawer() explicitly and it seems to be behaving. I still have the issue of onBackTap event not being called on iOS. — dashman, Jan 23 '17 at 13:30
As I see you are using Angular 2, there are a lot of way you can implement navigation incorrectly, can you share the bootstrap code of your app, more specifically where have you placed the page-router-outlet and what kind of routes do you have declared. — Vladimir Amiorkov, Jan 23 '17 at 13:34
I'm using basic {N} with typescript. Let me know what you need. Thanks. btw - there's a definite problem with the sidedrawer thinking it's open when it's not. I saw your message about next release fixing it. — dashman, Jan 23 '17 at 13:49
Let me clarify the problem - the app is navigating back to the previous page fine - it's just that the callback method is not being called. — dashman, Jan 23 '17 at 14:07
Possible duplicate of [Nativescript behavior of the '< Go Back' button](https://stackoverflow.com/questions/41863216/nativescript-behavior-of-the-go-back-button) — David Artmann, Feb 15 '18 at 11:48

score 0 · Answer 1 · answered Feb 15 '18 at 11:43

NativeScript does not allow to handle the tap event to override the back navigation of an NavigationButton as stated in the docs.

The only solution I am aware of is to hide the NavigationButton of iOS and add a ActionItem instead which simulates the NavigationButton. Here is an an example:

<NavigationButton visibility="collapse" *ngIf="!isAndroid"></NavigationButton>
<ActionItem icon="res://ic_arrow_back" text="Back" (tap)="onBack()" *ngIf="!isAndroid" ios.position="left"
            [nsRouterLink]="['/main']" pageTransition="slideRight"></ActionItem>

Back navigation issues on iOS when running in {N}

1 Answers1