Getting started with NativeScript What is NativeScript?

Why should I care?

A NativeScript app allows you to use native android and iOS APIs within your JavasScript code. This functionality means that you do not need to rebuild the same layout and solve the same problems for each platform. You can have your cake and eat it too! 🍰

How do I use native Android APIs?

The NativeScript marketplace has a large catalogue of ready-made native API implementations. The advantage over coding the native code yourself is that you could get the same functionality for android and iOS in one fell swoop!

🍪 Try to look out for verified NativeScript plugins! They need to pass several quality gates .

If you do not manage to find the library you need, you can also use your favourite Android APIs by exporting fat JAR files with everything you need, and placing it in this directory for android respectively:

/App_Resources/Android/src/main/libs

Then you could use your library with:

let myInstance = new com.x.lib.myClass();
myInstance.getHelloWorld();

You can read about this process more in-depth here .

The final approach you can take is to use the native APIs directly in TypeScript, as shown here .

What’s the catch?

There’s a few things to be aware of before you get started:

The installation process is a bit long. Besides installing NativeScript sidekick , you also need to install X-Code , JDK , and the Android SDK .

Keep in mind you need specific versions of all of the software and possibly remove older/newer versions of your current software. If you are using an external terminal (like iTerm) you’ll also need to play around with global system variables. The full setup instructions can be found here .

🍪 The NativeScript package gives us a handy tns doctor command, which will let us know what’s missing.

🍪 There’s a free playground which you can use to learn the platform.

HTML? XML? CSS?

The template files are suffixed by “.html”, however you can’t use html elements in NativeScript. The final code looks closer to Android’s XML layouts:

<StackLayout  class="login-screen">
   <Label  class="h1 logo" text="logo"></Label>  
   <TextField  hint="Name"></TextField>
</StackLayout>

CSS is also a bit of a hit and miss. If you’re looking for something specific, have a look at the official list of supported css properties .

What about Cordova/React native?

The NativeScript community is working on allowing Cordova plugins to be used in NativeScript (currently in alpha and android only). React native on the other hand seems to be the closest thing to NativeScript, and the team have written an analysis of React Native’s advantages and shortcomings here .

How do I get started?

A great resource is the get started guide on the home page . It guides you through the setup process and does builds on the cloud. The NativeScript playground app is also highly recommended since you can use your phone to preview your changes in real-time!

We hope you enjoyed this as much as we enjoyed researching it. If you have questions, ask below in the comments.