Over a million developers have joined DZone.

Customize the iOS Navigation Bar & Status Bar With NativeScript

A detailed step by step guide on how to use this JavaScript platform to customize your app

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

As I’ve been learning more and more about NativeScript, one of the first tasks that I really dove into was learning how to customize the Navigation Bar for an iOS app. NativeScript has a Navbar component on the roadmap, but for now, it requires some knowledge about the underlying iOS implementation ofUINavigationControllersUIViewControllers and the like.  But fear not! I have braved the treacherous waters of StackOverflow and the Objective-C docs and emerged, victorious and unscathed.


In this article, I’ll go over a few of the more common tweaks that you might need to make to the Navigation Bar or Status Bar. While NativeScript is a cross-platform framework, these tweaks apply specifically to iOS. However, most of the items that I will cover here can also be implemented for Android.

In the process of learning to customize the Navigation Bar, I took a lot of inspiration from this post by Simon NG on AppCoda. It’s a fantastic article that goes through much of what can be done to the iOS Navigation Bar and Status Bar from an Objective-C point of view. I really enjoyed the way the post was laid out, so I’m going to use roughly the same format here to talk about the iOS Navigation Bar / Status Bar in NativeScript:

  • Showing And Hiding the Navigation Bar
  • Setting the Navigation Bar Title
  • Hiding the Back Button
  • Changing the Navigation Bar Background Color
  • Changing the Title Text Color
  • Changing The Title Text Style
  • Setting the Status Bar Style
  • Customizing the Color of the Back Button
  • Hiding the Back Button
  • Adding New Button Bar Items

NativeScript Default Navigation

NativeScript treats the initial page that is loaded as the root view controller. Any view that is navigated to after that is pushed onto the navigation queue using a UINavigationController. This means that on the first view, you won’t see a Navigation Bar at all. On each subsequent view, you will see it including a “< Back” button.

Most of the tweaks that are done require a reference to the UINavigationController, or the current UIViewController. You can obtain a reference to this controller from the frames tns module.

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
exports.loaded = function(args) {
  var page = args.object;
  if (page.ios) {
    var controller = frameModule.topmost().ios.controller;

Showing And Hiding The Navigation

The frame module reference allows for easy showing/hiding of the Navigation Bar at any time and on any page.

// hide the navbar
frameModule.topmost().ios.navBarVisibility = "never";

// show the navbar
frameModule.topmost().ios.navBarVisibility = "always";


Setting The Navigation Bar Title

Changing the title is really easy. Simply use the page.iosapplication object which exposes a title property.

// set the title
page.ios.title = 'Instaclone';


Hiding The Back Button

Sometimes it may be desirable to hide the back button. In the example used here, the user logs in to Instagram using OAuth and is then redirected to the feed page. By default, that feed page displays a back button.


This is not ideal as the user could then back into the OAuth process and the app would break. Hiding the back button requires getting an instance of the UIViewController’s navigation item, and invoking the setHidesBackButtonAnimated method.

var controller = frameModule.topmost().ios.controller;

// get the view controller navigation item
var navigationItem = controller.visibleViewController.navigationItem;

// hide back button
navigationItem.setHidesBackButtonAnimated(true, false);


Changing the Navigation Bar Background Color

The default iOS colors are ok, but no app is complete without a nice, pretty custom Navigation Bar color. Use the setBarTintmethod to change the bar color. You can use system constants likeblueColor(), or you can define a custom one using RGBA. I use the handy program Sip, which samples colors and automatically provides them in this RGBA format.

// set bar color to system blue constant
navigationBar.barTintColor = UIColor.blueColor();

// set bar color to a nice dark blue with RGBA
navigationBar.barTintColor = UIColor.colorWithRedGreenBlueAlpha(0, 0.24, 0.45, 1);


Changing the Title Text Color

The Navigation Bar is now a very hip shade of blue, but the text on it is still black, which is not very nice or hip. It would be better if it were white. We can change that by altering thetitleTextAttributes of the Navigation Bar.

// change title color
navigationBar.titleTextAttributes = new NSDictionary([UIColor.whiteColor()], [NSForegroundColorAttributeName]);


Changing the Title Text Style

Not that you should, but you can change the style of the text in the Navigation Bar as well.  You can, for instance, give it a nice drop shadow to bring back that late 90s feel.

// change title color and drop the shadow like it's hot
var shadow = new NSShadow();
shadow.shadowColor = UIColor.blackColor();
shadow.shadowOffset = CGSizeMake(1,2);
navigationBar.titleTextAttributes = new NSDictionary([UIColor.whiteColor(), shadow], [NSForegroundColorAttributeName, NSShadowAttributeName]);


Setting The Status Bar Style

The Status Bar (time, battery indicator) has a default style of “dark.” This can be changed by using one of the valid mapped enumerations for the UIStatusBarStyle. If you ever wonder just how NativeScript maps iOS types and functions for classes, you can find all of that in the cross-platform-modules repo inside the ios.d.ts file. No need to do any guesswork.

/*  change status bar style
    UIStatusBarStyleBlackOpaque */
navigationBar.barStyle = 1;


Changing the Back Button Color

If we did have a back button on this page, it would be the wrong color:


Simply set the tint color on the navigationBar to fix this.

navigationBar.tintColor = UIColor.whiteColor();


Adding Buttons to the NavBar

Additional buttons can be added to the Navigation Bar using markup.

    <MenuItem text="share" tap="shareAction" />

Buttons can also be added programmatically by building up UIBarButtonItems and then adding them to therightBarButtonItems array on the navigationItem.

/*  Create bar button item

    first argument is what icon to show:

    UIBarButtonSystemItemPageCurl */

// creates item with UIBarButtonSystemItemAction icon
var shareItem = new UIBarButtonItem(UIBarButtonSystemItem.UIBarButtonSystemItemAction, null, null);

// add item to navigation bar
var actionButtonItems = [shareItem];
navigationItem.rightBarButtonItems = actionButtonItems;


Enjoy the Native

One of my favorite parts of working with NativeScript is this ability to just drop down and start working with the underlying native APIs directly, but without that goofy message passing syntax that Objective-C uses. Once you get the hang of how the APIs work and how NativeScript maps them, there is no limit to the amount of customization that you can do to your apps with NativeScript.

The Mobile Zone is brought to you in partnership with Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.


Published at DZone with permission of Burke Holland, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}