Category Archives: Tips

NativeScript - Professional post series

I've been doing NativeScript for a while; and since I'm a contractor/freelancer; and no specific company pays my salary -- I've decided to start putting some of my cool learned tips into the paid category.   Most of these will only qualify if they took me multiple hours to figure out.  Unfortunately nobody pays me for fixing things when they break...  So, if I can use my hard earned knowledge to save you a vast amount of time, what is it worth to you?
All this knowledge is time tested and can save you a vast amount of diagnostic time on why something doesn't work.   So if you think saving you time is worth it; please feel free to sign up and support me; and I will provide the information you need when you need it...
The different series are going to be available on my Patreon site:
The first series is; NativeScript Platform Differences

You might get an app running perfectly on one platform, and then wonder why it isn't working on the other.   I have started out with a cool post on several issues you might have between iOS and Android using HTTP/HTTPS.

The second series is: Troubleshooting your NativeScript
I have started this series out on dealing with Upgrading from NativeScript  to 2.4 and issues you might face.
The first post in this series deals with a specific iOS upgrading issue.
The second post in this series deal with a specific Android upgrading issue (Error starts with: Multiple dex files), when using several plugins...
The third series is: Ready to Distribute my app...  What now?
The first post in this series deals with a specific iOS Build issues...
The second post in this series deals with a specific iOS Build configuration information.
Some of these posts will be showing up in the next couple day as I have time to finish them off...
And yes; I will continue to post free useful stuff...   😉

NativeScript: iOS and xCode 8 the wonderful world of breaking changes

native8xcodeFor those who have upgraded to the all new xCode 8, you may have noticed some of the plugins breaking...     The biggest breaking change in NativeScript and xCode 8 is now things deep down in the ObjC runtime that used to be a function call are now a property.

So, for example let say you needed to access UIScreen.mainScreen.



In xCode 7 this was

var mainScreen = UIScreen.mainScreen();

in xCode 8 this is now:
var mainScreen = UIScreen.mainScreen;

Notice, it is no longer a FUNCTION call.  It is a PROPERTY.   Now how do you make this compatible so your code can run with both xCode 7 and xCode 8.

If you are developing an app; I recommend you use the helper function that Telerik added to NativeScript which they use throughout the core modules.

var utils = require('utils/utils');
var mainScreen = utils.ios.getter(UIScreen, UIScreen.mainScreen);

