0
# Core Components
1

2
Standard React Native components enhanced with Windows-specific features including keyboard navigation, mouse events, focus management, and accessibility improvements.
3

4
## Capabilities
5

6
### View Components
7

8
#### View
9

10
The fundamental building block for UI layout with Windows-specific extensions for enhanced interaction and accessibility.
11

12
```typescript { .api }
13
/**
14
 * Basic container component with Windows extensions for keyboard and mouse events
15
 */
16
interface ViewProps extends StandardViewProps {
17
  /** Tooltip text displayed on hover */
18
  tooltip?: string;
19
  /** Tab navigation order */
20
  tabIndex?: number;
21
  /** Controls focus ring visibility */
22
  enableFocusRing?: boolean;
23
  /** Mouse enter event handler */
24
  onMouseEnter?: (event: IMouseEvent) => void;
25
  /** Mouse leave event handler */
26
  onMouseLeave?: (event: IMouseEvent) => void;
27
  /** Keyboard down event handler */
28
  onKeyDown?: (event: IKeyboardEvent) => void;
29
  /** Keyboard up event handler */
30
  onKeyUp?: (event: IKeyboardEvent) => void;
31
  /** Capture phase keyboard down event handler */
32
  onKeyDownCapture?: (event: IKeyboardEvent) => void;
33
  /** Capture phase keyboard up event handler */
34
  onKeyUpCapture?: (event: IKeyboardEvent) => void;
35
  /** Array of key events to handle for onKeyDown */
36
  keyDownEvents?: string[];
37
  /** Array of key events to handle for onKeyUp */
38
  keyUpEvents?: string[];
39
}
40

41
declare const View: React.ComponentType<ViewProps>;
42
```
43

44
#### SafeAreaView
45

46
Container component that renders content within the safe area boundaries of a device.
47

48
```typescript { .api }
49
/**
50
 * Container component that renders content within safe area boundaries
51
 */
52
interface SafeAreaViewProps extends ViewProps {
53
  /** Controls which edges are considered safe */
54
  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;
55
}
56

57
declare const SafeAreaView: React.ComponentType<SafeAreaViewProps>;
58
```
59

60
#### ScrollView
61

62
Scrollable container component with Windows-specific scrolling behavior and keyboard navigation support.
63

64
```typescript { .api }
65
/**
66
 * Scrollable container with Windows scrolling behavior and keyboard support
67
 */
68
interface ScrollViewProps extends ViewProps {
69
  /** Controls horizontal scrolling */
70
  horizontal?: boolean;
71
  /** Content container style */
72
  contentContainerStyle?: ViewStyle;
73
  /** Shows horizontal scroll indicator */
74
  showsHorizontalScrollIndicator?: boolean;
75
  /** Shows vertical scroll indicator */
76
  showsVerticalScrollIndicator?: boolean;
77
  /** Scroll event handler */
78
  onScroll?: (event: ScrollEvent) => void;
79
  /** Determines when scroll indicators fade */
80
  indicatorStyle?: 'default' | 'black' | 'white';
81
  /** Controls keyboard handling */
82
  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
83
  /** Scroll to end on content size change */
84
  scrollToEnd?: boolean;
85
  /** Enables scroll to top on status bar tap */
86
  scrollsToTop?: boolean;
87
  /** Minimum zoom scale */
88
  minimumZoomScale?: number;
89
  /** Maximum zoom scale */
90
  maximumZoomScale?: number;
91
  /** Current zoom scale */
92
  zoomScale?: number;
93
  /** Controls bounce behavior */
94
  bounces?: boolean;
95
}
96

97
declare const ScrollView: React.ComponentType<ScrollViewProps>;
98
```
99

100
### Text Components
101

102
#### Text
103

104
Text display component with Windows tooltip support and enhanced accessibility.
105

106
```typescript { .api }
107
/**
108
 * Text display component with Windows tooltip and accessibility support
109
 */
110
interface TextProps extends StandardTextProps {
111
  /** Tooltip text displayed on hover */
112
  tooltip?: string;
113
  /** Number of lines to display */
114
  numberOfLines?: number;
115
  /** Text selection behavior */
116
  selectable?: boolean;
117
  /** Ellipsize mode for overflow text */
118
  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
119
  /** Controls text highlighting */
120
  allowFontScaling?: boolean;
121
  /** Maximum font size multiplier */
122
  maxFontSizeMultiplier?: number;
123
  /** Minimum font scale */
124
  minimumFontScale?: number;
125
  /** Text press handler */
126
  onPress?: (event: PressEvent) => void;
127
  /** Long press handler */
128
  onLongPress?: (event: PressEvent) => void;
129
}
130

131
declare const Text: React.ComponentType<TextProps>;
132
```
133

