CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-windows

React Native for Windows framework that enables cross-platform mobile and desktop app development with JavaScript and TypeScript

Pending
Overview
Eval results
Files

windows-apis.mddocs/

Windows APIs

Windows-specific APIs providing native platform integration, theme support, accessibility features, and enhanced system interaction capabilities unique to the Windows environment.

Capabilities

Theme & Appearance Management

AppTheme

Windows theme detection and high contrast support with real-time change notifications and color management.

/**
 * Windows theme detection and high contrast support
 * Provides real-time theme changes and accessibility colors
 */
interface AppTheme {
  /** Current high contrast state */
  readonly isHighContrast: boolean;
  /** Current high contrast color values */
  readonly currentHighContrastColors: IHighContrastColors;

  /** Add listener for high contrast changes */
  addListener(
    eventName: 'highContrastChanged',
    listener: (event: IHighContrastChangedEvent) => void
  ): EmitterSubscription;

  /** Remove specific listener */
  removeListener(
    eventName: 'highContrastChanged',
    listener: (event: IHighContrastChangedEvent) => void
  ): void;
}

interface IHighContrastColors {
  /** Button face background color */
  ButtonFaceColor: string;
  /** Button text color */
  ButtonTextColor: string;
  /** Disabled/gray text color */
  GrayTextColor: string;
  /** Selection highlight background color */
  HighlightColor: string;
  /** Selection highlight text color */
  HighlightTextColor: string;
  /** Hyperlink color */
  HotlightColor: string;
  /** Window background color */
  WindowColor: string;
  /** Window text color */
  WindowTextColor: string;
}

interface IHighContrastChangedEvent {
  /** New high contrast state */
  isHighContrast: boolean;
  /** Updated high contrast colors */
  highContrastColors: IHighContrastColors;
}

interface EmitterSubscription {
  remove(): void;
}

declare const AppTheme: AppTheme;

Usage Examples:

import React, { useState, useEffect } from 'react';
import { AppTheme } from 'react-native-windows';

const ThemeAwareComponent: React.FC = () => {
  const [isHighContrast, setIsHighContrast] = useState(AppTheme.isHighContrast);
  const [colors, setColors] = useState(AppTheme.currentHighContrastColors);

  useEffect(() => {
    const subscription = AppTheme.addListener('highContrastChanged', (event) => {
      setIsHighContrast(event.isHighContrast);
      setColors(event.highContrastColors);
    });

    return () => subscription.remove();
  }, []);

  const buttonStyle = {
    backgroundColor: isHighContrast ? colors.ButtonFaceColor : '#0078d4',
    color: isHighContrast ? colors.ButtonTextColor : 'white',
  };

  return (
    <View style={{ backgroundColor: isHighContrast ? colors.WindowColor : 'white' }}>
      <Text style={{ color: isHighContrast ? colors.WindowTextColor : 'black' }}>
        Theme-aware content
      </Text>
      <Button style={buttonStyle}>Accessible Button</Button>
    </View>
  );
};

Appearance

Cross-platform appearance and color scheme detection with Windows integration.

/**
 * Cross-platform appearance detection with Windows integration
 * Detects system color scheme and theme preferences
 */
interface Appearance {
  /** Get current color scheme */
  getColorScheme(): 'light' | 'dark' | null;

  /** Add color scheme change listener */
  addChangeListener(
    listener: (preferences: { colorScheme: 'light' | 'dark' | null }) => void
  ): void;

  /** Remove color scheme change listener */
  removeChangeListener(
    listener: (preferences: { colorScheme: 'light' | 'dark' | null }) => void
  ): void;
}

declare const Appearance: Appearance;

/**
 * Hook for color scheme with automatic updates
 * Returns current color scheme and updates on changes
 */
function useColorScheme(): 'light' | 'dark' | null;

System Integration APIs

I18nManager

Internationalization and RTL (Right-to-Left) support for Windows globalization.

/**
 * Internationalization and RTL support
 * Handles Windows globalization and text direction
 */
interface I18nManager {
  /** Current RTL state */
  readonly isRTL: boolean;
  /** Force RTL layout */
  forceRTL(isRTL: boolean): void;
  /** Allow RTL layout */
  allowRTL(allowRTL: boolean): void;
  /** Swap left and right in RTL mode */
  swapLeftAndRightInRTL(flipStyles: boolean): void;
  /** Get locale constants */
  getConstants(): I18nConstants;
}

interface I18nConstants {
  isRTL: boolean;
  doLeftAndRightSwapInRTL: boolean;
  localeIdentifier?: string;
}

