I’ve gotten a whole lot of questions about adding navigation bars to NativeScript iOS apps, so I thought I’d write a quick post about it.

Showing the navigation bar with a title

Let’s say you have the following simple NativeScript app:

<!-- main-page.xml -->
<Page loaded="pageLoaded"></Page>

// main-page.js
function pageLoaded(args) {
    var page = args.object;
}

By default this app does not show a navigation bar, because that’s the default iOS behavior as well. Here’s how you can alter your JavaScript to show the navigation bar on iOS with a title:

// main-page.js
var frameModule = require("ui/frame");

exports.pageLoaded = function(args) {
	var page = args.object;

	// Make sure we're on iOS before making iOS-specific changes
	if (page.ios) {

		// Tell the frame module that the navigation bar should always display
		frameModule.topmost().ios.navBarVisibility = "always";

		// Change the UIViewController's title property
		page.ios.title = "My Awesome App";

		// Get access to the native iOS UINavigationController
		var controller = frameModule.topmost().ios.controller;

		// Call the UINavigationController's setNavigationBarHidden method
		controller.navigationBarHidden = false;
	}
};

Here’s what this looks like:

All that you’re doing here is invoking iOS APIs using the NativeScript runtime. page.ios.title sets the UIViewController’s title property; controller.navigationBarHidden calls the UINavigationController’s setNavigationBarHidden method. That’s it.

This means that in NativeScript you’re not limited to what NativeScript provides; if an API exists in iOS or Android you can just call it. Let’s look at one more example.

Changing the navigation bar’s color

Let’s say you want to change your navigation bar’s background color. Here’s how you make the navigation bar red:

// main-page.js
var frameModule = require("ui/frame");

exports.pageLoaded = function(args) {
	var page = args.object;

	// Make sure we're on iOS before making iOS-specific changes
	if (page.ios) {

		// Tell the frame module that the navigation bar should always display
		frameModule.topmost().ios.navBarVisibility = "always";

		// Change the UIViewController's title property
		page.ios.title = "My Awesome App";

		// Get access to the native iOS UINavigationController
		var controller = frameModule.topmost().ios.controller;

		// Access the UINavigationBar and change its barTintColorProperty
		controller.navigationBar.barTintColor = UIColor.redColor();

		// Call the UINavigationController's setNavigationBarHidden method
		controller.navigationBarHidden = false;
	}
};

Here’s what that red navigation bar looks like:

Again, all that you’re doing here is invoking iOS APIs with the NativeScript runtime. controller.navigationBar gets a reference to the app’s UINavigationBar, and navigationBar.barTintColor = UIColor.redColor() changes its barTintColor property.

What else can you do?

Anything iOS allows you to do. Seriously. Obviously when you make these very iOS-specific changes some knowledge of iOS is required, and some knowledge of how NativeScript handles marshalling between Objective-C and JavaScript certainly helps, but I still think it’s cool that you can access these native APIs so easily—in JavaScript even!

The appeal of NativeScript is that over time more and more of these common tasks are going to be abstracted into platform-agnostic modules so that you don’t have to know the platform-specific details. There are already dozen of modules out there, and new ones are being added with each release.