134
#### TextInput
135

136
Text input component with enhanced Windows keyboard navigation and input handling.
137

138
```typescript { .api }
139
/**
140
 * Text input with Windows keyboard navigation and input handling
141
 */
142
interface TextInputProps extends ViewProps {
143
  /** Input value */
144
  value?: string;
145
  /** Default value */
146
  defaultValue?: string;
147
  /** Placeholder text */
148
  placeholder?: string;
149
  /** Placeholder text color */
150
  placeholderTextColor?: string;
151
  /** Controls editability */
152
  editable?: boolean;
153
  /** Maximum character length */
154
  maxLength?: number;
155
  /** Multiline input support */
156
  multiline?: boolean;
157
  /** Number of visible lines */
158
  numberOfLines?: number;
159
  /** Auto capitalize behavior */
160
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
161
  /** Auto correction */
162
  autoCorrect?: boolean;
163
  /** Auto focus on mount */
164
  autoFocus?: boolean;
165
  /** Text change handler */
166
  onChangeText?: (text: string) => void;
167
  /** Submit editing handler */
168
  onSubmitEditing?: (event: TextInputSubmitEditingEvent) => void;
169
  /** Focus handler */
170
  onFocus?: (event: TextInputFocusEvent) => void;
171
  /** Blur handler */
172
  onBlur?: (event: TextInputFocusEvent) => void;
173
  /** Selection change handler */
174
  onSelectionChange?: (event: TextInputSelectionChangeEvent) => void;
175
  /** Keyboard type */
176
  keyboardType?: KeyboardType;
177
  /** Return key type */
178
  returnKeyType?: ReturnKeyType;
179
  /** Secure text entry */
180
  secureTextEntry?: boolean;
181
  /** Text content type */
182
  textContentType?: TextContentType;
183
  /** Password rules */
184
  passwordRules?: string;
185
}
186

187
declare const TextInput: React.ComponentType<TextInputProps>;
188
```
189

190
### Button & Touch Components
191

192
#### Button
193

194
Basic button component with Windows styling and keyboard support.
195

196
```typescript { .api }
197
/**
198
 * Basic button component with Windows styling
199
 */
200
interface ButtonProps {
201
  /** Button title text */
202
  title: string;
203
  /** Press handler */
204
  onPress: (event: PressEvent) => void;
205
  /** Button color */
206
  color?: string;
207
  /** Disabled state */
208
  disabled?: boolean;
209
  /** Accessibility label */
210
  accessibilityLabel?: string;
211
  /** Test ID for testing */
212
  testID?: string;
213
}
214

215
declare const Button: React.ComponentType<ButtonProps>;
216
```
217

218
#### Pressable
219

220
Modern touch handling component with comprehensive event support and state management.
221

222
```typescript { .api }
223
/**
224
 * Modern touch handling with comprehensive event support
225
 */
226
interface PressableProps extends ViewProps {
227
  /** Press handler */
228
  onPress?: (event: PressEvent) => void;
229
  /** Long press handler */
230
  onLongPress?: (event: PressEvent) => void;
231
  /** Press in handler */
232
  onPressIn?: (event: PressEvent) => void;
233
  /** Press out handler */
234
  onPressOut?: (event: PressEvent) => void;
235
  /** Hover in handler */
236
  onHoverIn?: (event: MouseEvent) => void;
237
  /** Hover out handler */
238
  onHoverOut?: (event: MouseEvent) => void;
239
  /** Focus handler */
240
  onFocus?: (event: FocusEvent) => void;
241
  /** Blur handler */
242
  onBlur?: (event: FocusEvent) => void;
243
  /** Disabled state */
244
  disabled?: boolean;
245
  /** Hit slop for touch area */
246
  hitSlop?: Insets;
247
  /** Delay before long press */
248
  delayLongPress?: number;
249
  /** Style function based on interaction state */
250
  style?: ViewStyle | ((state: PressableStateCallbackType) => ViewStyle);
251
  /** Children function for state-based rendering */
252
  children?: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode);
253
}
254

255
interface PressableStateCallbackType {
256
  pressed: boolean;
257
  hovered: boolean;
258
  focused: boolean;
259
}
260

261
declare const Pressable: React.ComponentType<PressableProps>;
262
```
263

