or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

application.mddata-binding.mdfile-system.mdhttp-client.mdimage-handling.mdindex.mdplatform-utils.mdui-components.md
tile.json

tessl/npm-tns-core-modules

NativeScript Core Modules compatibility package for building native iOS and Android apps using JavaScript and CSS

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/tns-core-modules@6.5.x

To install, run

npx @tessl/cli install tessl/npm-tns-core-modules@6.5.0

index.mddocs/

NativeScript Core Modules

NativeScript Core Modules (tns-core-modules) is a compatibility package that provides the complete NativeScript framework API for building native iOS and Android mobile applications using JavaScript, TypeScript, and CSS. It delivers true native performance without WebViews by bridging JavaScript to native APIs, enabling access to platform-specific functionality through unified cross-platform interfaces.

Package Information

  • Package Name: tns-core-modules
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install tns-core-modules

Core Imports

// Application lifecycle and utilities
import { Application, ApplicationSettings } from "tns-core-modules";

// UI components and layouts
import { Page, StackLayout, Button, Label } from "tns-core-modules";

// Data handling
import { Observable, ObservableArray } from "tns-core-modules";

// File system and HTTP
import { File, Folder, Http } from "tns-core-modules";

// Performance monitoring and debugging
import { Profiling, Trace } from "tns-core-modules";

// Utility functions and platform services
import { Utils, Connectivity, Color } from "tns-core-modules";

// XML parsing
import { XmlParser, ParserEventType } from "tns-core-modules";

For CommonJS:

const { Application, Page, Button } = require("tns-core-modules");

Basic Usage

import { Application, Page, StackLayout, Button, Label } from "tns-core-modules";

// Application setup
Application.run({ moduleName: "main-page" });

// Create a simple page with UI
export function createPage() {
  const page = new Page();
  const stack = new StackLayout();
  
  const label = new Label();
  label.text = "Hello NativeScript!";
  
  const button = new Button();
  button.text = "Click Me";
  button.on("tap", () => {
    label.text = "Button tapped!";
  });
  
  stack.addChild(label);
  stack.addChild(button);
  page.content = stack;
  
  return page;
}

Architecture

NativeScript Core Modules provides several key architectural components:

  • Application Layer: Lifecycle management, navigation, and app-wide utilities
  • UI Framework: 30+ native UI components with cross-platform abstractions
  • Data Binding: Observable pattern with two-way data binding capabilities
  • Platform Services: File system, HTTP client, device APIs, and system integrations
  • Styling System: CSS-like styling with platform-specific adaptations
  • Native Bridge: Direct access to iOS and Android native APIs

Capabilities

Application Management

Core application lifecycle, navigation, and configuration management for NativeScript apps.

namespace Application {
  // Application lifecycle events
  const launchEvent: string;
  const suspendEvent: string;
  const resumeEvent: string;
  const exitEvent: string;
  
  // Core application functions
  function run(entry?: any): void;
  function getRootView(): View;
  function orientation(): string;
  function hasLaunched(): boolean;
  
  // Platform-specific instances
  const android: AndroidApplication;
  const ios: iOSApplication;
}

namespace ApplicationSettings {
  function setString(key: string, value: string): void;
  function getString(key: string, defaultValue?: string): string;
  function setBoolean(key: string, value: boolean): void;
  function getBoolean(key: string, defaultValue?: boolean): boolean;
  function clear(): void;
}

Application Management

UI Components and Layouts

Comprehensive set of native UI components including buttons, labels, inputs, and advanced controls like lists and navigation.

// Core UI base classes
class ViewBase {
  id: string;
  className: string;
  style: Style;
  parent: ViewBase;
  isLoaded: boolean;
  
  on(eventName: string, callback: Function): void;
  off(eventName: string, callback?: Function): void;
}

class View extends ViewBase {
  width: number | string;
  height: number | string;
  visibility: string;
  opacity: number;
}

// Layout containers
class StackLayout extends LayoutBase {
  orientation: string;
}

class GridLayout extends LayoutBase {
  columns: string;
  rows: string;
}

