React Native for Windows framework that enables cross-platform mobile and desktop app development with JavaScript and TypeScript
—
Core React Native APIs enhanced for Windows platform with comprehensive system integration, app lifecycle management, and device interaction capabilities.
Central registry for React Native applications, components, and runnable functions with Windows-specific initialization support.
/**
* Central registry for React Native applications and components
* Handles app initialization and component registration
*/
interface AppRegistry {
/** Register a React component as an application */
registerComponent(appKey: string, componentProvider: () => React.ComponentType): string;
/** Register a runnable function */
registerRunnable(appKey: string, run: Function): string;
/** Register a React component configuration */
registerConfig(config: AppConfig[]): void;
/** Get registered application */
getApplication(appKey: string): ApplicationSpec | undefined;
/** Get all registered applications */
getAppKeys(): string[];
/** Run an application */
runApplication(appKey: string, appParameters: AppParameters): void;
/** Unmount an application */
unmountApplicationComponentAtRootTag(rootTag: number): void;
/** Start headless task */
startHeadlessTask(taskId: number, taskKey: string, data: any): void;
}
interface AppConfig {
appKey: string;
component?: () => React.ComponentType;
run?: Function;
}
interface ApplicationSpec {
component?: React.ComponentType;
run?: Function;
}
interface AppParameters {
initialProps?: any;
fabric?: boolean;
}
declare const AppRegistry: AppRegistry;Application state management providing lifecycle events and background/foreground state tracking.
/**
* Application state management with lifecycle events
* Tracks background/foreground state and provides event listeners
*/
interface AppState {
/** Current application state */
readonly currentState: 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
/** Add event listener for state changes */
addEventListener(
type: 'change' | 'memoryWarning' | 'focus' | 'blur',
handler: (state: string) => void
): void;
/** Remove event listener */
removeEventListener(
type: 'change' | 'memoryWarning' | 'focus' | 'blur',
handler: (state: string) => void
): void;
/** Check if app is available (deprecated) */
isAvailable(): boolean;
}
declare const AppState: AppState;Platform detection and OS information with Windows-specific constants and utilities.
/**
* Platform detection and OS information
* Provides Windows-specific constants and version detection
*/
interface Platform {
/** Operating system identifier */
readonly OS: 'windows' | 'ios' | 'android' | 'macos' | 'web';
/** Platform version string */
readonly Version: string;
/** Platform-specific constants */
readonly constants: PlatformConstants;
/** Platform-specific value selection */
select<T>(specifics: PlatformSelectSpec<T>): T;
/** Check if platform is TV */
isTV: boolean;
/** Check if platform is testing environment */
isTesting: boolean;
}
interface PlatformConstants {
reactNativeVersion: {
major: number;
minor: number;
patch: number;
prerelease?: string;
};
Version: string;
[key: string]: any;
}
interface PlatformSelectSpec<T> {
windows?: T;
ios?: T;
android?: T;
macos?: T;
web?: T;
native?: T;
default?: T;
}
declare const Platform: Platform;Device information and capabilities detection for Windows devices.
/**
* Device information and capabilities for Windows devices
* Provides device type, version, and capability detection
*/
interface DeviceInfo {
/** Get device constants */
getConstants(): DeviceConstants;
/** Check if device is tablet */
isTablet(): boolean;
/** Get device type */
getDeviceType(): 'Handset' | 'Tablet' | 'Desktop' | 'TV' | 'Unknown';
}
interface DeviceConstants {
Dimensions: {
window: Dimensions;
screen: Dimensions;
};
fontScale: number;
[key: string]: any;
}
declare const DeviceInfo: DeviceInfo;Screen and window dimension management with dynamic updates and orientation support.
/**
* Screen and window dimensions with dynamic updates
* Handles orientation changes and multi-monitor scenarios
*/
interface Dimensions {
/** Get dimensions for window or screen */
get(dim: 'window' | 'screen'): Dimensions;
/** Add change listener */
addEventListener(
type: 'change',
handler: (dimensionData: { window: Dimensions; screen: Dimensions }) => void
): void;
/** Remove change listener */
removeEventListener(
type: 'change',
handler: (dimensionData: { window: Dimensions; screen: Dimensions }) => void
): void;
}
interface Dimensions {
width: number;
height: number;
scale: number;
fontScale: number;
}
declare const Dimensions: Dimensions;
/**
* Hook for window dimensions with automatic updates
*/
function useWindowDimensions(): Dimensions;Pixel density utilities for high-DPI displays and responsive design.
/**
* Pixel density utilities for high-DPI displays
* Handles Windows scaling and responsive design
*/
interface PixelRatio {
/** Get device pixel ratio */
get(): number;
/** Get font scale factor */
getFontScale(): number;
/** Get pixel size for given points */
getPixelSizeForLayoutSize(layoutSize: number): number;
/** Round to nearest pixel */
roundToNearestPixel(layoutSize: number): number;
/** Start detecting changes */
startDetecting(): void;
}
declare const PixelRatio: PixelRatio;Keyboard state management and event handling with Windows-specific features.
/**
* Keyboard state management and event handling
* Includes Windows-specific keyboard features and shortcuts
*/
interface Keyboard {
/** Add keyboard event listener */
addListener(
eventName: KeyboardEventName,
callback: (event: KeyboardEvent) => void
): KeyboardEventSubscription;
/** Remove keyboard event listeners */
removeAllListeners(eventName?: KeyboardEventName): void;
/** Dismiss keyboard */
dismiss(): void;
/** Get keyboard metrics */
metrics(): KeyboardMetrics | null;
}
type KeyboardEventName =
| 'keyboardWillShow'
| 'keyboardDidShow'
| 'keyboardWillHide'
| 'keyboardDidHide'
| 'keyboardWillChangeFrame'
| 'keyboardDidChangeFrame';
interface KeyboardEvent {
duration?: number;
easing?: string;
endCoordinates: {
width: number;
height: number;
screenX: number;
screenY: number;
};
startCoordinates?: {
width: number;
height: number;
screenX: number;
screenY: number;
};
isEventFromThisApp?: boolean;
}
interface KeyboardMetrics {
height: number;
width: number;
screenX: number;
screenY: number;
}
interface KeyboardEventSubscription {
remove(): void;
}
declare const Keyboard: Keyboard;Hardware back button handling for Windows devices with back gesture support.
/**
* Hardware back button and gesture handling
* Supports Windows back navigation patterns
*/
interface BackHandler {
/** Exit application */
exitApp(): void;
/** Add back button event listener */
addEventListener(
eventName: 'hardwareBackPress',
handler: () => boolean
): BackHandlerSubscription;
/** Remove back button event listener */
removeEventListener(
eventName: 'hardwareBackPress',
handler: () => boolean
): void;
}
interface BackHandlerSubscription {
remove(): void;
}
declare const BackHandler: BackHandler;Device vibration API with Windows haptic feedback support.
/**
* Device vibration API with haptic feedback
* Supports Windows haptic patterns and intensity
*/
interface Vibration {
/** Vibrate with pattern */
vibrate(pattern?: number | number[], repeat?: boolean): void;
/** Cancel vibration */
cancel(): void;
}
declare const Vibration: Vibration;Comprehensive animation library with Windows-optimized performance and native driver support.
/**
* Comprehensive animation library with native driver support
* Windows-optimized performance and smooth transitions
*/
interface Animated {
/** Create animated value */
Value: typeof AnimatedValue;
/** Create animated value XY */
ValueXY: typeof AnimatedValueXY;
/** Timing animation */
timing: (
value: AnimatedValue,
config: TimingAnimationConfig
) => CompositeAnimation;
/** Spring animation */
spring: (
value: AnimatedValue,
config: SpringAnimationConfig
) => CompositeAnimation;
/** Decay animation */
decay: (
value: AnimatedValue,
config: DecayAnimationConfig
) => CompositeAnimation;
/** Parallel animations */
parallel: (
animations: CompositeAnimation[],
config?: ParallelConfig
) => CompositeAnimation;
/** Sequential animations */
sequence: (animations: CompositeAnimation[]) => CompositeAnimation;
/** Delay animation */
delay: (time: number) => CompositeAnimation;
/** Stagger animations */
stagger: (
time: number,
animations: CompositeAnimation[]
) => CompositeAnimation;
/** Loop animation */
loop: (
animation: CompositeAnimation,
config?: LoopAnimationConfig
) => CompositeAnimation;
/** Create animated component */
createAnimatedComponent: <T>(component: T) => T;
/** Add listener to value */
addListener: (value: AnimatedValue, listener: AnimatedListener) => string;
/** Remove listener */
removeListener: (value: AnimatedValue, id: string) => void;
/** Remove all listeners */
removeAllListeners: (value: AnimatedValue) => void;
/** Animated components */
View: AnimatedComponent<typeof View>;
Text: AnimatedComponent<typeof Text>;
ScrollView: AnimatedComponent<typeof ScrollView>;
Image: AnimatedComponent<typeof Image>;
FlatList: AnimatedComponent<typeof FlatList>;
SectionList: AnimatedComponent<typeof SectionList>;
}
class AnimatedValue {
constructor(value: number);
setValue(value: number): void;
setOffset(offset: number): void;
flattenOffset(): void;
extractOffset(): void;
addListener(callback: (value: { value: number }) => void): string;
removeListener(id: string): void;
removeAllListeners(): void;
stopAnimation(callback?: (value: number) => void): void;
resetAnimation(callback?: (value: number) => void): void;
interpolate(config: InterpolationConfig): AnimatedInterpolation;
}
declare const Animated: Animated;Easing functions for smooth animations with Windows-native timing curves.
/**
* Easing functions for smooth animations
* Includes Windows-native timing curves
*/
interface Easing {
/** Linear easing */
linear: (t: number) => number;
/** Ease in */
in: (easing: (t: number) => number) => (t: number) => number;
/** Ease out */
out: (easing: (t: number) => number) => (t: number) => number;
/** Ease in and out */
inOut: (easing: (t: number) => number) => (t: number) => number;
/** Quadratic easing */
quad: (t: number) => number;
/** Cubic easing */
cubic: (t: number) => number;
/** Polynomial easing */
poly: (n: number) => (t: number) => number;
/** Sine easing */
sin: (t: number) => number;
/** Circle easing */
circle: (t: number) => number;
/** Exponential easing */
exp: (t: number) => number;
/** Elastic easing */
elastic: (bounciness?: number) => (t: number) => number;
/** Back easing */
back: (s?: number) => (t: number) => number;
/** Bounce easing */
bounce: (t: number) => number;
/** Bezier easing curve */
bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => number;
}
declare const Easing: Easing;Layout change animations with Windows-specific transition effects.
/**
* Layout change animations with Windows transition effects
* Animates layout changes automatically
*/
interface LayoutAnimation {
/** Configure next layout animation */
configureNext(config: LayoutAnimationConfig, onAnimationDidEnd?: () => void): void;
/** Create layout animation config */
create(
duration: number,
type?: LayoutAnimationType,
creationProp?: LayoutAnimationProperty
): LayoutAnimationConfig;
/** Predefined presets */
Presets: {
easeInEaseOut: LayoutAnimationConfig;
linear: LayoutAnimationConfig;
spring: LayoutAnimationConfig;
};
/** Animation types */
Types: {
spring: LayoutAnimationType;
linear: LayoutAnimationType;
easeInEaseOut: LayoutAnimationType;
easeIn: LayoutAnimationType;
easeOut: LayoutAnimationType;
keyboard: LayoutAnimationType;
};
/** Animation properties */
Properties: {
opacity: LayoutAnimationProperty;
scaleX: LayoutAnimationProperty;
scaleY: LayoutAnimationProperty;
scaleXY: LayoutAnimationProperty;
};
}
interface LayoutAnimationConfig {
duration: number;
create?: LayoutAnimationAnim;
update?: LayoutAnimationAnim;
delete?: LayoutAnimationAnim;
}
interface LayoutAnimationAnim {
duration?: number;
delay?: number;
springDamping?: number;
initialVelocity?: number;
type?: LayoutAnimationType;
property?: LayoutAnimationProperty;
}
type LayoutAnimationType = 'spring' | 'linear' | 'easeInEaseOut' | 'easeIn' | 'easeOut' | 'keyboard';
type LayoutAnimationProperty = 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY';
declare const LayoutAnimation: LayoutAnimation;Interaction and timing management for smooth user experience and performance optimization.
/**
* Interaction and timing management for smooth UX
* Coordinates animations with user interactions
*/
interface InteractionManager {
/** Run after interactions */
runAfterInteractions(task?: () => any): Promise<any>;
/** Create interaction handle */
createInteractionHandle(): number;
/** Clear interaction handle */
clearInteractionHandle(handle: number): void;
/** Add listener for interaction state changes */
addListener(callback: (hasActiveInteractions: boolean) => void): object;
/** Set deadline for interactions */
setDeadline(deadline: number): void;
}
declare const InteractionManager: InteractionManager;Gesture recognition system for touch and mouse input with Windows-specific enhancements.
/**
* Gesture recognition system for touch and mouse input
* Handles complex gestures and multi-touch scenarios
*/
interface PanResponder {
/** Create pan responder */
create(config: PanResponderConfig): PanResponderInstance;
}
interface PanResponderConfig {
/** Should become responder on start */
onStartShouldSetPanResponder?: (
event: GestureResponderEvent,
gestureState: PanResponderGestureState
) => boolean;
/** Should become responder on move */
onMoveShouldSetPanResponder?: (
event: GestureResponderEvent,
gestureState: PanResponderGestureState
) => boolean;
/** Responder grant handler */
onPanResponderGrant?: (
event: GestureResponderEvent,
gestureState: PanResponderGestureState
) => void;
/** Responder start handler */
onPanResponderStart?: (
event: GestureResponderEvent,
gestureState: PanResponderGestureState
) => void;
/** Responder move handler */
onPanResponderMove?: (
event: GestureResponderEvent,
gestureState: PanResponderGestureState
) => void;
/** Responder release handler */
onPanResponderRelease?: (
event: GestureResponderEvent,
gestureState: PanResponderGestureState
) => void;
/** Responder terminate handler */
onPanResponderTerminate?: (
event: GestureResponderEvent,
gestureState: PanResponderGestureState
) => void;
}
interface PanResponderInstance {
panHandlers: {
onStartShouldSetResponder: (event: GestureResponderEvent) => boolean;
onMoveShouldSetResponder: (event: GestureResponderEvent) => boolean;
onResponderGrant: (event: GestureResponderEvent) => void;
onResponderMove: (event: GestureResponderEvent) => void;
onResponderRelease: (event: GestureResponderEvent) => void;
onResponderTerminate: (event: GestureResponderEvent) => void;
};
}
interface PanResponderGestureState {
stateID: number;
moveX: number;
moveY: number;
x0: number;
y0: number;
dx: number;
dy: number;
vx: number;
vy: number;
numberActiveTouches: number;
}
interface GestureResponderEvent {
nativeEvent: {
changedTouches: Touch[];
identifier: number;
locationX: number;
locationY: number;
pageX: number;
pageY: number;
target: number;
timestamp: number;
touches: Touch[];
};
}
interface Touch {
identifier: number;
locationX: number;
locationY: number;
pageX: number;
pageY: number;
target: number;
timestamp: number;
}
declare const PanResponder: PanResponder;Deep linking and URL handling with Windows protocol registration and app launching.
/**
* Deep linking and URL handling with Windows protocol support
* Handles app launching and protocol registration
*/
interface Linking {
/** Add URL change listener */
addEventListener(
type: 'url',
handler: (event: { url: string }) => void
): void;
/** Remove URL change listener */
removeEventListener(
type: 'url',
handler: (event: { url: string }) => void
): void;
/** Open URL */
openURL(url: string): Promise<void>;
/** Check if URL can be opened */
canOpenURL(url: string): Promise<boolean>;
/** Get initial URL */
getInitialURL(): Promise<string | null>;
/** Open settings */
openSettings(): Promise<void>;
/** Send intent (Windows specific) */
sendIntent(action: string, extras?: object[]): Promise<void>;
}
declare const Linking: Linking;Native sharing capabilities with Windows sharing contract integration.
/**
* Native sharing with Windows sharing contract integration
* Supports files, URLs, and custom content types
*/
interface Share {
/** Share content */
share(
content: ShareContent,
options?: ShareOptions
): Promise<ShareAction>;
/** Share single file */
shareSingle(options: ShareSingleOptions): Promise<ShareAction>;
}
interface ShareContent {
/** Message to share */
message?: string;
/** URL to share */
url?: string;
/** Title for share dialog */
title?: string;
}
interface ShareOptions {
/** Dialog title */
dialogTitle?: string;
/** Exclude activity types */
excludedActivityTypes?: string[];
/** Anchor point for iPad */
anchor?: number;
/** Subject for email sharing */
subject?: string;
}
interface ShareSingleOptions {
/** Content to share */
message?: string;
/** URL to share */
url?: string;
/** Social network */
social?: 'facebook' | 'twitter' | 'whatsapp' | 'instagram' | 'email' | 'sms';
/** File path */
filename?: string;
}
interface ShareAction {
/** Action type */
action: 'sharedAction' | 'dismissedAction';
/** Activity type */
activityType?: string;
}
declare const Share: Share;Development settings and debugging utilities for Windows development environment.
/**
* Development settings and debugging utilities
* Windows development environment configuration
*/
interface DevSettings {
/** Add menu item to dev menu */
addMenuItem(title: string, handler: () => void): void;
/** Reload app */
reload(): void;
/** Open dev menu */
openMenu(): void;
}
declare const DevSettings: DevSettings;Development error and warning display system with Windows-native styling.
/**
* Development error and warning display
* Windows-native styling and integration
*/
interface LogBox {
/** Install console error handler */
install(): void;
/** Uninstall console error handler */
uninstall(): void;
/** Ignore specific log patterns */
ignoreLogs(patterns: (string | RegExp)[]): void;
/** Ignore all logs */
ignoreAllLogs(ignore?: boolean): void;
}
declare const LogBox: LogBox;Enhanced Windows accessibility information and screen reader support.
/**
* Enhanced Windows accessibility information and screen reader support
*/
interface AccessibilityInfo {
/** Check if screen reader is enabled */
isScreenReaderEnabled(): Promise<boolean>;
/** Add screen reader change listener */
addEventListener(
eventName: 'screenReaderChanged',
handler: (isEnabled: boolean) => void
): EventSubscription;
/** Remove event listener */
removeEventListener(
eventName: 'screenReaderChanged',
handler: (isEnabled: boolean) => void
): void;
/** Announce text to screen reader */
announceForAccessibility(announcement: string): void;
/** Set accessibility focus */
setAccessibilityFocus(reactTag: number): void;
}
declare const AccessibilityInfo: AccessibilityInfo;Device dimension information and orientation change handling.
/**
* Device dimension information and orientation change handling
*/
interface Dimensions {
/** Get screen dimensions */
get(dim: 'window' | 'screen'): ScaledSize;
/** Add dimension change listener */
addEventListener(
type: 'change',
handler: (dimensions: { window: ScaledSize; screen: ScaledSize }) => void
): EventSubscription;
/** Remove dimension change listener */
removeEventListener(
type: 'change',
handler: (dimensions: { window: ScaledSize; screen: ScaledSize }) => void
): void;
}
interface ScaledSize {
width: number;
height: number;
scale: number;
fontScale: number;
}
declare const Dimensions: Dimensions;Keyboard visibility and metrics information.
/**
* Keyboard visibility and metrics information
*/
interface Keyboard {
/** Add keyboard event listener */
addListener(
eventName: 'keyboardDidShow' | 'keyboardDidHide' | 'keyboardWillShow' | 'keyboardWillHide',
callback: (event: KeyboardEvent) => void
): EventSubscription;
/** Remove all listeners for event */
removeAllListeners(eventName?: string): void;
/** Dismiss active keyboard */
dismiss(): void;
}
interface KeyboardEvent {
startCoordinates?: ScreenRect;
endCoordinates: ScreenRect;
duration?: number;
easing?: string;
}
interface ScreenRect {
screenX: number;
screenY: number;
width: number;
height: number;
}
declare const Keyboard: Keyboard;URL linking and deep link handling capabilities.
/**
* URL linking and deep link handling capabilities
*/
interface Linking {
/** Open URL in default application */
openURL(url: string): Promise<void>;
/** Check if URL can be handled */
canOpenURL(url: string): Promise<boolean>;
/** Get initial launch URL */
getInitialURL(): Promise<string | null>;
/** Add URL change listener */
addEventListener(type: 'url', handler: (event: { url: string }) => void): void;
/** Remove URL change listener */
removeEventListener(type: 'url', handler: (event: { url: string }) => void): void;
/** Send intent (Android specific) */
sendIntent(action: string, extras?: Array<{ key: string; value: string | number | boolean }>): Promise<void>;
}
declare const Linking: Linking;Native sharing capabilities for content.
/**
* Native sharing capabilities for content
*/
interface Share {
/** Share content using native sharing */
share(
content: ShareContent,
options?: ShareOptions
): Promise<ShareAction>;
}
interface ShareContent {
message?: string;
url?: string;
title?: string;
}
interface ShareOptions {
dialogTitle?: string;
excludedActivityTypes?: string[];
tintColor?: string;
subject?: string;
}
interface ShareAction {
action: 'sharedAction' | 'dismissedAction';
activityType?: string;
}
declare const Share: Share;Haptic feedback and vibration control.
/**
* Haptic feedback and vibration control
*/
interface Vibration {
/** Trigger vibration */
vibrate(pattern?: number | number[], repeat?: boolean): void;
/** Cancel ongoing vibration */
cancel(): void;
}
declare const Vibration: Vibration;// Animation configuration types
interface TimingAnimationConfig {
toValue: number | AnimatedValue | { x: number; y: number };
duration?: number;
easing?: (value: number) => number;
delay?: number;
useNativeDriver?: boolean;
}
interface SpringAnimationConfig {
toValue: number | AnimatedValue | { x: number; y: number };
restDisplacementThreshold?: number;
overshootClamping?: boolean;
restSpeedThreshold?: number;
velocity?: number | { x: number; y: number };
bounciness?: number;
speed?: number;
tension?: number;
friction?: number;
stiffness?: number;
damping?: number;
mass?: number;
delay?: number;
useNativeDriver?: boolean;
}
interface DecayAnimationConfig {
velocity: number | { x: number; y: number };
deceleration?: number;
delay?: number;
useNativeDriver?: boolean;
}
interface CompositeAnimation {
start(callback?: (finished: { finished: boolean }) => void): void;
stop(): void;
reset(): void;
}
interface InterpolationConfig {
inputRange: number[];
outputRange: number[] | string[];
easing?: (value: number) => number;
extrapolate?: 'extend' | 'identity' | 'clamp';
extrapolateLeft?: 'extend' | 'identity' | 'clamp';
extrapolateRight?: 'extend' | 'identity' | 'clamp';
}
// Event listener subscription type
interface EventSubscription {
remove(): void;
}
// Generic animation component type
type AnimatedComponent<T> = T & {
getNode(): T;
};
// Animation listener type
type AnimatedListener = (value: { value: number }) => void;Install with Tessl CLI
npx tessl i tessl/npm-react-native-windows