Application NavBar

[Ian]

Hi,
When I navigate from the initial page in my app to a second (or subsequent) page, what appears to be a navbar automatically appears at the top of the screen (on iOS devices). On the left-hand side, a button with the label < Back is included. Clicking this button returns you to the previous page.

Is it possible to control this navbar? For example:

Can I change the label/function of the left-hand button?
Can I add a second button on the right-hand side with a programmed action?
Can I add a title in the centre of the navbar?
Can I hide the navbar if I wanted to implement my own custom navigation in an app?

Regards, Ian

[Arthur]

Also topbar is automatically added in Android apps. I hope you will remove this automatic thing in next releases and will give more control to developers.

Thank you.

[Erjan Gavalji]

Hi guys,

Your questions and suggestions are indeed up to the point!

Right now, as you've noticed, the navbar gets added automatically. We didn't provide any APIs for its customization or disabling, leaving these for a later stage, while concentrating on the richness of the core modules.

Basically, due to the differences in the core platforms NativeScript is built upon, the capabilities of a cross-platform, customizable navigation bar are a subject of a deep research. Our target is that the API we will build provides rich set of functionalities and at the same time allows for a smooth use of platform-specific JavaScript code for a rarely-used functionality.

That said, this discussion happens right in time :)

Both Ian's questions and Arthur's note will be taken into consideration.

As per the current situation - almost everything in the navbar can be changed by ios-specific JavaScript code.
Let me know if you need something specific in a real-live scenario so that I prepare an example for it.

Kind regards,
Erjan Gavalji
Telerik

 

 

[Ian]

Hi Erjan,
Thanks for the explanation - I understand your need for further research before developing an API.

I guess an easy fix at this time would be to know how to disable the automatic navbar so that developers can implement their own custom navigation within each app.

Are you able to you provide a NativeScript code snippet that shows how to disable the automatic navbar for an iOS environment? That would be really useful.

Best regards, Ian

[Erjan Gavalji]

Hi Ian,

Please, find attached the sample - it is the cross-platform "app" folder only, which is basically located under the RootProjName/app folder of a project, created with the NativeScript CLI.

To run it, simply extract it under your project, created with NativeScript 0.4.2 and paste the files to the folder I pointed out above.

Let me know if everything got fine.

Kind regards,
Erjan Gavalji
Telerik

 

 

[Ian]

Hi Erjan,
Using the statement frames.topmost().ios.showNavigationBar = false; works perfectly. Thanks!

However, in trying to create a custom navbar, I think I may have discovered an issue in NativeScript's XML parser. I was trying to use the XML below to create a navbar with left/right buttons and a central title bar. I wanted to label the buttons '<' and '>' and, although the left button appears OK, I can't get the right button to appear as '>'. Any other text works and I tried escaping the '>' symbol as '&gt;' which then labels the button as '...' for some reason. Do you think your parser is confusing the '>' character as part of the XML declaration or should I be escaping the character differently?

<Page loaded="loadBoard">
  <GridPanel cssClass="panel">
    <GridPanel.columnDefinitions>
      <ColumnDefinition width="auto" />
      <ColumnDefinition width="*" />
      <ColumnDefinition width="auto" />
    </GridPanel.columnDefinitions>
    <GridPanel.rowDefinitions>
      <RowDefinition height="40" />
    </GridPanel.rowDefinitions>
    <Button id="leftButton" click="navLeft" text="<" width="30" col="0"/>
    <Label text="Nav title" col="1" />
    <Button id="rightButton" click="navRight" text=">" width="30" col="2"/>
  </GridPanel>
</Page>

Best regards, Ian

[Rossen Hristov]

Hi,

I will investigate the &gt; issue and will let you know once it is resolved.

Regards,
Rossen Hristov
Telerik

 

 

[Rossen Hristov]

Hello,

I fixed the issue. It will work properly in the next release.

Regards,
Rossen Hristov
Telerik

 

 

[Ian]

Hi Rossen,
That's great news.

Thanks, Ian

[tommy]

I have basically the opposite request. I would like the navbar to be shown on the main initial page as well.

If it is added in when navigating to subsequent pages, when you navigate back to whatever the first page was, the navbar disappears at the very beginning of the transition. This is bad normally, but looks super weird when you navigate back to the main page via iOS's swipe from the left edge gesture.

In fact, it is possible (if you begin the "swipe to go back" gesture then stop before the "breaking point", the navbar doesn't recover and goes blank.


What I would like to see is a navbar that is there right from the first "page". At least until whatever cross platform navigation abstraction you design is ready.

It gets weirder with the Android Action bar of course. In this case, the ActionBar is always there, but has no control over navigation whatever. No "up caret", or whatever it's called on Android. 

Short of manually making my own navbar navigation, I am not sure what to do.

[tommy]

Here is a video that shows what I am talking about:

https://dl.dropboxusercontent.com/u/1456226/telerik/nativescript-navigation-weirdness-ios.m4v