264
#### Touch Components
265

266
Legacy touch components with Windows enhancements.
267

268
```typescript { .api }
269
/**
270
 * Touch components with highlight, opacity, and native feedback
271
 */
272
interface TouchableHighlightProps extends ViewProps {
273
  onPress?: (event: PressEvent) => void;
274
  onPressIn?: (event: PressEvent) => void;
275
  onPressOut?: (event: PressEvent) => void;
276
  onLongPress?: (event: PressEvent) => void;
277
  disabled?: boolean;
278
  activeOpacity?: number;
279
  underlayColor?: string;
280
  style?: ViewStyle;
281
  hitSlop?: Insets;
282
  delayPressIn?: number;
283
  delayPressOut?: number;
284
  delayLongPress?: number;
285
}
286

287
interface TouchableOpacityProps extends ViewProps {
288
  activeOpacity?: number;
289
  onPress?: (event: PressEvent) => void;
290
  onLongPress?: (event: PressEvent) => void;
291
  disabled?: boolean;
292
  hitSlop?: Insets;
293
}
294

295
interface TouchableWithoutFeedbackProps extends ViewProps {
296
  onPress?: (event: PressEvent) => void;
297
  onLongPress?: (event: PressEvent) => void;
298
  disabled?: boolean;
299
  hitSlop?: Insets;
300
}
301

302
interface TouchableNativeFeedbackProps extends ViewProps {
303
  onPress?: (event: PressEvent) => void;
304
  onLongPress?: (event: PressEvent) => void;
305
  background?: any;
306
  disabled?: boolean;
307
  hitSlop?: Insets;
308
  useForeground?: boolean;
309
}
310

311
declare const TouchableHighlight: React.ComponentType<TouchableHighlightProps>;
312
declare const TouchableOpacity: React.ComponentType<TouchableOpacityProps>;
313
declare const TouchableWithoutFeedback: React.ComponentType<TouchableWithoutFeedbackProps>;
314
declare const TouchableNativeFeedback: React.ComponentType<TouchableNativeFeedbackProps>;
315
```
316

317
### List Components
318

319
#### FlatList
320

321
High-performance list component for rendering large datasets efficiently.
322

323
```typescript { .api }
324
/**
325
 * High-performance list component with virtualization
326
 */
327
interface FlatListProps<ItemT> extends ScrollViewProps {
328
  /** Array of data items */
329
  data: ItemT[] | null | undefined;
330
  /** Function to render each item */
331
  renderItem: ({ item, index }: { item: ItemT; index: number }) => React.ReactElement;
332
  /** Function to extract unique key for each item */
333
  keyExtractor?: (item: ItemT, index: number) => string;
334
  /** Number of items to render initially */
335
  initialNumToRender?: number;
336
  /** Component to render when list is empty */
337
  ListEmptyComponent?: React.ComponentType | React.ReactElement | null;
338
  /** Component to render at the top */
339
  ListHeaderComponent?: React.ComponentType | React.ReactElement | null;
340
  /** Component to render at the bottom */
341
  ListFooterComponent?: React.ComponentType | React.ReactElement | null;
342
  /** Separator component */
343
  ItemSeparatorComponent?: React.ComponentType | null;
344
  /** Refresh control */
345
  refreshControl?: React.ReactElement;
346
  /** Pull to refresh handler */
347
  onRefresh?: () => void;
348
  /** Currently refreshing */
349
  refreshing?: boolean;
350
  /** End reached handler */
351
  onEndReached?: (info: { distanceFromEnd: number }) => void;
352
  /** Threshold for onEndReached */
353
  onEndReachedThreshold?: number;
354
  /** Scroll to item programmatically */
355
  scrollToIndex?: (params: { index: number; animated?: boolean; viewPosition?: number }) => void;
356
  /** Get item layout for optimization */
357
  getItemLayout?: (data: ItemT[] | null | undefined, index: number) => { length: number; offset: number; index: number };
358
}
359

360
declare const FlatList: React.ComponentType<FlatListProps<any>>;
361
```
362

363
#### SectionList
364

365
Sectioned list component for grouped data display.
366