// UI controls
class Button extends View {
  text: string;
  tap: string; // event name
}

class Label extends View {
  text: string;
  textWrap: boolean;
}

UI Components

Data Binding and Observables

Reactive data handling with Observable pattern supporting two-way data binding and change notifications.

class Observable {
  constructor(obj?: any);
  
  get(name: string): any;
  set(name: string, value: any): void;
  on(eventName: string, callback: Function): void;
  off(eventName: string, callback?: Function): void;
  notify(data: PropertyChangeData): void;
}

class ObservableArray<T> extends Array<T> {
  constructor(...items: T[]);
  
  push(...items: T[]): number;
  pop(): T;
  splice(start: number, deleteCount?: number, ...items: T[]): T[];
  
  on(eventName: string, callback: Function): void;
}

interface PropertyChangeData {
  object: Observable;
  propertyName: string;
  value: any;
  oldValue: any;
}

Data Binding

File System Operations

Cross-platform file system access for reading, writing, and managing files and folders on mobile devices.

class File extends FileSystemEntity {
  static fromPath(path: string): File;
  
  readText(encoding?: string): Promise<string>;
  writeText(content: string, encoding?: string): Promise<void>;
  readTextSync(encoding?: string): string;
  writeTextSync(content: string, encoding?: string): void;
}

class Folder extends FileSystemEntity {
  static fromPath(path: string): Folder;
  
  getFile(name: string): File;
  getFolder(name: string): Folder;
  getEntities(): Promise<FileSystemEntity[]>;
  eachEntity(onEntity: Function): void;
}

namespace knownFolders {
  const documents: Folder;
  const temp: Folder;
  const currentApp: Folder;
}

File System

HTTP Client

Full-featured HTTP client for REST API calls, file downloads, and network communication.

namespace Http {
  function request(options: HttpRequestOptions): Promise<HttpResponse>;
  function getJSON<T>(url: string): Promise<T>;
  function getString(url: string): Promise<string>;
  function getFile(url: string, destinationFilePath?: string): Promise<File>;
  function getImage(url: string): Promise<ImageSource>;
}

interface HttpRequestOptions {
  url: string;
  method?: string;
  headers?: any;
  content?: string | any;
  timeout?: number;
}

interface HttpResponse {
  statusCode: number;
  content: HttpContent;
  headers: any;
}

HTTP Client

Image Handling

Comprehensive image loading, manipulation, and caching capabilities for mobile applications.

class ImageSource {
  static fromFile(path: string): ImageSource;
  static fromData(data: any): ImageSource;
  static fromBase64(source: string): ImageSource;
  
  saveToFile(path: string, format: string, quality?: number): boolean;
  toBase64String(format: string, quality?: number): string;
}

class ImageAsset {
  constructor(asset: any);
  
  getImage(options?: ImageAssetOptions): Promise<ImageSource>;
}

interface ImageAssetOptions {
  maxWidth?: number;
  maxHeight?: number;
  aspectRatio?: string;
  autoScaleFactor?: boolean;
}

Image Handling

Platform Utilities

Device information, platform detection, and native utility functions for iOS and Android integration.

// Platform detection
function isAndroid(): boolean;
function isIOS(): boolean;

// Device information
interface Device {
  model: string;
  deviceType: string;
  os: string;
  osVersion: string;
  sdkVersion: string;
  language: string;
  region: string;
}

// Screen information  
interface Screen {
  mainScreen: ScreenMetrics;
  widthDIPs: number;
  heightDIPs: number;
  scale: number;
}

// Utility functions
namespace Utils {
  function executeOnMainThread(func: Function): void;
  function isMainThread(): boolean;
  function openUrl(url: string): boolean;
  function openFile(filePath: string): boolean;
}

Platform Utilities

Performance Profiling

Performance monitoring and profiling tools for measuring method execution times, memory usage, and application performance metrics.

namespace Profiling {
  // Core profiling controls
  function enable(type?: InstrumentationMode): void;
  function disable(): void;
  function isRunning(name: string): boolean;
  
