Nativescript: [TNS 3.0] iOS:Hidden ActionBar will be shown by showModal()

[kssfilo]

Which platform(s) does your issue occur on?

iOS

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

• CLI: 3.0.0
• Cross-platform modules: 3.0.0
• Runtime(s): 3.0.0
• Plugin(s): -

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

Similar to [iOS:ActionBar will be hidden after closeCallback of modal page #4141]

1. create default project with iOS platform(tns create..)
2. make 2nd page(by coping main-page.js) and add code for hiding actionBar to loaded() (page.actionBarHidden=true)
3. make a modal page and open it by tap event on "2nd" page
4. add topmost.navigate() to 1st page 's tap event handler
5. run and tap 1st page's button -> 2nd page's button -> Modal page's button

-> ActionBar on 2st page will be shown evenif actionBarHidden property is true

If I call showModal() from 1st page, seems no problem(ActionBar is automatically hidden on 1st(main) page on default). This only be happen after topmost.navigate() and ActionBar will be shown and hide it programmatically in loaded().

[tsonevn]

Hi @kssfilo,
I confirm that this is a real issue for iOS, while setting up actionBarHidden=true. For your convenience, I am attaching the project, where this issue could be reproduced.
Archive.zip

As a temporary solution, you could use visibility property, which will allow you to hide the ActionBar. For Example:

<Page.actionBar>
      <ActionBar visibility="collapsed" title="Title" icon="">
          <NavigationButton text="Back" icon="" tap="" />
          <ActionBar.actionItems>
              <ActionItem icon="" text="Left" tap="" ios.position="left" />
              <ActionItem icon="" text="Right" tap="" ios.position="right" />
          </ActionBar.actionItems>
      </ActionBar>
  </Page.actionBar>

[kssfilo]

Your workaround works fine if ActionBar doesn't need to be shown/hidden dynamically.
But I want to change ActionBar visibility depends on device rotation( portrait-> show , landscape -> hide). Fixing this bug is necessary in this case. Thank you.

[tsonevn]

Hi @kssfilo,
You could set up the visibility property for the ActionBar from code behind while getting the component by id and changing the property value depending on the case. For example:

XML

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
  <Page.actionBar>
      <ActionBar id="actionbarid" title="Title" icon="">
          <NavigationButton text="Back" icon="" tap="" />
          <ActionBar.actionItems>
              <ActionItem icon="" text="Left" tap="" ios.position="left" />
              <ActionItem icon="" text="Right" tap="" ios.position="right" />
          </ActionBar.actionItems>
      </ActionBar>
  </Page.actionBar>
  <StackLayout>
    <Button text="Hide Actionbar" tap="abhide" />

    <button text="Open Modal" tap="btnClick2" />
  </StackLayout>
</Page>

TypeScript

import { EventData, Observable } from "data/observable";
import { Page } from "ui/page";
import { Button } from "ui/button";
import {ActionBar} from "ui/action-bar"

var page:Page;
var tmpObservable:Observable;
export function onLoaded(args: EventData) {
    // Get the event sender
    page = <Page>args.object;
    tmpObservable = new Observable();
    tmpObservable.set("isItemVisible", false);
    page.bindingContext=tmpObservable;
}
export function btnClick2(args){
    console.log("btn tap");
    page.showModal("modal", "" , function(arg:string){
        console.log("value module page "+arg);
    },true); 
}

export function abhide(args){
    var button:Button = <Button>args.object;
    var page:Page = <Page> button.page;
    var acbar:ActionBar =<ActionBar> page.getViewById("actionbarid");
    if(acbar.visibility == "visible"){
        acbar.visibility ="collapse";
    }
    else{
        acbar.visibility ="visible";
    }
}

[kssfilo]

@tsonevn
Thank you for example code. but I tried to change actionBarHidden to visible='xx' in my app's code. some layout broken occurred. (Screen shot, top white bar shouldn't be there ,Maybe it's another issue but not so important if actionBarHidden property works correctly.)

Currently, I am using workaround below.

#before showModal
var lastActionBarHidden=page.actionBarHidden

#in closeCallback
page.actionBarHidden=!lastActionBarHidden
page.actionBarHidden=lastActionBarHidden

This is also effective for issule #4141. (but users see unexpected actionbar while non fullscreen modal page is shown in iPad)

[tsonevn]

Hi @kssfilo,
We are already working on the problem with setting up actionBarHidden for iOS and the fix will be available in the upcoming release.

[vakrilov]

Hey @kssfilo. Thanks for your for taking the time to log this issues.

I have just created a PR(#4176) and looks like this and #4141 are quite related. The problem is that the navigation-bar was incorrectly updated when showing the modal page.
As soon as the PR is merged you will be able to test it with the @next builds.

One other thing - I noticed that you set the page.actionBarHidden=true in the loaded event. When I tested this sometimes leads to a glitchy hiding animations due to the fact that the loaded event is fired after the navigation has started. When I moved the code in the navigatedTo event or directly in the page XML(in case setting is not conditional) the animation was smoother.

I hope that was helpful.

[kssfilo]

@vakrilov @tsonevn
I checked your PR #4176 with my application and tested issue #4157 and #4141 and confirmed working perfectly.

Thank you for prompt fix.

[toddanglin]

Happy to see this fix is coming. I have this exact same problem in an iOS app with lots of modals.

For others, official release for 3.1 is June 2017. So this should be widely available at that time. 'Til then, will require @next builds.

[dtopuzov]

Fix will be released in 3.0.1 later this week.

[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.