0
# React Native Windows
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: react-native-windows
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript with C++ native components
9
- **Installation**: `npm install react-native-windows`
10

11
## Core Imports
12

13
```typescript
14
import { View, Text, Pressable, StyleSheet } from 'react-native-windows';
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { View, Text, Pressable, StyleSheet } = require('react-native-windows');
21
```
22

23
Windows-specific imports:
24

25
```typescript
26
import { Flyout, Glyph, Popup, AppTheme } from 'react-native-windows';
27
```
28

29
## Basic Usage
30

31
```typescript
32
import React, { useState } from 'react';
33
import {
34
  View,
35
  Text,
36
  Pressable,
37
  StyleSheet,
38
  AppRegistry,
39
  Flyout
40
} from 'react-native-windows';
41

42
interface Props {}
43

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

47
  return (
48
    <View style={styles.container}>
49
      <Text style={styles.title} tooltip="Welcome message">
50
        Hello Windows!
51
      </Text>
52

53
      <Pressable
54
        style={styles.button}
55
        onPress={() => setShowFlyout(true)}
56
        onKeyDown={(event) => {
57
          if (event.nativeEvent.key === 'Enter') {
58
            setShowFlyout(true);
59
          }
60
        }}
61
      >
62
        <Text style={styles.buttonText}>Show Flyout</Text>
63
      </Pressable>
64

65
      <Flyout
66
        isOpen={showFlyout}
67
        onDismiss={() => setShowFlyout(false)}
68
        placement="bottom"
69
        target={
70
          <View style={styles.placeholder}>
71
            <Text>Flyout Content</Text>
72
          </View>
73
        }
74
      />
75
    </View>
76
  );
77
};
78

79
const styles = StyleSheet.create({
80
  container: {
81
    flex: 1,
82
    justifyContent: 'center',
83
    alignItems: 'center',
84
    backgroundColor: '#f5f5f5',
85
  },
86
  title: {
87
    fontSize: 24,
88
    fontWeight: 'bold',
89
    marginBottom: 20,
90
  },
91
  button: {
92
    backgroundColor: '#0078d4',
93
    padding: 10,
94
    borderRadius: 5,
95
  },
96
  buttonText: {
97
    color: 'white',
98
    fontWeight: 'bold',
99
  },
100
  placeholder: {
101
    padding: 20,
102
    backgroundColor: 'white',
103
    borderRadius: 5,
104
  },
105
});
106

107
AppRegistry.registerComponent('App', () => App);
108
```
109

110
## Architecture
111

112
React Native Windows is built around several key architectural components:
113

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

121
## Capabilities
122

123
### Core Components
124

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

127
```typescript { .api }
128
// Enhanced View with Windows event handling
129
interface ViewProps extends StandardViewProps {
130
  tooltip?: string;
131
  tabIndex?: number;
132
  enableFocusRing?: boolean;
133
  onMouseEnter?: (event: MouseEvent) => void;
134
  onMouseLeave?: (event: MouseEvent) => void;
135
  onKeyDown?: (event: KeyboardEvent) => void;
136
  onKeyUp?: (event: KeyboardEvent) => void;
137
}
138

139
// Enhanced Text with tooltip support
140
interface TextProps extends StandardTextProps {
141
  tooltip?: string;
142
}
143
```
144

145
[Core Components](./components.md)
146

147
### Windows-Specific Components
148

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

151
```typescript { .api }
152
// Flyout component for contextual UI
153
interface IFlyoutProps {
154
  isOpen?: boolean;
155
  placement?: Placement;
156
  target?: React.ReactNode;
157
  onDismiss?: (isOpen: boolean) => void;
158
  isLightDismissEnabled?: boolean;
159
  autoFocus?: boolean;
160
  isOverlayEnabled?: boolean;
161
  showMode?: ShowMode;
162
}
163

164
// Glyph component for font icons
165
interface GlyphProps {
166
  fontUri?: string;
167
  glyph?: string;
168
  emSize?: number;
169
  colorEnabled?: boolean;
170
}
171

172
// Popup component
173
interface IPopupProps {
174
  isOpen?: boolean;
175
  target?: React.ReactNode;
176
  onDismiss?: () => void;
177
}
178
```
179

180
[Windows Components](./windows-components.md)
181

182
### Application & System APIs
183

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