If you have your own plugin, then I'm going to recommend you embed my code into your own plugin...  The code is basically the same as Teleriks, but you eliminate the require call.
function iosProperty(theClass, theProperty) {
    if (typeof theProperty === "function") {
        // xCode 7 and below
    } else {
        // xCode 8+
        return theProperty;

Then you use it the exact same way;
var mainScreen = iosProperty(UIScreen, UIScreen.mainScreen);

Happy NativeScripting, and hopefully you can easily get all your plugins updated shortly to support both xCode 7 & 8!

NativeScript: Version 2.3.0 Released

ns-versionFor those hiding out in the forest; guess what was released by our cool park rangers at Telerik today!     Yes, you got it - v2.3.0 of NativeScript is now available!   Upgrade Instructions below.

As usual; if you run into any issues I will be putting any common issues at the bottom of this post as I and others run into them....

New or Fixed Features:

  • iOS XCode 8 support for iOS 10 support - * (I've heard this might not be fixed yet)
  • Navigation memory leak squashed
  • Android Text Hint Color supported
  • Buttons now support text-decoration and text-transformation properly
  • iOS d.ts generator works properly
  • Android Extend working properly again
  • Android now properly re-throwing exceptions (better error messages)
  • Android a couple crashing corner cases fixed
  • Observables fixed (was broken in some nested situations in 2.2.0)

A Lot of other smaller bug fixes and enhancements went into place; unfortunately the really big feature for 2.2.0 & 2.3.0 has slipped again -- threads.   It was a lot bigger than they expected; I've seen progress on both Android and iOS on this front; based on the activity it should be showing up in the masters channel soon, meaning we will be able to test and play with it soon.


First of all to upgrade is done is a couple steps:
> npm install -g nativescript
> npm install tns-core-modules@latest --save

For Android:
> tns platform remove android
> tns platform add android

For iOS
> tns platform remove ios
> tns platform add ios

Then you can type tns info and verify that everything says v2.3.x

Common Issues

Images and a parent that has Color set, causes the image to not show only the color that was set on iOS.   To fix you can do this a couple ways.  Remove the color on the parent.  Upgrade or disable the broken source (Line 133


in "node_modules/tns-core-modules/ui/image/image.ios.js, comment it out.

NativeScript: Debugging the Android Build Process

I've seen this error myself a couple times and it appears that several others have ran into it..   You type something like tns run android or tns build android and it gives you an error about some process failing to build -1 error and to try a --stacktrace to see more info...  Not entirely helpful.   How do you do a --stacktrace?

So let me tell you how to actually do a --stacktrace; the magic is simple, but not obvious.

You need to do the following:

cd platforms/android
./gradlew buildapk --stacktrace

Pretty simple once you know it...   This is what TNS uses to actually do the building part of the process; so when it fails; you need to manually run the process with the --stacktrace parameter.  This will NORMALLY give you why it failed; however there are cases where it doesn't.   So in those cases you try this command next:

./gradlew buildapk --stacktrace --info

And if that fails; then you try the really realllllllly reallllllllllly verbose output command:

./gradlew buildapk --stacktrace --debug > somefile.txt

Then open up the text file in some editor that can handle 5 megs of text and search for the first occurrence of "failed" will typically give you why it failed....

One interesting issue that I ran into the other day helping a buddy of mine...   TNS seems to assume that anything not listed as a DevDependancy is a Dependancy; this can cause serious issues sometimes with things that actually should NOT be compiled into the app.   TNS builds a module using gyp; and gyp requires tar and tar-pack.  The authors of tar & tar-pack decided that the npm modules should have tests included in them (what????  Are you crazy?) and these tests have .tgz and .gz files in it.   Unfortunately these .tgz and .gz files will cause the android tools to fail in a lot of cases when it attempts to process them.

So there is two ways to solve this issue:

  1. Add tar & tar-pack to your dev-dependancies.
  2. Manually enter your node_modules folder; and find tar/tar-pack and then delete the test folders.

In my opinion adding those two modules to your dev-dependancies simplifies things and then you don't forget about them at some later point if you have to reinstall your modules...

NativeScript: Version 2.2.0 released

ns-2.2.0For those living in a dungeon hacking out code; guess what was released by those fine wizards at Telerik today!     Yes, you got it - v2.2.0 of NativeScript is now available!   Upgrade Instructions below.

As usual; if you run into any issues I will be putting any common issues at the bottom of this post as I and others run into them....

New or Fixed Features:

  • Android now properly supports some the of the Java classes that were broken in 2.1 (Major)
  • Nested Bindables
  • Letter Spacing is now all in EM Units (CSS: letter-spacing)
  • CSS supports new properties, more selectors and even pseudo selectors (Major)
  • Android Launch Screen Support
  • Observable's are now auto-nesting (this can cause a breaking changes -- see known issues below)

A Lot of other smaller bug fixes and enhancements went into place; unfortunately the really big feature for 2.2.0 has slipped -- threads.   It was bigger than a single point release could handle; I've seen progress on both Android and iOS on this front; so I have high hopes it will make it in 2.3.0...


First of all to upgrade is done is a couple steps:
> npm install -g nativescript
> npm install tns-core-modules@latest --save

For Android:
> tns platform remove android
> tns platform add android

For iOS
> tns platform remove ios
> tns platform add ios

Then you can type tns info and verify that everything says v2.2.x


Common Issues

Nested Observables might throw an error

(iOS) TypeError: Cannot set property 'disableNotifications' of undefined
(Android) TypeError: undefined is not an object

If you have objects like

var x = new Observable({
y: new ObservableArray([])

This will probably throw the above error; eliminate the nesting; and make the structure like this:

var x = new Observable({
y: []

Github issue:

x86_64 bit Emulator on iOS might crash on code that is fine.


Service exited due to signal: Segmentation fault: 11

Solution: Switch to a 32bit emulator like the iPhone 4s.

Github Issue:


Angular 2 cssClasses Incompatibility

ORIGINAL EXCEPTION: TypeError: _this.cssClasses(...).set is not a function

You need to upgrade your NativeScript-Angular version to the latest version; the older version which worked with v2.1.0 of NativeScript is incompatible with v2.2.0. You should be able to do a

> npm install nativescipt-angular@latest --save


NativeScript: Patreon Posts & Plugins

For those who are unaware; I've started doing paid content; see my post on "Why Patreon" to see the reasons.   I'm going to attempt to keep this post updated with plugins and posts that are available to those who are my patreon supporters.





NativeScript, TypeScript and accessing native Android runtimes

When you are trying to access any of the native android platform using TypeScript, TS will complain about the root name --
TS2304: Cannot find name 'zzzz' at line yyyy

TypeScript is unaware that those variables exist and are actually global in scope; so to make TypeScript happy; in your code you will want to do something like this:

declare var android: any;
declare var com: any;
declare var java: any;

This will tell TypeScript that these are global, so it will no longer throw an error when you try to access any classes that start with android, java, or com. If you are accessing any other classes that Android publishes, you can also use the same technique: declare var zzzz: any;

Small update; Josh mentioned it via twitter about installing the tns-platform-declarations.  I'm not sure why I didn't post this here also -- so I'm updating the post a tad -- installing the tns-platform-declarations will get you intellisense for the android & ios platforms.  It is well worth the download if you are using native ios or android calls.

Downgrading NativeScript

You might have decided to be an early adopter of the awesome new version of NativeScript release and then unfortunately do to some bug regretted that choice.   Well here is how to easily downgrade back to a version you prefer.

First of all, you normally do NOT need to downgrade the actual TNS / nativescript command, it is normally backwards compatible.  However if you do need to downgrade the command line utility you need to type:

npm remove -g nativescript

and then
npm install -g nativescript@version --- where version is the version you want.

Ok, now onto the two pieces that you should do at the same time.  So lets say you want to downgrade to the latest v1.6; you change to your apps main directory and would type:
npm install tns-core-modules@1.6.2

then type for android:
tns platform remove android
tns platform add android@1.6.3

and finally if for iOS:
tns platform remove ios
tns platform add ios@1.6.0

By doing these items, you will fully downgrade your app to a prior version of NativeScript.

Please note to get the version numbers of all the releases of a particular item; you can do:

npm info tns-android versions
npm info tns-ios versions
npm info tns-core-modules versions

You typically want the latest of a point release version, so you find the latest "z" version in the x.y.z branch you are looking to install. Please note the versions 2.0.0-YYYY-MM-DD-VVV like 2.0.0-2016-05-03-553 is a alpha/beta/test releases; all these dated versions you can safely ignore them.

NativeScript 2.0

It has been a long road since I first started with the just freshly released v0.90 slightly over a year ago.   I saw a product that was brand new, raw, full of life and it offered a huge amount of potential.   I decided that even though it wasn't nearly as popular as other recently released next generation product, ReactNative; that the underlying design of NativeScript was a much better foundation.  So, I took a chance and decided to use NativeScript for all my projects.  I am very grateful for Telerik open sourcing the entire stack, it has not only allowed me to see what geniuses the entire Telerik team is, but it has eliminated any concern of using this stack for well into future.

Now with the 2.0 release ,the future for NativeScript is even brighter.  So many new features, so many existing features honed to be even better!   This is a awesome release!

Some stats; In just the common core modules, we have had over 2,500 different commits since v0.90 by 40 different authors, of which over 1/3 of the authors are totally independent developers like me.   In addition, when I started we had maybe a handful of plugins, according the the we are up to over 150 different addons of which were made by over 45 different authors.     Not bad for a open source project no one had even heard of at the beginning of March of 2015...

The newest and biggest feature being release with version 2.0 is the Angular 2 support.  Several of my fellow compatriots, Nathan Walker & T.J. VanToll and Burke Holland have created some amazing things with Angular 2.0 and NativeScript.   If you are an Angular 2 fan, check them out.

Some of the other cool brand new features in v2.0 are;

  • CSS Z-Index & RGB w/ Alpha support, Awesome!
  • Android 6 Permission support
  • Normal component properties (like orientation) can now be set via CSS
  • CSS 3 Animations, Sweet!
  • Android Widget support
  • And several dozen additional bugs and feature were implemented.

Now to install this awesome new release in four simple steps:

  1. Install the new version of the NativeScript command line
    • npm install -g nativescript
  2. Remove the existing platform
    • tns platform remove android
    • tns platform remove ios
  3. Add the platform(s) you need
    • tns plaform add android
    • tns platform add ios
  4. Install the common core modules
    • npm install tns-core-modules@latest --save



NativeScript: Enabling beta android v8 features

nv8One of the interesting things about the v8 engine is there is a lot of development going on behind the scenes that you can actually enable right now.  This is supported in NodeJS, Chrome, and yes even NativeScript.

Currently v8 for NativeScript 1.7 Android is running on v4.7.80 --   So because this is fairly old; a lot of the ES6 code has not been exposed to the engine.   As NativeScript adopts the newer v8 engines, most of the ES6 functionality should start becoming available by default.    However if you are inpatient, you can enable this in your own NativeScript application.  Please note; some of the functionality might work perfectly; but some of it might be very buggy; that is why it is behind feature flags.

To enable functionality; you need to open the "package.json" folder in your "app" folder; it typically will look like this:

  "name": "tns-template-hello-world",
  "main": "app.js",
  "version": "1.7.0",
  "author": {
    "name": "Telerik",
    "email": ""
  "description": "Nativescript hello-world project template",
  "license": "Apache-2.0",
  "keywords": [
  "repository": {
    "type": "git",
    "url": "git://"
  "bugs": {
    "url": ""
  "homepage": "",
  "android": {
    "v8Flags": "--expose_gc"
  "readme": "ERROR: No README data found!",
  "_id": "tns-template-hello-world@1.7.0",
  "_from": "tns-template-hello-world@1.7.0"

Yes, this is the STOCK 1.7.0 hello world template definition.     Do you see about 5 lines up the package.json from the bottom?

"android": {
  "v8Flags": "--expose_gc"

Well, that is where you would add your flags; !!!WARNING!!! DO NOT REMOVE the --expose_gc if you remove it, your app will crash when NS attempts to manually do garbage collection.  So, trust me when I say, do not remove it!

So some of the flags you can add and use are:

  • --use_strict = Will force everything to be in strict mode
  • --harmony_proxies = Enable ES6 Proxy support
  • --harmony_collections = Enable ES6 Maps/Sets
  • --harmony_typeof = Enable ES6 Typeof
  • --harmony_scoping = Enable ES6 Scoping rules
  • --harmony_generators = Enabled ES6 Generators
  • --harmony_itteration = Enable ES6 for-of
  • --harmony_numeric_literals = Enables the new ES6 number constants
  • --harmony_strings = Enable new ES6 String features
  • --harmony_arrays = Enable new ES6 Array features
  • --harmony_maths = Enable new ES6 Math features

These are all Harmony / ES6 related; some of the ES6 code might already be exposed; some of the ES6 code doesn't work real well and might be incomplete.  Please note that some of these ES6 features may already be fully live in the engine.   As NS gets closer to 5.1 of the v8 the more feature will be completed and exposed by default without having to use these flags.   There are MANY other flags you can use to tune the v8 engine and disable functionality; however if you don't know how what they do and the ramifications of using them, I would not set them in any customer facing application.

So if you wanted to enable the new Array & new Typeof abilities your android section would be

"android": {
  "v8Flags": "--expose_gc --harmony_array --harmony_typeof"

One other word of caution; these are ONLY for Android; this does not effect the iOS or Windows runtimes.  So if you enable a feature in Android; that same code may or may not run on iOS or Windows.