declare const I18nManager: I18nManager;

Settings

Windows-specific app settings management with registry and settings app integration.

/**
 * Windows app settings management
 * Integrates with Windows settings and registry
 */
interface Settings {
  /** Get setting value */
  get(key: string): any;
  /** Set setting value */
  set(settings: { [key: string]: any }): void;
  /** Watch for setting changes */
  watchKeys(keys: string[], callback: () => void): number;
  /** Clear setting watch */
  clearWatch(watchId: number): void;
}

declare const Settings: Settings;

PermissionsAndroid

Android permission system compatibility layer for Windows (limited support).

/**
 * Android permission compatibility (limited Windows support)
 * Provides consistent API across platforms
 */
interface PermissionsAndroid {
  /** Check permission status */
  check(permission: string): Promise<boolean>;
  /** Request permission */
  request(permission: string, rationale?: PermissionRationale): Promise<PermissionStatus>;
  /** Request multiple permissions */
  requestMultiple(permissions: string[]): Promise<{ [permission: string]: PermissionStatus }>;
  /** Permission constants */
  PERMISSIONS: { [key: string]: string };
  /** Results constants */
  RESULTS: {
    GRANTED: 'granted';
    DENIED: 'denied';
    NEVER_ASK_AGAIN: 'never_ask_again';
  };
}

interface PermissionRationale {
  title: string;
  message: string;
  buttonPositive?: string;
  buttonNegative?: string;
  buttonNeutral?: string;
}

type PermissionStatus = 'granted' | 'denied' | 'never_ask_again';

declare const PermissionsAndroid: PermissionsAndroid;

Native Integration

TurboModuleRegistry

New architecture module system for high-performance native module integration.

/**
 * New architecture module system for native integration
 * Provides high-performance bridge-less native modules
 */
interface TurboModuleRegistry {
  /** Get turbo module instance */
  get<T extends TurboModule>(name: string): T | null;
  /** Get enforcing turbo module instance */
  getEnforcing<T extends TurboModule>(name: string): T;
}

interface TurboModule {
  /** Module constants */
  getConstants(): { [key: string]: any };
}

declare const TurboModuleRegistry: TurboModuleRegistry;

UIManager

UI component management and native view operations.

/**
 * UI component management and native view operations
 * Handles component registration and view manipulation
 */
interface UIManager {
  /** Get view manager config */
  getViewManagerConfig(viewManagerName: string): any;
  /** Measure view */
  measure(
    reactTag: number,
    callback: (x: number, y: number, width: number, height: number, pageX: number, pageY: number) => void
  ): void;
  /** Measure view in window */
  measureInWindow(
    reactTag: number,
    callback: (x: number, y: number, width: number, height: number) => void
  ): void;
  /** Measure layout */
  measureLayout(
    reactTag: number,
    ancestorReactTag: number,
    errorCallback: (error: any) => void,
    callback: (left: number, top: number, width: number, height: number) => void
  ): void;
  /** Focus text input */
  focus(reactTag: number): void;
  /** Blur text input */
  blur(reactTag: number): void;
  /** Find sub-view in */
  findSubviewIn(
    reactTag: number,
    point: [number, number],
    callback: (nativeViewTag: number, left: number, top: number, width: number, height: number) => void
  ): void;
  /** Dispatch view manager command */
  dispatchViewManagerCommand(
    reactTag: number,
    commandName: string,
    commandArgs?: any[]
  ): void;
  /** Set JS responder */
  setJSResponder(reactTag: number, blockNativeResponder: boolean): void;
  /** Clear JS responder */
  clearJSResponder(): void;
}

declare const UIManager: UIManager;

NativeModules

Access to registered native modules with Windows-specific module support.

/**
 * Access to registered native modules
 * Provides Windows-specific native functionality
 */
interface NativeModules {
  /** Platform-specific native modules */
  [moduleName: string]: any;

  /** Core native modules always available */
  DeviceEventManager?: any;
  Timing?: any;
  AppState?: any;
  AsyncLocalStorage?: any;
  DeviceInfo?: any;
  ImageLoader?: any;
  NetworkingIOS?: any;
  PlatformConstants?: any;
  StatusBarManager?: any;
  Vibration?: any;
  WebSocketModule?: any;
}

declare const NativeModules: NativeModules;

Event System

NativeEventEmitter

Native event emission system for cross-platform event handling.

/**
 * Native event emission system
 * Provides cross-platform event handling with native modules
 */
class NativeEventEmitter {
  constructor(nativeModule?: any);