  // Timer functions
  function time(): number;
  function uptime(): number;
  function start(name: string): void;
  function stop(name: string): TimerInfo;
  
  // Profile management
  function dumpProfiles(): void;
  function resetProfiles(): void;
  function profile(name?: string): MethodDecorator;
  function profile<F extends Function>(fn: F): F;
  function profile<F extends Function>(name: string, fn: F): F;
  
  // CPU profiling (Android)
  function startCPUProfile(name: string): void;
  function stopCPUProfile(name: string): void;
}

type InstrumentationMode = "counters" | "timeline" | "lifecycle";

interface TimerInfo {
  totalTime: number;
  count: number;
}

Debug Tracing

Debug tracing and logging system with category-based filtering and multiple output writers for comprehensive application debugging.

namespace Trace {
  // Core trace controls
  function enable(): void;
  function disable(): void;
  function isEnabled(): boolean;
  
  // Writer management
  function addWriter(writer: TraceWriter): void;
  function removeWriter(writer: TraceWriter): void;
  function clearWriters(): void;
  
  // Category management
  function setCategories(categories: string): void;
  function addCategories(categories: string): void;
  
  // Logging functions
  function write(message: any, category: string, type?: number): void;
  function error(error: string | Error): void;
  
  // Event handling
  function setErrorHandler(handler: ErrorHandler): void;
  
  // Predefined categories
  const categories: {
    VisualTreeEvents: string;
    Layout: string;
    Style: string;
    ViewHierarchy: string;
    NativeLifecycle: string;
    Debug: string;
    Navigation: string;
    Test: string;
    Binding: string;
    Error: string;
    Animation: string;
    Transition: string;
    All: string;
  };
  
  // Message types
  const messageType: {
    log: number;
    info: number;
    warn: number;
    error: number;
  };
}

interface TraceWriter {
  write(message: any, category: string, type?: number): void;
}

interface ErrorHandler {
  handlerError(error: Error): void;
}

Network Connectivity

Network connection monitoring and detection capabilities for managing network-dependent application behavior.

namespace Connectivity {
  // Connection detection
  function getConnectionType(): number;
  function startMonitoring(callback: (newConnectionType: number) => void): void;
  function stopMonitoring(): void;
  
  // Connection types
  const connectionType: {
    none: 0;
    wifi: 1;
    mobile: 2;
    ethernet: 3;
    bluetooth: 4;
    vpn: 5;
  };
}

Color Management

Color creation and manipulation utilities supporting multiple color formats and platform-specific representations.

class Color {
  constructor(knownColor: string);
  constructor(hex: string);
  constructor(argb: number);
  constructor(alpha: number, red: number, green: number, blue: number);
  
  // Color components (read-only)
  readonly a: number; // Alpha (0-255)
  readonly r: number; // Red (0-255)
  readonly g: number; // Green (0-255)
  readonly b: number; // Blue (0-255)
  
  // Color representations (read-only)
  readonly hex: string;
  readonly argb: number;
  readonly name: string;
  readonly android: number;
  readonly ios: any; // UIColor
  
  // Utility methods
  equals(value: Color): boolean;
  static equals(value1: Color, value2: Color): boolean;
  static isValid(value: any): boolean;
}

XML Parsing

SAX-based XML parsing with event-driven processing and namespace support for handling XML data and documents.

class XmlParser {
  constructor(
    onEvent: (event: ParserEvent) => void,
    onError?: (error: Error, position: Position) => void,
    processNamespaces?: boolean,
    angularSyntax?: boolean
  );
  
  parse(xmlString: string): void;
}

class ParserEventType {
  static StartElement: string;
  static EndElement: string;
  static Text: string;
  static CDATA: string;
  static Comment: string;
}

interface ParserEvent {
  eventType: string;
  position: Position;
  prefix?: string;
  namespace?: string;
  elementName?: string;
  attributes?: any;
  data?: string;
  toString(): string;
}

interface Position {
  line: number;
  column: number;
}