I’ve written a few blog posts in the past about NativeControls, a plugin for Cordova/PhoneGap that let’s you use the Navigation Bar (the infamous app header) and the TabBar (the infamous app footer) in your web-based Apps. PhoneGap works as a layer between the native xCode and your javascript, giving you the responsiveness of a native app in your web app. On top of that, it feels really native, because it is native. In fact, it is one of my favorite ways to implement a simple UI in an app.

I’ve finally gotten around to updating the code on GitHub. The hide/show functions aren’t 100% right, but I got both portrait and landscape working. If someone wants to fork my code and fix some of the bugs, please feel free.

Setup is pretty simple. Grab the following files and add them to the plugin section of your project:

CDVNavigationBar.xib

CDVNavigationBarController.h

CDVNavigationBarController.m

NativeControls.h

NativeControls.m

Include the javascript files at the top of your index file. I’ve included them all to show that order matters:

Take the time to walk through the code and learn what is happening. First, we are setting up the TabBar (footer), and buttons. Then we are setting up the NavigationBar (header) and its two buttons. We will also need to create two functions for these buttons called “onLeftNavButton” and “onRightNavButton”.

Last but not least, don’t forget to add “NativeControls” to your Cordova.plist file to initialize the plugin, and start up xCode. If you are lucky, you will see the top and bottom bars as shown in the screenshot. Download the demo and code over at GitHub.

Related

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.

80 Responses

I’m not sure if I’m doing something wrong here, but I have an issue since upgrading. Today I recreated my app in Xcode after installing Cordova 1.7.0 (previously running 1.5.0) and I removed the old NativeControls .h & .m files then replaced them with your latest release (plus all the other new files). I’m also referencing Cordova-1.7.0.js. When the app first launches, the bottom tab bar is in place as expected. As soon as I tap any of the tabs, it changes page but the tab bar vanishes and the whole page moves down leaving whitespace at the top of the app – the same size as the bottom tab bar was! I’m not calling a top nav bar, so do I even need this update?

I have reverted to the previous version of NativeControls (still using Cordova 1.7.0) and it’s working fine again. Am I missing something?

hi Again.I have changed the tabbar color! sweet.
i cant get get the navbar color changed there are no settings in xcode that i can see and i have tried self.navigationController.navigationBar.tintColor = [UIColor orangeColor]; and all of the variants with no luck.

Hello
Im beginning with dev iOS with the great Phonegap
Thanks a lot for this great tutorial ,helps a lot.
I m trying to get the label under the controls tabBar icon on two line for a specific request where 2 menus labels need to be set like this(there is 5 menus in the TabBar)
I found how to increase the the height of the tabBar in NativeControls.m
if(height == 0)
{
height = 65.0f;
atBottom = YES;
}

-How i could customize the text box label for the TabBar this way ? (need to get the words corrects)
-There is a way to set up the size of the icon box for TabBar?
Thank in advance if someone can provide me

Hi everyone-
I seem to be having a slight issue with the navigation bar. When a new page is loaded, the page loads from the top of the screen, so that the navbar is covering the upper portion of the page. Is there any way to resolve this?

Very odd… the viewport should only be the displayed window. However, my show/hide functions are very buggy right now, so perhaps that is the problem. I’m moving irl right now, but hope to jump back on this project soon.

Thanks for your answer. I’m new to IOS so I do not have much experience. Just one more question: I try to add image to navbar button but it didn’t show up. This is my code:
…
nativeControls.setupLeftNavButton(‘Back’, ‘www/images/back.png’, ‘onBack’)
…
Button’s event works but the image didn’t show. Did I do something wrong ? Thanks.

I did try “/www/images/back.png” and it didn’t work too. In your example, you only change image for tabbar item, with navbar, you leave the field image blank. I try to change the tabbar image with the path ‘www/images/imagename.png’ and it works well, but it does not work for navbar. Can you pls try your code with custom image for navbar to check again. Thanks alot.

Hi Sprawl
I use the original plugin nativecontrols perfectly working with Jquery and a multipage.
Hide and show tabbar works great.
On my application at the index the navigation tabbar is hide and after clicking on a Jquery list menu item, the tabbar is show and the correct tabbar menu item is select.
When i return to the home page the native controls bars is hide again.
I m happy of that except its only working inside a multiple page with jquery.
But when try using it with some single page links , the navigation of the native doesnt work anymore.
It just appear one but navigation of the tabbar doesnt work anymore and when return home page doesnt hide.
Its something with Dom i imagine.But i m lost how use this
(i use the function init to load the nativecontrols at the home page)

Could help me a bit how use nativecontrols with single pages and jquery

Report problem: when I call function nativeControls.hideTabBar(), my page is slided up a little bit and being covered by the navbar and the page can not be scrolled anymore. Is this a bug or because of my bad code ?

I tested your code and it works just fine, nice layout!
But there is a problem with a scrolling in this app.
When you put something in CONTENT div like listview, there is no scroll function at least not in simulator.
Did you think about this?

thanks a lot for the plugin. NativeControls is really valuable to us and saved us a lot of time.

We found one issue: Hiding the NavBar does work on the first screen but after resizing the first time, a blank rectangle apears at the top of the app and pushes the webview towards the end. The Tabbar slides out of sight, only the top 5 Pixel are still visible.

The cause is variable topBar in NativeControls.m:resizeTabBar which is statically set to “44.0” but should have a value of 0 when NavBar is hidden. We were fixing topBar to “0.0” in our app and everything is working as expected from then on. Maybe you can add a switch in the next release that checks whether NavBar is hidden and set the value of topBar accordingly.

I have got this all working – I have also allowed scrolling (up and down) for longer content pages – the only problem is that when you scroll to the end of the page you can then go further which leaves a white space the same height as the bottom tab bar. Is there a reason for this?

Thanks for the example. I am starting with Cordova.
When i upload your www folder to phonegab it doesn’t show any toolbar.
Do I need to upload a congif file for phonegab version or something?
Thanks for your help!

This works if I import it into xCode and with the updating of the build architecture and builds to the iPhone device. However, no orientation change. Is there supposed to be?

Also, could not get it to work with Phonegap 2.1, don’t know why. I tried creating a new project in Phonegap and then just importing your www folder, updating script tags and installing your plugins. I’m not getting errors, but nothing is happening i.e. the controls don’t show up.

Any tips how to upgrade? If not, I’ll just build with 1.8.1. Personally, I think the new updates are such a mess!

I have tried this code but running through issues, tab items are not getting called and display appropriate content. I am using Cordova 2.2.0 on OS x . I added alert to onSelect function for each tab this function is not getting called
nativeControls.createTabBarItem(
“page3”,
“Page 3”,
“www/images/question.png”,
{“onSelect”: function() {
alert(“page 3”);https://docs.google.com/open?id=0B-dtT5RyOEjcTXJtTFZ5bTRlZXM

I downloaded your demo, took the WWW folder and renamed it and tried it with a browser in my localhost. As expected, it only showed the screen, but nothing else (I’m using WAMP).

Then I zipped the whole folder (and sub-folders) and uploaded it to PhoneGap build and let it build and then downloaded it to both an iPad and an iPod Touch. Both showed exactly what the localhost did: the striped background and the “Thank You” note, but no controls of any kind. Is this what it’s supposed to show? Am I missing some action I am supposed to be doing (been years since I was an Apple guy).