or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

apis.mdcomponents.mdevents.mdindex.mdstyling.mdwindows-apis.mdwindows-components.md
tile.json

tessl/npm-react-native-windows

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-windows@0.79.x

To install, run

npx @tessl/cli install tessl/npm-react-native-windows@0.79.0

index.mddocs/

React Native Windows

React Native Windows is a framework that brings Meta's React Native to the Windows platform, enabling developers to build native Windows applications using JavaScript, TypeScript, and React. It extends React Native's cross-platform capabilities to support all Windows 10+ devices including PCs, tablets, Xbox, and Mixed Reality devices while providing comprehensive Windows SDK integration and platform-specific features.

Package Information

  • Package Name: react-native-windows
  • Package Type: npm
  • Language: JavaScript/TypeScript with C++ native components
  • Installation: npm install react-native-windows

Core Imports

import { View, Text, Pressable, StyleSheet } from 'react-native-windows';

For CommonJS:

const { View, Text, Pressable, StyleSheet } = require('react-native-windows');

Windows-specific imports:

import { Flyout, Glyph, Popup, AppTheme } from 'react-native-windows';

Basic Usage

import React, { useState } from 'react';
import {
  View,
  Text,
  Pressable,
  StyleSheet,
  AppRegistry,
  Flyout
} from 'react-native-windows';

interface Props {}

const App: React.FC<Props> = () => {
  const [showFlyout, setShowFlyout] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.title} tooltip="Welcome message">
        Hello Windows!
      </Text>

      <Pressable
        style={styles.button}
        onPress={() => setShowFlyout(true)}
        onKeyDown={(event) => {
          if (event.nativeEvent.key === 'Enter') {
            setShowFlyout(true);
          }
        }}
      >
        <Text style={styles.buttonText}>Show Flyout</Text>
      </Pressable>

      <Flyout
        isOpen={showFlyout}
        onDismiss={() => setShowFlyout(false)}
        placement="bottom"
        target={
          <View style={styles.placeholder}>
            <Text>Flyout Content</Text>
          </View>
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#0078d4',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  placeholder: {
    padding: 20,
    backgroundColor: 'white',
    borderRadius: 5,
  },
});

AppRegistry.registerComponent('App', () => App);

Architecture

React Native Windows is built around several key architectural components:

  • Cross-Platform Core: Standard React Native components and APIs with Windows adaptations
  • Windows Extensions: Platform-specific components (Flyout, Glyph, Popup) and enhanced event handling
  • Native Bridge: C++ native modules providing Windows SDK integration and performance
  • Dual Renderer Support: Compatible with both Paper (legacy) and Fabric (new architecture) renderers
  • Focus Management: Enhanced keyboard navigation and accessibility support
  • Theme Integration: Native Windows theme and high contrast support

Capabilities

Core Components

Standard React Native components enhanced with Windows-specific features like keyboard navigation, mouse events, and accessibility improvements.

// Enhanced View with Windows event handling
interface ViewProps extends StandardViewProps {
  tooltip?: string;
  tabIndex?: number;
  enableFocusRing?: boolean;
  onMouseEnter?: (event: MouseEvent) => void;
  onMouseLeave?: (event: MouseEvent) => void;
  onKeyDown?: (event: KeyboardEvent) => void;
  onKeyUp?: (event: KeyboardEvent) => void;
}

// Enhanced Text with tooltip support
interface TextProps extends StandardTextProps {
  tooltip?: string;
}

Core Components

Windows-Specific Components

Native Windows components providing platform-specific functionality and UI patterns.

// Flyout component for contextual UI
interface IFlyoutProps {
  isOpen?: boolean;
  placement?: Placement;
  target?: React.ReactNode;
  onDismiss?: (isOpen: boolean) => void;
  isLightDismissEnabled?: boolean;
  autoFocus?: boolean;
  isOverlayEnabled?: boolean;
  showMode?: ShowMode;
}