367
```typescript { .api }
368
/**
369
 * Sectioned list component for grouped data
370
 */
371
interface SectionListProps<ItemT, SectionT> extends ScrollViewProps {
372
  /** Array of sections with data */
373
  sections: SectionT[];
374
  /** Function to render each item */
375
  renderItem: ({ item, index, section }: { item: ItemT; index: number; section: SectionT }) => React.ReactElement;
376
  /** Function to render section headers */
377
  renderSectionHeader?: ({ section }: { section: SectionT }) => React.ReactElement | null;
378
  /** Function to render section footers */
379
  renderSectionFooter?: ({ section }: { section: SectionT }) => React.ReactElement | null;
380
  /** Function to extract unique key for each item */
381
  keyExtractor?: (item: ItemT, index: number) => string;
382
  /** Sticky section headers */
383
  stickySectionHeadersEnabled?: boolean;
384
  /** Component to render when list is empty */
385
  ListEmptyComponent?: React.ComponentType | React.ReactElement | null;
386
}
387

388
declare const SectionList: React.ComponentType<SectionListProps<any, any>>;
389
```
390

391
### Image Components
392

393
#### Image
394

395
Image display component with Windows-specific loading and caching behavior.
396

397
```typescript { .api }
398
/**
399
 * Image display component with loading and caching
400
 */
401
interface ImageProps extends ViewProps {
402
  /** Image source */
403
  source: ImageSource;
404
  /** Default source for fallback */
405
  defaultSource?: ImageSource;
406
  /** Loading indicator source */
407
  loadingIndicatorSource?: ImageSource;
408
  /** Resize mode */
409
  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
410
  /** Resize method */
411
  resizeMethod?: 'auto' | 'resize' | 'scale';
412
  /** Load start handler */
413
  onLoadStart?: () => void;
414
  /** Load handler */
415
  onLoad?: (event: ImageLoadEvent) => void;
416
  /** Load end handler */
417
  onLoadEnd?: () => void;
418
  /** Error handler */
419
  onError?: (error: ImageErrorEvent) => void;
420
  /** Progress handler */
421
  onProgress?: (event: ImageProgressEvent) => void;
422
  /** Controls image caching */
423
  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached';
424
  /** Tint color for images */
425
  tintColor?: string;
426
  /** Accessibility label */
427
  accessibilityLabel?: string;
428
  /** Test ID */
429
  testID?: string;
430
}
431

432
interface ImageSource {
433
  uri?: string;
434
  headers?: { [key: string]: string };
435
  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached';
436
  width?: number;
437
  height?: number;
438
  scale?: number;
439
}
440

441
declare const Image: React.ComponentType<ImageProps>;
442
```
443

444
#### ImageBackground
445

446
Component that renders an image as a background with child content overlay.
447

448
```typescript { .api }
449
/**
450
 * Image background component with child content overlay
451
 */
452
interface ImageBackgroundProps extends ImageProps {
453
  /** Image style */
454
  imageStyle?: ViewStyle;
455
  /** Children to render over the image */
456
  children?: React.ReactNode;
457
}
458

459
declare const ImageBackground: React.ComponentType<ImageBackgroundProps>;
460
```
461

462
### Control Components
463

464
#### Switch
465

466
Toggle switch component with Windows styling and accessibility.
467

468
```typescript { .api }
469
/**
470
 * Toggle switch component with Windows styling
471
 */
472
interface SwitchProps extends ViewProps {
473
  /** Switch value */
474
  value?: boolean;
475
  /** Disabled state */
476
  disabled?: boolean;
477
  /** Value change handler */
478
  onValueChange?: (value: boolean) => void;
479
  /** Track color for enabled state */
480
  trackColor?: { false?: string; true?: string };
481
  /** Thumb color */
482
  thumbColor?: string;
483
  /** iOS thumb color */
484
  ios_backgroundColor?: string;
485
}
486

487
declare const Switch: React.ComponentType<SwitchProps>;
488
```
489

490
#### ActivityIndicator
491

492
Loading indicator component with Windows-specific styling.
493

494
```typescript { .api }
495
/**
496
 * Loading indicator with Windows styling
497
 */
498
interface ActivityIndicatorProps extends ViewProps {
499
  /** Indicator color */
500
  color?: string;
501
  /** Indicator size */
502
  size?: 'small' | 'large' | number;
503
  /** Animation state */
504
  animating?: boolean;
505
  /** Hides when not animating */
506
  hidesWhenStopped?: boolean;
507
}
508

509
declare const ActivityIndicator: React.ComponentType<ActivityIndicatorProps>;
510
```
511

512
#### RefreshControl
513

514
Pull-to-refresh control component for scroll views.
515

