Nativescript: Issue NavigationButton cannot be hiden

[HunterJS-bit]

Hello guys Im having issue, Im not been able to hide NavigationButton on IOS
I working on Mac and runing emulator with Iphone also tested with Iphone 6
Seems like Navigation Button cannot be hidden

Did you verify this is a real problem by searching the [NativeScript Forum]

Yes

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI:3.3
  

  Please tell us how to recreate the issue in as much detail as possible.

The best approach would be to get your code running in the NativeScript Playground and share the link with us, along with any additional details or steps to reproduce needed for examining the issue there.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Yes
I have My Header wher is my action bar that I use across my app:
header.xml

<ActionBar class="action-bar" title="" loaded="Loaded">
   <NavigationButton visibility="collapse"/>
    <ActionBar.actionItems>
        <ActionItem tap="goToTimeplan">
            <ActionItem.actionView>
                <StackLayout  >
                    <Label text="&#xf073;" class="action-item gray"/>
                </StackLayout>
            </ActionItem.actionView>
        </ActionItem>
</ActionBar.actionitems>
</ActionBar>

And the use it around my pages

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
         xmlns:appHeader="/views/header/"  loaded="loaded">
    <appHeader:header />
</Page>

I have also tried with collapsed and adding class or putting it in StackLayout to Hide but Nothing works...
It works that moment , but next time when I stop tns , and again run it with "tns run ios",
its visible...

[nmongiya]

I am also facing the same issue with ios 11.2.5. I have tried with
<NavigationButton ios:visibility="collapsed" ></NavigationButton>
and
<NavigationButton visibility="collapsed" ></NavigationButton>
and
<NavigationButton visibility="collapsed" *ngIf='isNavVisible'></NavigationButton>
and
I have tried below code as well but back button not hiding.
var controller = frameModule.topmost().ios.controller; // get the view controller navigation item var navigationItem = controller.visibleViewController.navigationItem; // hide back button navigationItem.setHidesBackButtonAnimated(true, false);

[tsonevn]

HI @markomiljkovic @nmongiya,
To hide the Navigation Back button, you should set up the visibility property to hidden instead collapsed. For example:

    <ActionBar title="Title" class="action-bar">
        <NavigationButton visibility="hidden" />
    </ActionBar>

[nmongiya]

Hi @tsonevn I have tried
<NavigationButton visibility="hidden" ></NavigationButton>
or
<NavigationButton ios:visibility="hidden" ></NavigationButton>
as well but 'Back' button is still there :(

FYI, I have two more real device with ios 9.3.5 and 10.3.1, it is working fine there, it seems to be issue only with ios11

[HunterJS-bit]

Yes I also changed to hidden but its not working :(,
the first time when I start app, I and go to screen where is NavigationButton, it is visible,
and then after changing screen and geting back I see it disappears.

[tsonevn]

HI all,
Indeed this problem is reproducible on device or simulator with iOS 11.1 or higher. Regarding that, We log this issue as bug and will investigate, what is causing it. In the meantime, I would suggest hiding the back button while using the iOS NavigationView controller. For example:
XML

<Page xmlns="http://www.nativescript.org/tns.xsd" navigatedTo="navigatedTo">
   <Page.actionBar>
       <ActionBar title="Bla Bla" icon="">
           <NavigationButton text="Back" />

       </ActionBar>
   </Page.actionBar>
    <StackLayout>
        <Label text="Second page" textWrap="true" />

    </StackLayout>
</Page>

TypeScript

import { Page } from "ui/page"
import { EventData } from "data/observable";
import { topmost } from "ui/frame";
import { isIOS } from "platform";

export function navigatedTo(args){
    if(isIOS){
        let page:Page = <Page>args.object;
            let navigationBar = page.actionBar.ios;
            navigationBar.topItem.hidesBackButton = true;
    }

}

[HunterJS-bit]

Or another workaround I found its working is to use clearHistory like this before navigating to that page:

const topmost = require("ui/frame").topmost;

const navigationEntry = {
moduleName: "main-page",
clearHistory: true
};
topmost().navigate(navigationEntry);

[nmongiya]

Hi @tsonevn , Unfortunately your workaround is not working for me but as I am using angular, I tried @markomiljkovic solution as well and that is working.
import { RouterExtensions } from 'nativescript-angular/router';

routerExtensions.navigate(['/page'], { clearHistory: true });

[racknoris]

I had to hide the back button in iOS, and all of the above didn't work except for @tsonevn suggestion, which led me to look for the hidesBackButton property in the nativescript source code, and then i figured that what works for me is: page.ios.navigationItem.hidesBackButton = true; (tested in 3.4.1)

[tsonevn]

Hi @racknoris,
This fix is available in the master, to test it on your side, you should install a @next version of the modules.

1. tns plugin remove tns-core-modules
2. tns plugin add tns-core-modules@next

[racknoris]

Hello @tsonevn,
Just to make it clear for me- do you mean that after installing the @next version, instead of:
page.ios.navigationItem.hidesBackButton = true;
I could use:
page.actionBar.ios.topItem.hidesBackButton = true;
?

And another question, will page.ios.navigationItem.hidesBackButton = true; still work after installing @next?

[tsonevn]

Hi @racknoris,
After you install @next modules, you should be able to hide the NavigationButton via XML as follow:

<NavigationButton ios:visibility="collapsed" ></NavigationButton>

[crrobinson14]

I was not able to fix this using @next. I just installed "tns-core-modules": "^4.0.0-2018-03-20-01", and attempted to use the XML

    <ActionBar>
        <NavigationButton visibility="collapsed" />

and the item is still shown. I have also tried collapse for the visibility setting. The API documentation is unclear on whether it should be collapsed or collapse but neither seems to work for me.

[Gamadril]

I don't have any XML files, the UI is generated using JS. How can I disable the navigation button in JS after creating the ActionBar object?
const actionbar = new ActionBar();

[tsonevn]

Hi @Gamadril,
You can try creating a NavigationButton via code-behind and then set up the visibility. For example:

let navButton = new NavigationButton();
navButton.visibility = "collapsed"

For further question, you can use our StackOverflow thread here.

[lock[bot]]

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.