0
# Windows Components
1
2
Native Windows components providing platform-specific functionality and UI patterns that integrate seamlessly with the Windows operating system and follow Windows design guidelines.
3
4
## Capabilities
5
6
### Flyout System
7
8
#### Flyout
9
10
Native Windows flyout component that provides contextual UI overlays with intelligent placement and automatic positioning relative to target elements.
11
12
```typescript { .api }
13
/**
14
* Native Windows flyout component for contextual UI overlays
15
* Provides intelligent placement and automatic positioning
16
*/
17
interface IFlyoutProps extends ViewProps {
18
/** Controls flyout visibility */
19
isOpen?: boolean;
20
/** Flyout placement relative to target */
21
placement?: Placement;
22
/** Target element to position flyout relative to */
23
target?: React.ReactNode;
24
/** Callback when flyout is dismissed */
25
onDismiss?: (isOpen: boolean) => void;
26
/** Enables light dismiss (click outside to close) */
27
isLightDismissEnabled?: boolean;
28
/** Automatically focus flyout when opened */
29
autoFocus?: boolean;
30
/** Shows overlay backdrop behind flyout */
31
isOverlayEnabled?: boolean;
32
/** Flyout show mode behavior */
33
showMode?: ShowMode;
34
/** Horizontal offset in pixels */
35
horizontalOffset?: number;
36
/** Vertical offset in pixels */
37
verticalOffset?: number;
38
/** Constrains flyout to root bounds */
39
shouldConstrainToRootBounds?: boolean;
40
}
41
42
declare const Flyout: React.ComponentType<IFlyoutProps>;
43
```
44
45
**Usage Examples:**
46
47
```typescript
48
import React, { useState } from 'react';
49
import { View, Text, Pressable, Flyout } from 'react-native-windows';
50
51
const FlyoutExample: React.FC = () => {
52
const [showFlyout, setShowFlyout] = useState(false);
53
54
return (
55
<View>
56
<Pressable onPress={() => setShowFlyout(true)}>
57
<Text>Show Menu</Text>
58
</Pressable>
59
60
<Flyout
61
isOpen={showFlyout}
62
onDismiss={() => setShowFlyout(false)}
63
placement="bottom-edge-aligned-left"
64
isLightDismissEnabled={true}
65
autoFocus={true}
66
target={
67
<View style={{ padding: 16, backgroundColor: 'white', borderRadius: 8 }}>
68
<Pressable onPress={() => console.log('Option 1')}>
69
<Text>Option 1</Text>
70
</Pressable>
71
<Pressable onPress={() => console.log('Option 2')}>
72
<Text>Option 2</Text>
73
</Pressable>
74
</View>
75
}
76
/>
77
</View>
78
);
79
};
80
```
81
82
### Icon System
83
84
#### Glyph
85
86
Windows glyph component for rendering font-based icons with Windows font integration and color support.
87
88
```typescript { .api }
89
/**
90
* Windows glyph component for font-based icons
91
* Integrates with Windows font system and supports color fonts
92
*/
93
interface GlyphProps extends ViewProps {
94
/** Font file URI or system font name */
95
fontUri: string;
96
/** Glyph character or Unicode value */
97
glyph: string;
98
/** Font size in device-independent pixels */
99
emSize?: number;
100
/** Enables color font rendering */
101
colorEnabled?: boolean;
102
/** Glyph styling properties */
103
style?: GlyphStyle;
104
}
105
106
interface GlyphStyle extends ViewStyle {
107
/** Glyph color */
108
color?: string;
109
/** Font weight */
110
fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
111
/** Font style */
112
fontStyle?: 'normal' | 'italic';
113
}
114
115
declare const Glyph: React.ComponentType<GlyphProps>;
116
```
117
118
**Usage Examples:**
119
120
```typescript
121
import React from 'react';
122
import { View, Glyph } from 'react-native-windows';
123
124
const GlyphExample: React.FC = () => {
125
return (
126
<View>
127
{/* Using Segoe MDL2 Assets font */}
128
<Glyph
129
fontUri="ms-appx:///Assets/Fonts/SegoeUI.ttf"
130
glyph=""
131
emSize={24}
132
style={{ color: '#0078d4' }}
133
/>
134
135
{/* Using system font with color support */}
136
<Glyph
137
fontUri="Segoe UI Emoji"
138
glyph="๐"
139
emSize={32}
140
colorEnabled={true}
141
/>
142
143
{/* Custom font glyph */}
144
<Glyph
145
fontUri="ms-appx:///Assets/Fonts/CustomIcons.ttf"
146
glyph="A"
147
emSize={20}
148
style={{
149
color: '#ff4444',
150
fontWeight: 'bold'
151
}}
152
/>
153
</View>
154
);
155
};
156
```
157
158
### Popup System
159
160
#### Popup
161
162
Windows popup component that provides lightweight contextual content display with automatic positioning and focus management.
163
164
```typescript { .api }
165
/**
166
* Windows popup component for lightweight contextual content
167
* Provides automatic positioning and focus management
168
*/
169
interface IPopupProps extends ViewProps {
170
/** Controls popup visibility */
171
isOpen?: boolean;
172
/** Target element to position popup relative to */
173
target?: React.ReactNode;
174
/** Callback when popup is dismissed */
175
onDismiss?: () => void;
176
/** Enables light dismiss behavior */
177
isLightDismissEnabled?: boolean;
178
/** Automatically focus popup when opened */
179
autoFocus?: boolean;
180
/** Horizontal offset in pixels */
181
horizontalOffset?: number;
182
/** Vertical offset in pixels */
183
verticalOffset?: number;
184
}
185
186
declare const Popup: React.ComponentType<IPopupProps>;
187
```
188
189
**Usage Examples:**
190
191
```typescript
192
import React, { useState } from 'react';
193
import { View, Text, Pressable, Popup } from 'react-native-windows';
194
195
const PopupExample: React.FC = () => {
196
const [showTooltip, setShowTooltip] = useState(false);
197
198
return (
199
<View>
200
<Pressable
201
onMouseEnter={() => setShowTooltip(true)}
202
onMouseLeave={() => setShowTooltip(false)}
203
>
204
<Text>Hover for tooltip</Text>
205
</Pressable>
206
207
<Popup
208
isOpen={showTooltip}
209
onDismiss={() => setShowTooltip(false)}
210
isLightDismissEnabled={false}
211
horizontalOffset={0}
212
verticalOffset={-5}
213
target={
214
<View style={{
215
backgroundColor: '#333',
216
padding: 8,
217
borderRadius: 4,
218
maxWidth: 200
219
}}>
220
<Text style={{ color: 'white', fontSize: 12 }}>
221
This is a helpful tooltip with additional information
222
</Text>
223
</View>
224
}
225
/>
226
</View>
227
);
228
};
229
```
230
231
### Enhanced Keyboard Support
232
233
#### supportKeyboard
234
235
Higher-order component that adds comprehensive keyboard navigation support to any component.
236
237
```typescript { .api }
238
/**
239
* Higher-order component for keyboard navigation support
240
* Adds comprehensive keyboard event handling and focus management
241
*/
242
function supportKeyboard<P extends Record<string, any>>(
243
WrappedComponent: React.ComponentType<P>
244
): React.ComponentType<P & IKeyboardProps>;
245
246
interface IKeyboardProps {
247
/** Keyboard event handler for key down events */
248
onKeyDown?: (args: IKeyboardEvent) => void;
249
/** Keyboard event handler for key down capture events */
250
onKeyDownCapture?: (args: IKeyboardEvent) => void;
251
/** Keyboard event handler for key up events */
252
onKeyUp?: (args: IKeyboardEvent) => void;
253
/** Keyboard event handler for key up capture events */
254
onKeyUpCapture?: (args: IKeyboardEvent) => void;
255
/** Configuration for handled keyboard events (down) */
256
keyDownEvents?: IHandledKeyboardEvent[];
257
/** Configuration for handled keyboard events (up) */
258
keyUpEvents?: IHandledKeyboardEvent[];
259
}
260
261
declare const supportKeyboard: typeof supportKeyboard;
262
```
263
264
**Usage Examples:**
265
266
```typescript
267
import React from 'react';
268
import { View, Text, supportKeyboard } from 'react-native-windows';
269
270
// Create keyboard-enhanced custom component
271
const KeyboardView = supportKeyboard(View);
272
273
const KeyboardExample: React.FC = () => {
274
return (
275
<KeyboardView
276
tabIndex={0}
277
acceptsReturn={true}
278
onKeyDown={(event) => {
279
if (event.nativeEvent.key === 'Enter') {
280
console.log('Enter pressed!');
281
}
282
}}
283
onFocus={() => console.log('Focused')}
284
onBlur={() => console.log('Blurred')}
285
style={{
286
padding: 16,
287
backgroundColor: '#f0f0f0',
288
borderRadius: 4,
289
margin: 8
290
}}
291
>
292
<Text>Press Enter or Tab to interact</Text>
293
</KeyboardView>
294
);
295
};
296
```
297
298
## Legacy Components (Deprecated)
299
300
### DatePicker (Deprecated)
301
302
```typescript { .api }
303
/**
304
* @deprecated DatePicker has been removed from react-native-windows
305
* Use @react-native-community/datetimepicker instead
306
*/
307
declare const DatePicker: never;
308
```
309
310
### PickerWindows (Deprecated)
311
312
```typescript { .api }
313
/**
314
* @deprecated PickerWindows has been removed from react-native-windows
315
* Use @react-native-picker/picker instead
316
*/
317
declare const PickerWindows: never;
318
```
319
320
321
### ViewWindows (Alias)
322
323
```typescript { .api }
324
/**
325
* Alias for the standard View component
326
* Maintained for backwards compatibility
327
*/
328
declare const ViewWindows: typeof View;
329
```
330
331
## Types
332
333
```typescript { .api }
334
// Flyout placement options
335
type Placement =
336
| 'top'
337
| 'bottom'
338
| 'left'
339
| 'right'
340
| 'full'
341
| 'top-edge-aligned-left'
342
| 'top-edge-aligned-right'
343
| 'bottom-edge-aligned-left'
344
| 'bottom-edge-aligned-right'
345
| 'left-edge-aligned-top'
346
| 'right-edge-aligned-top'
347
| 'left-edge-aligned-bottom'
348
| 'right-edge-aligned-bottom';
349
350
// Flyout show modes
351
type ShowMode =
352
| 'auto' // System decides best show mode
353
| 'standard' // Standard flyout behavior
354
| 'transient' // Transient flyout, dismisses automatically
355
| 'transient-with-dismiss-on-pointer-move-away'; // Dismisses when pointer moves away
356
357
// Glyph style interface
358
interface GlyphStyle extends ViewStyle {
359
color?: string;
360
fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
361
fontStyle?: 'normal' | 'italic';
362
fontSize?: number;
363
}
364
365
// Windows-specific View properties
366
interface ViewPropsWindows extends ViewProps {
367
tooltip?: string;
368
tabIndex?: number;
369
enableFocusRing?: boolean;
370
onMouseEnter?: (event: IMouseEvent) => void;
371
onMouseLeave?: (event: IMouseEvent) => void;
372
onKeyDown?: (event: IKeyboardEvent) => void;
373
onKeyUp?: (event: IKeyboardEvent) => void;
374
onKeyDownCapture?: (event: IKeyboardEvent) => void;
375
onKeyUpCapture?: (event: IKeyboardEvent) => void;
376
keyDownEvents?: string[];
377
keyUpEvents?: string[];
378
}
379
380
type IViewWindowsProps = ViewPropsWindows;
381
type ViewWindows = View;
382
```
383
384
## Windows Component Design Patterns
385
386
### Flyout Usage Patterns
387
388
**Context Menus:**
389
```typescript
390
<Flyout
391
placement="bottom-edge-aligned-left"
392
showMode="standard"
393
isLightDismissEnabled={true}
394
target={menuContent}
395
/>
396
```
397
398
**Tooltips and Help:**
399
```typescript
400
<Flyout
401
placement="top"
402
showMode="transient"
403
isOverlayEnabled={false}
404
target={tooltipContent}
405
/>
406
```
407
408
**Form Validation:**
409
```typescript
410
<Flyout
411
placement="right-edge-aligned-top"
412
showMode="transient-with-dismiss-on-pointer-move-away"
413
isLightDismissEnabled={false}
414
target={errorMessage}
415
/>
416
```
417
418
### Glyph Integration
419
420
**System Icons:**
421
Use Segoe MDL2 Assets font for consistent Windows system icons.
422
423
**Custom Icons:**
424
Bundle custom font files and reference via ms-appx:/// URIs.
425
426
**Emoji Support:**
427
Enable colorEnabled for full emoji and color font support.
428
429
### Focus Management
430
431
**Tab Navigation:**
432
Use tabIndex to control keyboard navigation order across Windows components.
433
434
**Focus Rings:**
435
Enable enableFocusRing for visible focus indicators that follow Windows accessibility guidelines.
436
437
**Keyboard Shortcuts:**
438
Implement keyDownEvents arrays to handle specific key combinations efficiently.