  /** Add event listener */
  addListener(
    eventType: string,
    listener: (...args: any[]) => void,
    context?: any
  ): EmitterSubscription;

  /** Remove listener */
  removeListener(eventType: string, listener: (...args: any[]) => void): void;

  /** Remove all listeners */
  removeAllListeners(eventType?: string): void;

  /** Emit event */
  emit(eventType: string, ...args: any[]): void;

  /** Get listener count */
  listenerCount(eventType: string): number;
}

declare const NativeEventEmitter: typeof NativeEventEmitter;

DeviceEventEmitter

Device-level event emission for hardware and system events.

/**
 * Device-level event emission
 * Handles hardware and system events from Windows
 */
interface DeviceEventEmitter {
  /** Add event listener */
  addListener(
    eventType: string,
    listener: (...args: any[]) => void,
    context?: any
  ): EmitterSubscription;

  /** Remove specific listeners */
  removeListener(eventType: string, listener: (...args: any[]) => void): void;

  /** Remove all listeners */
  removeAllListeners(eventType?: string): void;

  /** Emit event */
  emit(eventType: string, ...args: any[]): void;
}

declare const DeviceEventEmitter: DeviceEventEmitter;

NativeAppEventEmitter

App-level native event emission for application-specific events.

/**
 * App-level native event emission
 * Handles application-specific events from native code
 */
interface NativeAppEventEmitter {
  /** Add event listener */
  addListener(
    eventType: string,
    listener: (...args: any[]) => void,
    context?: any
  ): EmitterSubscription;

  /** Remove listeners */
  removeListener(eventType: string, listener: (...args: any[]) => void): void;

  /** Remove all listeners */
  removeAllListeners(eventType?: string): void;

  /** Emit event */
  emit(eventType: string, ...args: any[]): void;
}

declare const NativeAppEventEmitter: NativeAppEventEmitter;

Performance & Debugging

Systrace

Performance tracing utilities for Windows performance analysis and optimization.

/**
 * Performance tracing utilities
 * Windows performance analysis and optimization tools
 */
interface Systrace {
  /** Begin async event */
  beginAsyncEvent(profileName?: string): void;

  /** End async event */
  endAsyncEvent(profileName?: string): void;

  /** Begin event */
  beginEvent(profileName?: string, args?: any): void;

  /** End event */
  endEvent(): void;

  /** Counter event */
  counterEvent(profileName?: string, value?: number): void;

  /** Check if profiling enabled */
  isEnabled(): boolean;

  /** Measure function execution */
  measure(objName: string, fnName: string, func: Function): Function;

  /** Swizzle function with profiling */
  swizzleJSON(): void;

  /** Attach to relay profiling */
  attachToRelayProfiler(relayProfiler: any): void;
}

declare const Systrace: Systrace;

Utility Functions

findNodeHandle

React component to native node handle mapping for direct native access.

/**
 * React component to native node handle mapping
 * Enables direct native view access from React components
 */
function findNodeHandle(componentOrHandle: any): number | null;

unstable_batchedUpdates

React update batching for performance optimization.

/**
 * React update batching for performance optimization
 * Groups multiple state updates into single render cycle
 */
function unstable_batchedUpdates<T>(
  callback: () => T,
  bookkeeping?: any
): T;

requireNativeComponent

Factory function for creating native component wrappers.

/**
 * Factory for creating native component wrappers
 * Connects React components to native Windows views
 */
function requireNativeComponent<T = any>(
  viewName: string
): React.ComponentType<T>;

registerCallableModule

Register callable modules for native-to-JS communication.

/**
 * Register callable modules for native-to-JS communication
 * Enables native code to call JavaScript functions
 */
function registerCallableModule(name: string, module: any): void;

Context & State

RootTagContext

React context for accessing root component tags and hierarchy information.

/**
 * React context for root component tags
 * Provides access to component hierarchy and native view tags
 */
interface RootTagContext {
  /** Current root tag */
  rootTag: number | null;
}

declare const RootTagContext: React.Context<RootTagContext>;

Legacy and Compatibility APIs

Alert

Cross-platform alert dialog system with Windows native dialogs.

/**
 * Cross-platform alert dialogs with Windows native integration
 * Provides consistent alert API across platforms
 */
interface Alert {
  /** Show alert dialog */
  alert(
    title?: string,
    message?: string,
    buttons?: AlertButton[],
    options?: AlertOptions
  ): void;

