CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tns-platform-declarations

Platform-specific TypeScript declarations for NativeScript for accessing native objects

84

1.23x
Overview
Eval results
Files

nativescript-widgets.mddocs/

NativeScript Widgets

Platform-specific NativeScript widget declarations for Android development, including custom transitions, async utilities for HTTP requests, file operations, and image processing. These widgets extend standard Android functionality with NativeScript-specific features.

Capabilities

Custom Transitions

NativeScript custom transition support for enhanced Android UI animations.

declare module org.nativescript.widgets {
  /**
   * Custom transition class extending AndroidX Visibility transition
   */
  export class CustomTransition extends androidx.transition.Visibility {
    /**
     * Create a custom transition with animator set and name
     * @param animatorSet - Android AnimatorSet for the transition
     * @param transitionName - Name identifier for the transition  
     */
    constructor(animatorSet: android.animation.AnimatorSet, transitionName: string);

    /**
     * Set whether to reset on transition end
     * @param resetOnTransitionEnd - Whether to reset when transition completes
     */
    public setResetOnTransitionEnd(resetOnTransitionEnd: boolean): void;

    /**
     * Get the transition name identifier
     * @returns The transition name string
     */
    public getTransitionName(): string;
  }
}

Usage Examples:

// Create custom transition
const animatorSet = new android.animation.AnimatorSet();
// Configure animators...
const transition = new org.nativescript.widgets.CustomTransition(animatorSet, "fadeIn");

// Configure transition behavior
transition.setResetOnTransitionEnd(true);

// Get transition information
const name = transition.getTransitionName();
console.log(`Transition name: ${name}`);

Async Operations

Comprehensive async operation support with completion callbacks for various operations.

declare module org.nativescript.widgets.Async {
  /**
   * Callback interface for async operations
   */
  export interface ICompleteCallback {
    /**
     * Called when operation completes successfully
     * @param result - The operation result
     * @param context - Optional context object
     */
    onComplete(result: Object, context: Object): void;

    /**
     * Called when operation fails with error
     * @param error - Error message string
     * @param context - Optional context object  
     */
    onError(error: string, context: Object): void;
  }

  /**
   * Concrete callback implementation for async operations
   */
  export class CompleteCallback {
    /**
     * Create callback with implementation
     * @param implementation - ICompleteCallback implementation
     */
    constructor(implementation: ICompleteCallback);

    /**
     * Handle successful completion
     * @param result - Operation result
     * @param context - Optional context
     */
    onComplete(result: Object, context: Object): void;

    /**
     * Handle error condition
     * @param error - Error message
     * @param context - Optional context
     */
    onError(error: string, context: Object): void;
  }
}

Usage Examples:

// Create async callback
const callback = new org.nativescript.widgets.Async.CompleteCallback({
  onComplete: (result, context) => {
    console.log("Operation successful:", result);
  },
  onError: (error, context) => {
    console.error("Operation failed:", error);
  }
});

// Use with async operations (examples below)

Image Operations

Async image download and processing utilities.

declare module org.nativescript.widgets.Async.Image {
  /**
   * Download image from URL asynchronously
   * @param url - Image URL to download
   * @param callback - Completion callback for success/error
   * @param context - Optional context object passed to callback
   */
  export function download(url: string, callback: CompleteCallback, context: any);
}

Usage Examples:

// Download image asynchronously
const imageCallback = new org.nativescript.widgets.Async.CompleteCallback({
  onComplete: (result, context) => {
    // result contains downloaded image data
    console.log("Image downloaded successfully");
    // Process image result...
  },
  onError: (error, context) => {
    console.error("Image download failed:", error);
  }
});

org.nativescript.widgets.Async.Image.download(
  "https://example.com/image.jpg",
  imageCallback,
  { requestId: "img001" }
);

File Operations

Async file read and write operations with encoding support.

declare module org.nativescript.widgets.Async.File {
  /**
   * Read text file asynchronously with encoding
   * @param path - File path to read
   * @param encoding - Text encoding (e.g., "UTF-8")
   * @param callback - Completion callback 
   * @param context - Optional context object
   */
  export function readText(path: string, encoding: string, callback: CompleteCallback, context: any);

  /**
   * Read binary file asynchronously
   * @param path - File path to read
   * @param callback - Completion callback
   * @param context - Optional context object
   */  
  export function read(path: string, callback: CompleteCallback, context: any);

  /**
   * Write text file asynchronously with encoding
   * @param path - File path to write
   * @param content - Text content to write
   * @param encoding - Text encoding (e.g., "UTF-8")
   * @param callback - Completion callback
   * @param context - Optional context object
   */
  export function writeText(path: string, content: string, encoding: string, callback: CompleteCallback, context: any);

  /**
   * Write binary file asynchronously  
   * @param path - File path to write
   * @param content - Binary content as native array
   * @param callback - Completion callback
   * @param context - Optional context object
   */
  export function write(path: string, content: native.Array<number>, callback: CompleteCallback, context: any);
}

Usage Examples:

// Read text file
const readCallback = new org.nativescript.widgets.Async.CompleteCallback({
  onComplete: (result, context) => {
    console.log("File content:", result);
  },
  onError: (error, context) => {
    console.error("File read error:", error);
  }
});

org.nativescript.widgets.Async.File.readText(
  "/path/to/file.txt",
  "UTF-8", 
  readCallback,
  null
);

// Write text file
const writeCallback = new org.nativescript.widgets.Async.CompleteCallback({
  onComplete: (result, context) => {
    console.log("File written successfully");
  },
  onError: (error, context) => {
    console.error("File write error:", error);
  }
});

org.nativescript.widgets.Async.File.writeText(
  "/path/to/output.txt",
  "Hello NativeScript!",
  "UTF-8",
  writeCallback,
  null
);