516
```typescript { .api }
517
/**
518
 * Pull-to-refresh control for scroll views
519
 */
520
interface RefreshControlProps {
521
  /** Currently refreshing */
522
  refreshing: boolean;
523
  /** Refresh handler */
524
  onRefresh?: () => void;
525
  /** Refresh indicator color */
526
  color?: string;
527
  /** Refresh indicator colors array */
528
  colors?: string[];
529
  /** Progress background color */
530
  progressBackgroundColor?: string;
531
  /** Progress view offset */
532
  progressViewOffset?: number;
533
  /** Refresh indicator size */
534
  size?: 'default' | 'large';
535
  /** Tint color */
536
  tintColor?: string;
537
  /** Title text */
538
  title?: string;
539
  /** Title color */
540
  titleColor?: string;
541
}
542

543
declare const RefreshControl: React.ComponentType<RefreshControlProps>;
544
```
545

546
### Layout Components
547

548
#### Modal
549

550
Modal dialog component with Windows title bar support and enhanced accessibility.
551

552
```typescript { .api }
553
/**
554
 * Modal dialog component with Windows title bar support
555
 */
556
interface ModalProps extends ViewProps {
557
  /** Modal visibility */
558
  visible?: boolean;
559
  /** Animation type */
560
  animationType?: 'none' | 'slide' | 'fade';
561
  /** Transparent background */
562
  transparent?: boolean;
563
  /** Hardware back button handling */
564
  onRequestClose?: () => void;
565
  /** Show event handler */
566
  onShow?: () => void;
567
  /** Dismiss event handler */
568
  onDismiss?: () => void;
569
  /** Window title (Windows specific) */
570
  title?: string;
571
  /** Presentation style */
572
  presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen';
573
  /** Supported orientations */
574
  supportedOrientations?: Orientation[];
575
  /** Status bar translucent */
576
  statusBarTranslucent?: boolean;
577
}
578

579
declare const Modal: React.ComponentType<ModalProps>;
580
```
581

582
#### KeyboardAvoidingView
583

584
Container that adjusts its layout to avoid the on-screen keyboard.
585

586
```typescript { .api }
587
/**
588
 * Container that adjusts layout to avoid keyboard
589
 */
590
interface KeyboardAvoidingViewProps extends ViewProps {
591
  /** Behavior type */
592
  behavior?: 'height' | 'position' | 'padding';
593
  /** Content container style */
594
  contentContainerStyle?: ViewStyle;
595
  /** Keyboard vertical offset */
596
  keyboardVerticalOffset?: number;
597
}
598

599
declare const KeyboardAvoidingView: React.ComponentType<KeyboardAvoidingViewProps>;
600
```
601

602
#### StatusBar
603

604
System status bar control component.
605

606
```typescript { .api }
607
/**
608
 * System status bar control component
609
 */
610
interface StatusBarProps {
611
  /** Status bar visibility */
612
  hidden?: boolean;
613
  /** Background color */
614
  backgroundColor?: string;
615
  /** Bar style */
616
  barStyle?: 'default' | 'light-content' | 'dark-content';
617
  /** Translucent status bar */
618
  translucent?: boolean;
619
  /** Network activity indicator */
620
  networkActivityIndicatorVisible?: boolean;
621
}
622

623
declare const StatusBar: React.ComponentType<StatusBarProps>;
624
```
625

626
#### VirtualizedList
627

628
Base component for efficiently rendering large datasets.
629

630
```typescript { .api }
631
/**
632
 * Base component for efficiently rendering large datasets
633
 */
634
interface VirtualizedListProps<ItemT> extends ViewProps {
635
  /** Data to render */
636
  data: ReadonlyArray<ItemT> | null | undefined;
637
  /** Item renderer function */
638
  renderItem: (info: { item: ItemT; index: number }) => React.ReactElement | null;
639
  /** Key extractor function */
640
  keyExtractor?: (item: ItemT, index: number) => string;
641
  /** Initial number of items to render */
642
  initialNumToRender?: number;
643
  /** Maximum items to render per batch */
644
  maxToRenderPerBatch?: number;
645
  /** Update cell batching period */
646
  updateCellsBatchingPeriod?: number;
647
  /** Window size */
648
  windowSize?: number;
649
  /** Inverted list */
650
  inverted?: boolean;
651
  /** Horizontal orientation */
652
  horizontal?: boolean;
653
}
654

655
declare const VirtualizedList: React.ComponentType<VirtualizedListProps<any>>;
656
```
657

