Give Your NativeScript Mobile App An Ionic Framework Theme

I’ve been developing and writing about NativeScript for a while now.  One of the things that everyone seems to bring up is that the UI NativeScript offers is unattractive in comparison to frameworks like Ionic.  Sure, it may be unattractive, but it is a native UI and had you been developing with Java or Objective-C things would be no different.  The UI is what you make of it.

I understand not everyone is a top notch UI designer so I thought I’d share a custom theme that will give you an attractive theme in your application.  If you’re familiar with Ionic Framework, it will probably look very similar since the designer, Rob Lauer, made this theme to match.

We’re going to see how to give our native application created with NativeScript a familiar Ionic Framework theme.

There are many components in Ionic Framework so I won’t be going through all of them.  We’re going to take a look at the switch component, often referred to as a toggle.

NativeScript Ionic Theme

In an effort to make this tutorial easy to understand, we’re going to create a fresh NativeScript project.  Using the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:

A few things to note about the above commands.  First you’ll notice we have the --ng tag.  This means our project will use Angular 2 and TypeScript rather than vanilla JavaScript.  You’ll also notice I’m adding the iOS build platform.  You can only build for iOS if you’re using a Mac with Xcode installed.

The theme we’re going to use is called nativescript-ionic.  If you saw my animated image you’ll notice my Android simulator is looking a bit weird.  The NativeScript guys are working on a fix to this, as seen in the issue ticket I opened.  All other components worked fine for me.

To make this tutorial possible we’ll need a particular file and directory from the theme repository.  Download the theme repository or clone it and look for the app/fonts directory and app/app.css file.  These need to be copied into the new project’s app directory.

With the appropriate files in place, open the project’s app/app.component.ts file and include the following code:

You’ll notice I made some changes to the original file.  I am no longer embedding the UI code in the TypeScript file.  I’ve moved that into a new file that we’ll create soon.  I’ve also created a public array with a bunch of theme colors.  The plan is to loop through this array in the UI to reduce the amount of HTML written.

As of right now the app/app.component.html file should not exist.  Go ahead and create it.  Once it has been created, open it and include the following markup:

You’ll see that my list is just a few StackLayout tags in a loop.  What really matters here is my use of the class tag.  These CSS classes can be found in the app/app.css file that we copied over.  Looking through the CSS file is how I found them.

Conclusion

I cannot stress this enough.  NativeScript is a platform for building native applications.  It is up to you to come up with the themes or styles in your application.  Out of the box you get native components to work with.  However, many different custom themes are popping up on the internet.  I demonstrated the Ionic Framework theme for NativeScript, but it certainly isn’t the only one.

You can use these themes to build attractive native applications with minimal effort.

Nic Raboy

Nic is a skilled application developer who has released several native and hybrid mobile applications to iTunes and Google Play. He writes about his development experiences related to making web and mobile app development easier to understand and has experience in Android, Node.js, Apache Cordova, Java, NoSQL, SQL, GoLang, NativeScript, and Unity3D.

  • Tony

    Hi Nic, can I get your opinion on Xamarin vs. Nativescript ? Which was the most you enjoyed working with?

    In my case I found Xamarin has lots of community example / support but lack the flexibility and clarity, as an exmaple an action bar / nav bar to place icons / buttons on it took a while. While Nativescript, even though the documentation is not great, it was a bit better to find my way around. It seems to be more promising. Even stuff like live reloading / hot reload, it exists with Nativescript but not with Xamarin. Thank you !

    • I’ve never used Xamarin because I hardly know C#, so I cannot give feedback on it. Since this is not relevant to the topic of this blog post, it is a conversation best saved for Twitter.

      Best,