// Read binary file
org.nativescript.widgets.Async.File.read(
  "/path/to/image.png",
  readCallback,
  { fileType: "image" }
);

// Write binary file
const binaryData = new native.Array<number>();
// Populate binaryData...
org.nativescript.widgets.Async.File.write(
  "/path/to/output.bin",
  binaryData,
  writeCallback,
  null
);

HTTP Operations

Async HTTP request functionality with comprehensive configuration options.

declare module org.nativescript.widgets.Async.Http {
  /**
   * Key-value pair for HTTP headers and parameters
   */
  export class KeyValuePair {
    /** Header/parameter key */
    public key: string;
    /** Header/parameter value */
    public value: string;

    /**
     * Create key-value pair
     * @param key - The key string
     * @param value - The value string
     */
    constructor(key: string, value: string);
  }

  /**
   * HTTP request configuration options
   */
  export class RequestOptions {
    /** Request URL */
    public url: string;
    /** HTTP method (GET, POST, etc.) */
    public method: string;
    /** HTTP headers as key-value pairs */
    public headers: java.util.ArrayList<KeyValuePair>;
    /** Request body content */
    public content: java.nio.ByteBuffer;
    /** Request timeout in milliseconds */
    public timeout: number;
    /** Screen width for responsive requests */
    public screenWidth: number;
    /** Screen height for responsive requests */
    public screenHeight: number;
    /** Whether to follow HTTP redirects */
    public dontFollowRedirects: boolean;
  }

  /**
   * HTTP response result containing response data and metadata
   */
  export class RequestResult {
    /** HTTP status code (200, 404, etc.) */
    public statusCode: number;
    /** Response body content as string */
    public content: string;
    /** Response headers as key-value pairs */
    public headers: java.util.ArrayList<KeyValuePair>;
    /** Error message if request failed */
    public error: string;
    /** Request URL that was executed */
    public url: string;
    /** Whether the request completed successfully */
    public isSuccess: boolean;
    /** Total request time in milliseconds */
    public responseTime: number;
  }
}

Usage Examples:

// Create HTTP request options
const options = new org.nativescript.widgets.Async.Http.RequestOptions();
options.url = "https://api.example.com/data";
options.method = "GET";
options.timeout = 10000; // 10 seconds
options.dontFollowRedirects = false;

// Add headers
options.headers = new java.util.ArrayList<org.nativescript.widgets.Async.Http.KeyValuePair>();
options.headers.add(new org.nativescript.widgets.Async.Http.KeyValuePair("Accept", "application/json"));
options.headers.add(new org.nativescript.widgets.Async.Http.KeyValuePair("User-Agent", "NativeScript-App"));

// Add request body for POST
if (options.method === "POST") {
  const requestData = JSON.stringify({ key: "value" });
  const bytes = new java.lang.String(requestData).getBytes("UTF-8");
  options.content = java.nio.ByteBuffer.wrap(bytes);
}

// Set screen dimensions for responsive requests
options.screenWidth = 375;
options.screenHeight = 667;

// Use with HTTP request function
const httpCallback = new org.nativescript.widgets.Async.CompleteCallback({
  onComplete: (result: org.nativescript.widgets.Async.Http.RequestResult, context) => {
    console.log("HTTP request successful");
    console.log(`Status: ${result.statusCode}`);
    console.log(`Response time: ${result.responseTime}ms`);
    console.log(`Content: ${result.content}`);
    
    // Process response headers
    for (let i = 0; i < result.headers.size(); i++) {
      const header = result.headers.get(i);
      console.log(`Header: ${header.key} = ${header.value}`);
    }
    
    // Parse JSON response if applicable
    if (result.isSuccess && result.statusCode === 200) {
      try {
        const data = JSON.parse(result.content);
        // Process parsed data...
      } catch (parseError) {
        console.error("Failed to parse JSON response:", parseError);
      }
    }
  },
  onError: (error, context) => {
    console.error("HTTP request failed:", error);
    if (context) {
      console.log("Request context:", context);
    }
  }
});

// Note: Actual HTTP request function would be provided by NativeScript runtime
// This shows the complete data structures available for HTTP operations

Integration with NativeScript

These widgets are specifically designed for NativeScript Android applications and provide:

Enhanced Android Integration

  • Native Android transition support with AndroidX compatibility
  • Direct integration with Android animation framework
  • Platform-specific performance optimizations

Async Operation Patterns

  • Consistent callback-based async API across all operations
  • Error handling with detailed error messages
  • Context passing for operation tracking

File System Access

  • Async file operations to prevent UI blocking
  • Encoding support for text operations
  • Binary file support for media and data files

Network Operations

  • Comprehensive HTTP request configuration
  • Header and parameter management
  • Timeout and redirect control
  • Screen dimension awareness for responsive requests

Performance Considerations

  • Async Operations: All widget operations are asynchronous to maintain UI responsiveness
  • Memory Management: Use proper callback lifecycle management
  • Error Handling: Always implement both success and error callbacks
  • Context Usage: Use context parameters for operation tracking and cleanup

Error Handling Patterns

// Robust error handling pattern
const safeCallback = new org.nativescript.widgets.Async.CompleteCallback({
  onComplete: (result, context) => {
    try {
      // Process result safely
      console.log("Operation completed:", result);
    } catch (error) {
      console.error("Error processing result:", error);
    }
  },
  onError: (error, context) => {
    // Log error and handle gracefully
    console.error("Operation failed:", error);
    if (context) {
      console.log("Context information:", context);
    }
    // Implement fallback behavior
  }
});

Install with Tessl CLI

npx tessl i tessl/npm-tns-platform-declarations

docs

android-platform.md

index.md

ios-platform.md

native-interop.md

nativescript-widgets.md

tile.json