// Glyph component for font icons
interface GlyphProps {
  fontUri?: string;
  glyph?: string;
  emSize?: number;
  colorEnabled?: boolean;
}

// Popup component
interface IPopupProps {
  isOpen?: boolean;
  target?: React.ReactNode;
  onDismiss?: () => void;
}

Windows Components

Application & System APIs

Core APIs for app lifecycle, device information, and system integration.

// App registration and lifecycle
interface AppRegistry {
  registerComponent(appKey: string, componentProvider: () => React.ComponentType): string;
  registerRunnable(appKey: string, run: Function): string;
  getApplication(appKey: string): React.ComponentType | undefined;
}

// App state management
interface AppState {
  currentState: 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
  addEventListener(type: string, handler: Function): void;
  removeEventListener(type: string, handler: Function): void;
}

// Platform detection
interface Platform {
  OS: 'windows' | 'ios' | 'android' | 'macos' | 'web';
  Version: string;
  constants: PlatformConstants;
  select<T>(specifics: PlatformSelectSpec<T>): T;
}

Core APIs

Windows Theme & Appearance

Windows-specific theme detection, high contrast support, and appearance management.

// Windows theme and high contrast support
interface AppTheme {
  isHighContrast: boolean;
  currentHighContrastColors: IHighContrastColors;
  addListener(
    eventName: 'highContrastChanged',
    listener: (nativeEvent: IHighContrastChangedEvent) => void
  ): EmitterSubscription;
  removeListener(
    eventName: 'highContrastChanged',
    listener: (nativeEvent: IHighContrastChangedEvent) => void
  ): void;
}

interface IHighContrastColors {
  ButtonFaceColor: string;
  ButtonTextColor: string;
  GrayTextColor: string;
  HighlightColor: string;
  HighlightTextColor: string;
  HotlightColor: string;
  WindowColor: string;
  WindowTextColor: string;
}

Windows APIs

Enhanced Event Handling

Comprehensive keyboard, mouse, and focus event system with Windows-specific enhancements.

// Keyboard event interface
interface IKeyboardEvent {
  altKey: boolean;
  ctrlKey: boolean;
  metaKey: boolean;
  shiftKey: boolean;
  key: string;
  code: string;
  eventPhase: EventPhase;
  handledEventPhase: HandledEventPhase;
}

// Mouse event interface
interface IMouseEvent {
  altKey: boolean;
  ctrlKey: boolean;
  metaKey: boolean;
  shiftKey: boolean;
  button: number;
  buttons: number;
  pageX: number;
  pageY: number;
}

Event Handling

Styling & Colors

Enhanced styling system with Windows brush integration and platform-specific color support.

// Platform color support for Windows brushes
function PlatformColor(...names: string[]): PlatformColor;

// Style sheet creation with Windows enhancements
interface StyleSheet {
  create<T>(styles: T): T;
  flatten<T>(style: T): T;
  compose<T>(style1: T, style2: T): T;
}

// Color processing utilities
function processColor(color: number | string): number | null;

Styling System

Types

// Event phase enumeration
enum EventPhase {
  None = 0,
  Capturing = 1,
  AtTarget = 2,
  Bubbling = 3,
}

enum HandledEventPhase {
  None = 0,
  Capturing = 1,
  AtTarget = 2,
  Bubbling = 3,
}

// Flyout placement options
type Placement =
  | 'top'
  | 'bottom'
  | 'left'
  | 'right'
  | 'full'
  | 'top-edge-aligned-left'
  | 'top-edge-aligned-right'
  | 'bottom-edge-aligned-left'
  | 'bottom-edge-aligned-right'
  | 'left-edge-aligned-top'
  | 'right-edge-aligned-top'
  | 'left-edge-aligned-bottom'
  | 'right-edge-aligned-bottom';

// Flyout show modes
type ShowMode =
  | 'auto'
  | 'standard'
  | 'transient'
  | 'transient-with-dismiss-on-pointer-move-away';

// Host component and instance types
type HostComponent<T> = React.AbstractComponent<T>;
type HostInstance = any;