React Native for Windows framework that enables cross-platform mobile and desktop app development with JavaScript and TypeScript
—
Windows-specific APIs providing native platform integration, theme support, accessibility features, and enhanced system interaction capabilities unique to the Windows environment.
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>
);
};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;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;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;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;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;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;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;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;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;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 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;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;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;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>;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;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>;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;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;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;// 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';
}// 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();
}, []);// 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' };
};// 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