NativeScript Angular


The content in this document describes how to create a NativeScript Application in Android Studio.

Note: The recommended way of creating truly cross-platform NativeScript projects is through its Command-Line Interface.


Setup Project Directory Structure

Note: The tns-android folder structure follows the ADT's plugin for Eclipse format, which differs from the Android Studio's one, hence some manual copy-paste steps are required.

  • Create a new Blank Activity project in Android Studio.
  • Add the assets folder within the project (in the Project window right-click App, New->Folder->Assets Folder).
  • Add a jniLibs folder within the project (in the Project window right-click main, New->Directory->jniLibs).
  • Locate the already installed tns-android package on the file system and:
    • Copy the content of the ./framework/assets folder and paste it in the project's assets folder.
    • Within the ./libs folder:
      • Copy all the JAR files and paste them to the project's libs folder.
      • Copy the armeabi-v7a and x86 folders and paste them in the project's jniLibs folder.
  • Within the project's assets folder create a new folder named app.
  • Create a new bootstrap.js file within the app folder.
  • Open theAndroidManifest.xml file and edit the name of the application like:
  • Open theAndroidManifest.xml file and edit the name of the activity like:

Setup Bootstrap.js

Now that the project is properly setup, we need to properly initialize the bootstrap.js file. It may be thought of as the Main Entry Point of a NativeScript application. The NativeScript Runtime will expose the app object within the global context and use it to initialize the application from JavaScript. Following is the minimum required code:

// declare the extended NativeScriptActivity functionality
let extendsObject = {
    onCreate: function(savedState){
        // call the base NativeScriptActivity.onCreate method
        // the "this" variable points to a NativeScriptActivity instance

        // create a button and set it as the main content
        var button = new android.widget.Button(this);
        button.setText("Hello World");


// pass the extends object to create a new NativeScriptActivity instance
const mainActivity = com.tns.NativeScriptActivity.extends(extendsObject);

let applicationInitObject = {
    getActivity: function(intent) {
        // this method is called whenever a new instance of NativeScriptActivity is about to be created
        return mainActivity;
    onCreate: function() {
        // This is the first method called. Called from the method.

// The NativeScriptRuntime exposes the app object within the global context

Build and run the project. You should see a button named "Hello World", occupying the application's content space.

See Also