658
### Accessibility
659

660
#### AccessibilityInfo
661

662
API for querying and managing accessibility features.
663

664
```typescript { .api }
665
/**
666
 * Accessibility information and management API
667
 */
668
interface AccessibilityInfo {
669
  /** Check if screen reader is enabled */
670
  isScreenReaderEnabled(): Promise<boolean>;
671
  /** Announce message to screen reader */
672
  announceForAccessibility(message: string): void;
673
  /** Set accessibility focus */
674
  setAccessibilityFocus(reactTag: number): void;
675
  /** Add event listener */
676
  addEventListener(
677
    eventName: 'screenReaderChanged' | 'reduceMotionChanged' | 'reduceTransparencyChanged',
678
    handler: (isEnabled: boolean) => void
679
  ): void;
680
  /** Remove event listener */
681
  removeEventListener(
682
    eventName: 'screenReaderChanged' | 'reduceMotionChanged' | 'reduceTransparencyChanged',
683
    handler: (isEnabled: boolean) => void
684
  ): void;
685
}
686

687
declare const AccessibilityInfo: AccessibilityInfo;
688
```
689

690
## Types
691

692
```typescript { .api }
693
// Mouse event interface
694
interface IMouseEvent {
695
  altKey: boolean;
696
  ctrlKey: boolean;
697
  metaKey: boolean;
698
  shiftKey: boolean;
699
  button: number;
700
  buttons: number;
701
  pageX: number;
702
  pageY: number;
703
  target: any;
704
  timeStamp: number;
705
}
706

707
// Keyboard event interface
708
interface IKeyboardEvent {
709
  altKey: boolean;
710
  ctrlKey: boolean;
711
  metaKey: boolean;
712
  shiftKey: boolean;
713
  key: string;
714
  code: string;
715
  keyCode: number;
716
  which: number;
717
  target: any;
718
  timeStamp: number;
719
  eventPhase: EventPhase;
720
  handledEventPhase: HandledEventPhase;
721
}
722

723
// Standard event interfaces
724
interface PressEvent {
725
  nativeEvent: {
726
    pageX: number;
727
    pageY: number;
728
    target: number;
729
    timestamp: number;
730
  };
731
}
732

733
interface FocusEvent {
734
  nativeEvent: {
735
    target: number;
736
  };
737
}
738

739
// Layout and dimension types
740
interface Insets {
741
  top?: number;
742
  left?: number;
743
  bottom?: number;
744
  right?: number;
745
}
746

747
interface Dimensions {
748
  width: number;
749
  height: number;
750
}
751

752
interface LayoutEvent {
753
  nativeEvent: {
754
    layout: {
755
      x: number;
756
      y: number;
757
      width: number;
758
      height: number;
759
    };
760
  };
761
}
762

763
// Input types
764
type KeyboardType =
765
  | 'default'
766
  | 'number-pad'
767
  | 'decimal-pad'
768
  | 'numeric'
769
  | 'email-address'
770
  | 'phone-pad'
771
  | 'url';
772

773
type ReturnKeyType =
774
  | 'done'
775
  | 'go'
776
  | 'next'
777
  | 'search'
778
  | 'send'
779
  | 'none'
780
  | 'previous'
781
  | 'default'
782
  | 'emergency-call'
783
  | 'google'
784
  | 'join'
785
  | 'route'
786
  | 'yahoo';
787

788
type TextContentType =
789
  | 'none'
790
  | 'URL'
791
  | 'addressCity'
792
  | 'addressCityAndState'
793
  | 'addressState'
794
  | 'countryName'
795
  | 'creditCardNumber'
796
  | 'emailAddress'
797
  | 'familyName'
798
  | 'fullStreetAddress'
799
  | 'givenName'
800
  | 'jobTitle'
801
  | 'location'
802
  | 'middleName'
803
  | 'name'
804
  | 'namePrefix'
805
  | 'nameSuffix'
806
  | 'nickname'
807
  | 'organizationName'
808
  | 'postalCode'
809
  | 'streetAddressLine1'
810
  | 'streetAddressLine2'
811
  | 'sublocality'
812
  | 'telephoneNumber'
813
  | 'username'
814
  | 'password'
815
  | 'newPassword'
816
  | 'oneTimeCode';
817

818
type Orientation =
819
  | 'portrait'
820
  | 'portrait-upside-down'
821
  | 'landscape'
822
  | 'landscape-left'
823
  | 'landscape-right';
824
```