As I've been learning more and more about NativeScript, one of the first tasks 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 of UINavigationControllers, UIViewControllers 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 be needing 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 be likewise 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
- Setting The Status Bar Style
- Customizing the color of the back button
- Hiding the back button
- Adding New Button Bar Items
Most of the tweaks that are done require a reference to the UINavigationController, or the current UIViewController. A reference to this controller can be obtained from the frames tns module.
var loaded = function(args) {
if (page.ios) {
var controller = frameModule.topmost().ios.controller;
}
};
// hide the navbar controller.navigationBarHidden = false;
// show the navbar controller.navigationBarHidden = true;
Changing the title is really easy. Simply use the page.ios application object which exposes the title property.
// set the title
page.ios.title = 'Instaclone';
Sometimes it may be desireable 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);
setBarTint method to change the bar color. You can use system constants like blueColor(), 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);
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 the titleTextAttributes of the Navigation Bar.
// change title color
navigationBar.titleTextAttributes = new NSDictionary([UIColor.whiteColor()], [NSForegroundColorAttributeName]);
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. Remember that you can find all of these definitions in the cross-platform-modules repo inside the ios.d.ts file.
/* change status bar style
UIStatusBarStyleDefault,
UIStatusBarStyleLightContent,
UIStatusBarStyleBlackTranslucent,
UIStatusBarStyleBlackOpaque */
navigationBar.barStyle = 1;
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();
<Page>
<Page.optionsMenu>
<MenuItem text="share" tap="shareAction" icon="ic_share" />
</Page.optionsMenu>
</Page>
rightBarButtonItems array on the navigationItem.
/* Create bar button itemfirst argument is what icon to show: UIBarButtonSystemItemDone, UIBarButtonSystemItemCancel, UIBarButtonSystemItemEdit, UIBarButtonSystemItemSave, UIBarButtonSystemItemAdd, UIBarButtonSystemItemFlexibleSpace, UIBarButtonSystemItemFixedSpace, UIBarButtonSystemItemCompose, UIBarButtonSystemItemReply, UIBarButtonSystemItemAction, UIBarButtonSystemItemOrganize, UIBarButtonSystemItemBookmarks, UIBarButtonSystemItemSearch, UIBarButtonSystemItemRefresh, UIBarButtonSystemItemStop, UIBarButtonSystemItemCamera, UIBarButtonSystemItemTrash, UIBarButtonSystemItemPlay, UIBarButtonSystemItemPause, UIBarButtonSystemItemRewind, UIBarButtonSystemItemFastForward, UIBarButtonSystemItemUndo, UIBarButtonSystemItemRedo, UIBarButtonSystemItemPageCurl */// creates item with UIBarButtonSystemItemAction icon var shareItem = new UIBarButtonItem(9, null, null);
// add item to navigation bar var actionButtonItems = [shareItem]; navigationItem.rightBarButtonItems = actionButtonItems;
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.