NativeScript

Overview

NativeScript is an open-source framework designed for building native iOS and Android applications using familiar web development languages and frameworks. Unlike hybrid frameworks that often render web content within a WebView, NativeScript directly translates JavaScript, TypeScript, Angular, Vue.js, or Svelte code into native UI components and API calls, providing a native performance profile and user experience on both platforms. This approach allows developers to write code once and deploy it to multiple mobile operating systems while retaining direct access to platform-specific features and performance characteristics.

The framework targets developers who are proficient in web technologies but need to deliver applications with native performance and look and feel. NativeScript achieves this by exposing the entire native API surface of iOS and Android to JavaScript. This means developers can access any native API, library, or third-party SDK directly from their JavaScript or TypeScript code without needing plugins or bridges, as detailed in the NativeScript API reference. This direct access differentiates it from frameworks that might require custom wrappers for specific native functionalities.

NativeScript applications are compiled into native binaries, leveraging the device's native rendering engine. For example, when an application specifies a Button component, NativeScript renders a UIButton on iOS and an android.widget.Button on Android. This ensures that the application's UI adheres to the design guidelines and performance expectations of each platform. The framework also includes a Command Line Interface (CLI) tool for project creation, building, and deployment, streamlining the development workflow as described in the NativeScript CLI documentation.

The framework is particularly suitable for projects where native performance and direct hardware access are critical, but where a single codebase across platforms is also desired. It allows teams familiar with Angular, Vue.js, or Svelte to reuse their existing skill sets for mobile development. While frameworks like React Native and Flutter also offer cross-platform native development, NativeScript's emphasis on direct native API access and integration with popular web frameworks positions it as an option for specific development preferences and project requirements.

Key features

• Direct Native API Access: Provides immediate access to all iOS and Android native APIs directly from JavaScript or TypeScript code, eliminating the need for custom plugins or wrappers for common functionalities.
• Native UI Components: Renders truly native UI components on both iOS and Android, ensuring platform-specific look, feel, and performance without using WebViews.
• Web Framework Integration: Supports development with popular web frameworks including Angular, Vue.js, and Svelte, allowing developers to leverage existing knowledge and component ecosystems.
• JavaScript/TypeScript Development: Applications can be written entirely in JavaScript or TypeScript, offering a familiar environment for web developers.
• Type-Safe Native Development: With TypeScript, developers benefit from type checking and autocompletion for native APIs, improving code quality and development speed.
• Command Line Interface (CLI): A robust CLI tool simplifies project setup, building, running, and managing NativeScript applications across different platforms.
• Hot Reloading & LiveSync: Features like hot module replacement and LiveSync enable developers to see changes reflected on device instantly during development, accelerating the iteration cycle.
• Extensible Plugin Ecosystem: While direct API access reduces the need for plugins, NativeScript supports a plugin ecosystem for community-contributed modules and platform-specific integrations.

Pricing

NativeScript is an open-source framework and is free to use. All core components and tools are available under an MIT license.

Pricing as of 2026-06-21. For current licensing details, refer to the NativeScript website.

Common integrations

• Angular: NativeScript offers specific integration for Angular, allowing developers to build mobile applications using Angular's component-based architecture and services. Details are available in the NativeScript Angular documentation.
• Vue.js: Developers can use Vue.js to construct NativeScript applications, leveraging Vue's reactivity system and component model. The NativeScript Vue documentation provides guidance.
• Svelte: NativeScript supports Svelte for building mobile user interfaces, benefiting from Svelte's compilation approach for efficient updates. Learn more in the NativeScript Svelte documentation.
• Firebase: For backend services like authentication, databases, and cloud functions, NativeScript applications can integrate with Firebase through specific plugins. Refer to NativeScript Firebase plugins documentation.
• Push Notifications: Integration with native push notification services (APNs for iOS, FCM for Android) is supported through plugins or direct API access.
• Device APIs: Direct access to device APIs for features such as camera, GPS, accelerometer, and contacts is a core feature of NativeScript, allowing tight integration with hardware capabilities.

Alternatives

• React Native: A JavaScript framework for building native mobile apps from a single codebase, using the React library for UI development.
• Flutter: Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase using Dart.
• Ionic: An open-source framework for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, JavaScript).
• AWS Amplify: A set of tools and services that can be used with various frontend frameworks, including NativeScript, to build scalable mobile and web applications with cloud backends.
• Kotlin Multiplatform Mobile (KMM): A technology for sharing business logic between iOS and Android apps, allowing native UI development for each platform using Kotlin.

Getting started

To begin developing with NativeScript, you typically install the NativeScript CLI globally and then create a new project. The following steps demonstrate how to set up a basic NativeScript application using TypeScript, as outlined in the NativeScript getting started guide.

First, ensure you have Node.js installed on your system. Then, install the NativeScript CLI:

npm install -g nativescript

Next, create a new NativeScript project. You can choose from various templates, including a plain TypeScript template, an Angular template, or a Vue.js template. This example uses a plain TypeScript template:

ns create MyNativeApp --template tns-template-blank-typescript
cd MyNativeApp

After creating the project, you can add platforms (iOS and Android) and run the application. Before running on iOS, ensure you have Xcode installed. For Android, ensure you have Android Studio and the Android SDK configured.

ns add android
ns add ios

# To run on an Android emulator or connected device
ns run android

# To run on an iOS simulator or connected device
ns run ios

The core application logic resides in app/app.ts and UI definitions in app/main-page.xml or directly in TypeScript/JavaScript files if using a framework like Angular or Vue.js. Here's an example of a simple main-page.ts that handles a button tap:

import { EventData } from '@nativescript/core';
import { Page } from '@nativescript/core/ui/page';
import { Label } from '@nativescript/core/ui/label';

let counter = 0;

export function onNavigatingTo(args: EventData) {
  const page = args.object as Page;
  const label = page.getViewById<Label>('messageLabel');
  if (label) {
    label.text = `Hello, NativeScript! Taps: ${counter}`;
  }
}

export function onTap(args: EventData) {
  const button = args.object as Label; // Assuming the button text is also a label or similar
  counter++;
  const page = button.page;
  const label = page.getViewById<Label>('messageLabel');
  if (label) {
    label.text = `You tapped ${counter} times!`
  }
}

And the corresponding main-page.xml for the UI:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
  <StackLayout class="p-20">
    <Label text="Hello, NativeScript!" class="h1 text-center" id="messageLabel"/>
    <Button text="Tap me!" tap="onTap" class="btn btn-primary"/>
  </StackLayout>
</Page>

This setup provides a foundation for building native applications with NativeScript, allowing direct interaction with native UI elements and APIs while leveraging web development expertise.