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.

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:

tns create IonicTheme --ng
cd IonicTheme
tns platform add ios
tns platform add android

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 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:

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
})
export class AppComponent {

    public colorList: Array<string>;

    constructor() {
        this.colorList = ["light", "stable", "balanced", "positive", "calm", "assertive"];
    }

}

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:

<ActionBar title="Io{n}ic Theme" class="action-bar-positive"></ActionBar>
<StackLayout>
    <StackLayout class="form">
        <StackLayout *ngFor="let item of colorList">
            <GridLayout columns="*, 70" rows="auto" class="form-item">
                <Label text="{{item}}" col="0" class="input-label"></Label>
                <Switch checked="true" class="switch-{{item}}" col="1"></Switch>
            </GridLayout>
            <StackLayout class="hr"></StackLayout>
        </StackLayout>
    </StackLayout>
</StackLayout>

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 Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.