  /** Show prompt dialog */
  prompt(
    title?: string,
    message?: string,
    callbackOrButtons?: ((text: string) => void) | AlertButton[],
    type?: AlertType,
    defaultValue?: string,
    keyboardType?: string
  ): void;
}

interface AlertButton {
  text?: string;
  onPress?: (value?: string) => void;
  style?: 'default' | 'cancel' | 'destructive';
}

interface AlertOptions {
  cancelable?: boolean;
  onDismiss?: () => void;
}

type AlertType = 'default' | 'plain-text' | 'secure-text' | 'login-password';

declare const Alert: Alert;

ToastAndroid

Android toast compatibility layer for Windows notification display.

/**
 * Android toast compatibility for Windows notifications
 * Provides consistent toast API across platforms
 */
interface ToastAndroid {
  /** Show toast message */
  show(message: string, duration: number): void;

  /** Show toast with gravity */
  showWithGravity(message: string, duration: number, gravity: number): void;

  /** Show toast with gravity and offset */
  showWithGravityAndOffset(
    message: string,
    duration: number,
    gravity: number,
    xOffset: number,
    yOffset: number
  ): void;

  /** Duration constants */
  SHORT: number;
  LONG: number;

  /** Gravity constants */
  TOP: number;
  BOTTOM: number;
  CENTER: number;
}

declare const ToastAndroid: ToastAndroid;

Networking

Network request utilities and XMLHttpRequest implementation.

/**
 * Network request utilities and XMLHttpRequest implementation
 * Provides Windows-specific networking capabilities
 */
interface Networking {
  /** Send request */
  sendRequest(
    method: string,
    trackingName: string,
    url: string,
    headers: { [key: string]: string },
    data: string,
    responseType: string,
    incrementalUpdates: boolean,
    timeout: number,
    callback: (requestId: number) => void,
    withCredentials?: boolean
  ): void;

  /** Abort request */
  abortRequest(requestId: number): void;

  /** Clear cookies */
  clearCookies(callback: (result: boolean) => void): void;
}

declare const Networking: Networking;

Types

// Windows-specific type definitions
interface WindowsConstants {
  Version: string;
  Brand: string;
  Model: string;
  Manufacturer: string;
  isTV: boolean;
  isTesting: boolean;
}

// Event subscription interface
interface EventSubscription {
  /** Remove event listener */
  remove(): void;
}

// Native module interface
interface NativeModule {
  /** Module constants */
  getConstants?(): { [key: string]: any };
  /** Module methods accessible from JS */
  [methodName: string]: any;
}

// Turbo module base interface
interface TurboModule {
  /** Get module constants */
  getConstants(): { [key: string]: any };
}

// High contrast event data
interface HighContrastChangedEvent {
  isHighContrast: boolean;
  highContrastColors: IHighContrastColors;
}

// Windows color scheme
type WindowsColorScheme = 'light' | 'dark' | 'high-contrast';

// Platform-specific utilities
interface WindowsUtilities {
  /** Check if high contrast mode is enabled */
  isHighContrastEnabled(): boolean;
  /** Get Windows version */
  getWindowsVersion(): string;
  /** Get device family */
  getDeviceFamily(): 'Desktop' | 'Mobile' | 'Xbox' | 'IoT' | 'Team' | 'Holographic';
}

Windows Integration Patterns

High Contrast Support

// Responsive to high contrast changes
useEffect(() => {
  const subscription = AppTheme.addListener('highContrastChanged', (event) => {
    // Update UI based on high contrast state
    updateUIForAccessibility(event.isHighContrast, event.highContrastColors);
  });

  return () => subscription.remove();
}, []);

Theme-Aware Styling

// Automatic theme adaptation
const getAdaptiveColors = () => {
  if (AppTheme.isHighContrast) {
    return {
      background: AppTheme.currentHighContrastColors.WindowColor,
      text: AppTheme.currentHighContrastColors.WindowTextColor,
      button: AppTheme.currentHighContrastColors.ButtonFaceColor,
    };
  }

  return useColorScheme() === 'dark'
    ? { background: '#333', text: 'white', button: '#555' }
    : { background: 'white', text: 'black', button: '#f0f0f0' };
};

Native Module Integration

// Custom native module access
const CustomNativeModule = NativeModules.CustomWindowsModule;

// Turbo module usage
const TurboCustomModule = TurboModuleRegistry.get<CustomTurboModule>('CustomModule');

Install with Tessl CLI

npx tessl i tessl/npm-react-native-windows

docs

apis.md

components.md

events.md

index.md

styling.md

windows-apis.md

windows-components.md

tile.json