186
```typescript { .api }
187
// App registration and lifecycle
188
interface AppRegistry {
189
  registerComponent(appKey: string, componentProvider: () => React.ComponentType): string;
190
  registerRunnable(appKey: string, run: Function): string;
191
  getApplication(appKey: string): React.ComponentType | undefined;
192
}
193

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

201
// Platform detection
202
interface Platform {
203
  OS: 'windows' | 'ios' | 'android' | 'macos' | 'web';
204
  Version: string;
205
  constants: PlatformConstants;
206
  select<T>(specifics: PlatformSelectSpec<T>): T;
207
}
208
```
209

210
[Core APIs](./apis.md)
211

212
### Windows Theme & Appearance
213

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

216
```typescript { .api }
217
// Windows theme and high contrast support
218
interface AppTheme {
219
  isHighContrast: boolean;
220
  currentHighContrastColors: IHighContrastColors;
221
  addListener(
222
    eventName: 'highContrastChanged',
223
    listener: (nativeEvent: IHighContrastChangedEvent) => void
224
  ): EmitterSubscription;
225
  removeListener(
226
    eventName: 'highContrastChanged',
227
    listener: (nativeEvent: IHighContrastChangedEvent) => void
228
  ): void;
229
}
230

231
interface IHighContrastColors {
232
  ButtonFaceColor: string;
233
  ButtonTextColor: string;
234
  GrayTextColor: string;
235
  HighlightColor: string;
236
  HighlightTextColor: string;
237
  HotlightColor: string;
238
  WindowColor: string;
239
  WindowTextColor: string;
240
}
241
```
242

243
[Windows APIs](./windows-apis.md)
244

245
### Enhanced Event Handling
246

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

249
```typescript { .api }
250
// Keyboard event interface
251
interface IKeyboardEvent {
252
  altKey: boolean;
253
  ctrlKey: boolean;
254
  metaKey: boolean;
255
  shiftKey: boolean;
256
  key: string;
257
  code: string;
258
  eventPhase: EventPhase;
259
  handledEventPhase: HandledEventPhase;
260
}
261

262
// Mouse event interface
263
interface IMouseEvent {
264
  altKey: boolean;
265
  ctrlKey: boolean;
266
  metaKey: boolean;
267
  shiftKey: boolean;
268
  button: number;
269
  buttons: number;
270
  pageX: number;
271
  pageY: number;
272
}
273
```
274

275
[Event Handling](./events.md)
276

277
### Styling & Colors
278

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

281
```typescript { .api }
282
// Platform color support for Windows brushes
283
function PlatformColor(...names: string[]): PlatformColor;
284

285
// Style sheet creation with Windows enhancements
286
interface StyleSheet {
287
  create<T>(styles: T): T;
288
  flatten<T>(style: T): T;
289
  compose<T>(style1: T, style2: T): T;
290
}
291

292
// Color processing utilities
293
function processColor(color: number | string): number | null;
294
```
295

296
[Styling System](./styling.md)
297

298
## Types
299

300
```typescript { .api }
301
// Event phase enumeration
302
enum EventPhase {
303
  None = 0,
304
  Capturing = 1,
305
  AtTarget = 2,
306
  Bubbling = 3,
307
}
308

309
enum HandledEventPhase {
310
  None = 0,
311
  Capturing = 1,
312
  AtTarget = 2,
313
  Bubbling = 3,
314
}
315

316
// Flyout placement options
317
type Placement =
318
  | 'top'
319
  | 'bottom'
320
  | 'left'
321
  | 'right'
322
  | 'full'
323
  | 'top-edge-aligned-left'
324
  | 'top-edge-aligned-right'
325
  | 'bottom-edge-aligned-left'
326
  | 'bottom-edge-aligned-right'
327
  | 'left-edge-aligned-top'
328
  | 'right-edge-aligned-top'
329
  | 'left-edge-aligned-bottom'
330
  | 'right-edge-aligned-bottom';
331

332
// Flyout show modes
333
type ShowMode =
334
  | 'auto'
335
  | 'standard'
336
  | 'transient'
337
  | 'transient-with-dismiss-on-pointer-move-away';
338

339
// Host component and instance types
340
type HostComponent<T> = React.AbstractComponent<T>;
341
type HostInstance = any;
342
```