0
# React Native Core Components
1

2
React Native provides a comprehensive set of built-in components for building mobile applications. These components compile to native UI elements on each platform.
3

4
## Installation
5

6
```bash
7
npm install react-native
8
```
9

10
## Basic Layout Components
11

12
### View
13

14
The fundamental building block for UI construction, providing layout with flexbox, styling, and touch handling.
15

16
```javascript { .api }
17
// ESM
18
import {View} from 'react-native';
19

20
// CommonJS
21
const {View} = require('react-native');
22

23
// Basic usage
24
<View style={{flex: 1, backgroundColor: 'blue'}}>
25
  <Text>Content inside view</Text>
26
</View>
27

28
// With touch handling
29
<View 
30
  style={styles.container}
31
  onTouchStart={(event) => console.log('Touch started')}
32
  onLayout={(event) => console.log('Layout:', event.nativeEvent.layout)}
33
>
34
  <Text>Touchable view</Text>
35
</View>
36
```
37

38
```typescript { .api }
39
interface ViewProps {
40
  // Layout
41
  style?: ViewStyle;
42
  
43
  // Accessibility
44
  accessible?: boolean;
45
  accessibilityLabel?: string;
46
  accessibilityRole?: AccessibilityRole;
47
  accessibilityState?: AccessibilityState;
48
  accessibilityValue?: AccessibilityValue;
49
  accessibilityActions?: AccessibilityActionInfo[];
50
  onAccessibilityAction?: (event: AccessibilityActionEvent) => void;
51
  
52
  // Touch handling
53
  onTouchStart?: (event: GestureResponderEvent) => void;
54
  onTouchMove?: (event: GestureResponderEvent) => void;
55
  onTouchEnd?: (event: GestureResponderEvent) => void;
56
  onTouchCancel?: (event: GestureResponderEvent) => void;
57
  
58
  // Layout events
59
  onLayout?: (event: LayoutEvent) => void;
60
  
61
  // Pointer events
62
  pointerEvents?: 'none' | 'box-none' | 'box-only' | 'auto';
63
  
64
  // Other
65
  children?: React.ReactNode;
66
  testID?: string;
67
  nativeID?: string;
68
}
69

70
interface ViewStyle {
71
  // Flexbox
72
  flex?: number;
73
  flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
74
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
75
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
76
  alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
77
  
78
  // Positioning
79
  position?: 'absolute' | 'relative';
80
  top?: number | string;
81
  left?: number | string;
82
  right?: number | string;
83
  bottom?: number | string;
84
  
85
  // Dimensions
86
  width?: number | string;
87
  height?: number | string;
88
  minWidth?: number | string;
89
  maxWidth?: number | string;
90
  minHeight?: number | string;
91
  maxHeight?: number | string;
92
  
93
  // Margin and padding
94
  margin?: number | string;
95
  marginTop?: number | string;
96
  marginRight?: number | string;
97
  marginBottom?: number | string;
98
  marginLeft?: number | string;
99
  marginHorizontal?: number | string;
100
  marginVertical?: number | string;
101
  
102
  padding?: number | string;
103
  paddingTop?: number | string;
104
  paddingRight?: number | string;
105
  paddingBottom?: number | string;
106
  paddingLeft?: number | string;
107
  paddingHorizontal?: number | string;
108
  paddingVertical?: number | string;
109
  
110
  // Appearance
111
  backgroundColor?: string;
112
  opacity?: number;
113
  
114
  // Border
115
  borderWidth?: number;
116
  borderTopWidth?: number;
117
  borderRightWidth?: number;
118
  borderBottomWidth?: number;
119
  borderLeftWidth?: number;
120
  borderColor?: string;
121
  borderTopColor?: string;
122
  borderRightColor?: string;
123
  borderBottomColor?: string;
124
  borderLeftColor?: string;
125
  borderRadius?: number;
126
  borderTopLeftRadius?: number;
127
  borderTopRightRadius?: number;
128
  borderBottomLeftRadius?: number;
129
  borderBottomRightRadius?: number;
130
  borderStyle?: 'solid' | 'dotted' | 'dashed';
131
  
132
  // Shadow (iOS)
133
  shadowColor?: string;
134
  shadowOffset?: {width: number; height: number};
135
  shadowOpacity?: number;
136
  shadowRadius?: number;
137
  
138
  // Elevation (Android)
139
  elevation?: number;
140
  
141
  // Transform
142
  transform?: TransformStyle[];
143
}
144
```
145

146
### SafeAreaView
147

148
A component that renders content within the safe area boundaries of a device, accounting for physical limitations like notches or home indicators.
149

150
```javascript { .api }
151
import {SafeAreaView} from 'react-native';
152

153
// Basic usage
154
<SafeAreaView style={{flex: 1}}>
155
  <View style={{flex: 1, backgroundColor: 'red'}}>
156
    <Text>Content respects safe areas</Text>
157
  </View>
158
</SafeAreaView>
159

160
// iOS-specific behavior
161
<SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
162
  <StatusBar barStyle="dark-content" />
163
  <NavigationHeader />
164
  <ScrollView>
165
    <Text>Main content</Text>
166
  </ScrollView>
167
</SafeAreaView>
168
```
169

170
```typescript { .api }
171
interface SafeAreaViewProps extends ViewProps {
172
  emulateUnlessSupported?: boolean; // iOS only
173
}
174
```
175

176
### ScrollView
177

178
A generic scrolling container that can host multiple components and views.
179

180
```javascript { .api }
181
import {ScrollView} from 'react-native';
182

183
// Basic vertical scrolling
184
<ScrollView style={{flex: 1}}>
185
  <View style={{height: 1000}}>
186
    <Text>Scrollable content</Text>
187
  </View>
188
</ScrollView>
189

190
// Horizontal scrolling
191
<ScrollView 
192
  horizontal={true}
193
  showsHorizontalScrollIndicator={false}
194
  pagingEnabled={true}
195
>
196
  <View style={{width: 300, height: 200}} />
197
  <View style={{width: 300, height: 200}} />
198
  <View style={{width: 300, height: 200}} />
199
</ScrollView>
200

201
// With pull-to-refresh
202
<ScrollView
203
  refreshControl={
204
    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
205
  }
206
>
207
  <Text>Pull to refresh</Text>
208
</ScrollView>
209

210
// Scroll methods
211
const scrollViewRef = useRef(null);
212

213
// Scroll to position
214
scrollViewRef.current?.scrollTo({x: 0, y: 100, animated: true});
215

216
// Scroll to end
217
scrollViewRef.current?.scrollToEnd({animated: true});
218
```
219

220
```typescript { .api }
221
interface ScrollViewProps extends ViewProps {
222
  // Scrolling behavior
223
  horizontal?: boolean;
224
  pagingEnabled?: boolean;
225
  scrollEnabled?: boolean;
226
  
227
  // Scroll indicators
228
  showsVerticalScrollIndicator?: boolean;
229
  showsHorizontalScrollIndicator?: boolean;
230
  
231
  // Content configuration
232
  contentContainerStyle?: ViewStyle;
233
  contentInset?: {top?: number; left?: number; bottom?: number; right?: number};
234
  contentOffset?: {x: number; y: number};
235
  
236
  // Bounce behavior
237
  bounces?: boolean;
238
  bouncesZoom?: boolean;
239
  alwaysBounceHorizontal?: boolean;
240
  alwaysBounceVertical?: boolean;
241
  
242
  // Zoom
243
  maximumZoomScale?: number;
244
  minimumZoomScale?: number;
245
  zoomScale?: number;
246
  
247
  // Keyboard
248
  keyboardDismissMode?: 'none' | 'interactive' | 'on-drag';
249
  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled';
250
  
251
  // Events
252
  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
253
  onScrollBeginDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
254
  onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
255
  onMomentumScrollBegin?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
256
  onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
257
  
258
  // Refresh control
259
  refreshControl?: React.ReactElement<RefreshControlProps>;
260
  
261
  // Scroll methods (via ref)
262
  scrollTo?: (options?: {x?: number; y?: number; animated?: boolean}) => void;
263
  scrollToEnd?: (options?: {animated?: boolean}) => void;
264
}
265

266
interface NativeScrollEvent {
267
  contentOffset: {x: number; y: number};
268
  contentSize: {width: number; height: number};
269
  layoutMeasurement: {width: number; height: number};
270
  zoomScale?: number;
271
}
272
```
273

274
## Text Components
275

276
### Text
277

278
A component for displaying text with styling and touch handling capabilities.
279

280
```javascript { .api }
281
import {Text} from 'react-native';
282

283
// Basic text
284
<Text>Simple text</Text>
285

286
// Styled text
287
<Text style={{fontSize: 18, color: 'blue', fontWeight: 'bold'}}>
288
  Styled text
289
</Text>
290

291
// Nested text with different styles
292
<Text>
293
  I am bold 
294
  <Text style={{fontWeight: 'bold'}}>and red</Text>
295
  <Text style={{color: 'red'}}> text</Text>
296
</Text>
297

298
// Touchable text
299
<Text 
300
  onPress={() => console.log('Text pressed')}
301
  style={{color: 'blue', textDecorationLine: 'underline'}}
302
>
303
  Clickable text
304
</Text>
305

306
// Text with number of lines
307
<Text numberOfLines={2} ellipsizeMode="tail">
308
  This is a very long text that will be truncated after two lines with ellipsis at the end
309
</Text>
310

311
// Selectable text
312
<Text selectable={true}>
313
  This text can be selected and copied
314
</Text>
315
```
316

317
```typescript { .api }
318
interface TextProps {
319
  // Content
320
  children?: React.ReactNode;
321
  
322
  // Styling
323
  style?: TextStyle;
324
  
325
  // Text behavior
326
  numberOfLines?: number;
327
  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
328
  selectable?: boolean;
329
  adjustsFontSizeToFit?: boolean; // iOS
330
  minimumFontScale?: number; // iOS
331
  
332
  // Touch handling
333
  onPress?: (event: GestureResponderEvent) => void;
334
  onLongPress?: (event: GestureResponderEvent) => void;
335
  
336
  // Layout
337
  onLayout?: (event: LayoutEvent) => void;
338
  
339
  // Text selection (iOS)
340
  onTextLayout?: (event: NativeSyntheticEvent<TextLayoutEvent>) => void;
341
  
342
  // Accessibility
343
  accessible?: boolean;
344
  accessibilityLabel?: string;
345
  accessibilityRole?: AccessibilityRole;
346
  
347
  // Other
348
  testID?: string;
349
  nativeID?: string;
350
  allowFontScaling?: boolean;
351
  maxFontSizeMultiplier?: number;
352
}
353

354
interface TextStyle {
355
  // Font
356
  fontFamily?: string;
357
  fontSize?: number;
358
  fontStyle?: 'normal' | 'italic';
359
  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
360
  fontVariant?: FontVariant[];
361
  
362
  // Color
363
  color?: string;
364
  
365
  // Text layout
366
  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
367
  textAlignVertical?: 'auto' | 'top' | 'bottom' | 'center'; // Android
368
  textDecorationLine?: 'none' | 'underline' | 'line-through' | 'underline line-through';
369
  textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed';
370
  textDecorationColor?: string;
371
  textShadowColor?: string;
372
  textShadowOffset?: {width: number; height: number};
373
  textShadowRadius?: number;
374
  textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
375
  
376
  // Line spacing
377
  lineHeight?: number;
378
  letterSpacing?: number;
379
  
380
  // Writing direction
381
  writingDirection?: 'auto' | 'ltr' | 'rtl';
382
  
383
  // Include layout style properties
384
  includeFontPadding?: boolean; // Android
385
  
386
  // Text shadow
387
  textShadowColor?: string;
388
  textShadowOffset?: {width: number; height: number};
389
  textShadowRadius?: number;
390
}
391
```
392

393
## Image Components
394

395
### Image
396

397
A component for displaying various types of images including network images, static resources, and base64 images.
398

399
```javascript { .api }
400
import {Image} from 'react-native';
401

402
// Static image
403
<Image 
404
  source={require('./assets/image.png')}
405
  style={{width: 100, height: 100}}
406
/>
407

408
// Network image
409
<Image 
410
  source={{uri: 'https://example.com/image.jpg'}}
411
  style={{width: 200, height: 200}}
412
  onLoad={() => console.log('Image loaded')}
413
  onError={(error) => console.log('Image error:', error)}
414
/>
415

416
// Base64 image
417
<Image
418
  source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'}}
419
  style={{width: 50, height: 50}}
420
/>
421

422
// Image with resize modes
423
<Image
424
  source={{uri: 'https://example.com/image.jpg'}}
425
  style={{width: 300, height: 200}}
426
  resizeMode="contain"
427
/>
428

429
// Network image with headers
430
<Image
431
  source={{
432
    uri: 'https://example.com/image.jpg',
433
    headers: {
434
      'Authorization': 'Bearer token',
435
    },
436
  }}
437
  style={{width: 100, height: 100}}
438
/>
439

440
// Get image size
441
Image.getSize(
442
  'https://example.com/image.jpg',
443
  (width, height) => {
444
    console.log('Image size:', width, height);
445
  },
446
  (error) => {
447
    console.error('Failed to get image size:', error);
448
  }
449
);
450

451
// Preload images
452
Image.prefetch('https://example.com/image.jpg')
453
  .then(() => console.log('Image cached'))
454
  .catch((error) => console.log('Cache error:', error));
455
```
456

457
```typescript { .api }
458
interface ImageProps {
459
  // Source
460
  source: ImageSourcePropType;
461
  
462
  // Styling
463
  style?: ImageStyle;
464
  
465
  // Resize behavior
466
  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
467
  resizeMethod?: 'auto' | 'resize' | 'scale'; // Android
468
  
469
  // Loading behavior
470
  loadingIndicatorSource?: ImageSourcePropType;
471
  defaultSource?: ImageSourcePropType; // iOS
472
  
473
  // Events
474
  onLoad?: (event: NativeSyntheticEvent<ImageLoadEvent>) => void;
475
  onLoadStart?: () => void;
476
  onLoadEnd?: () => void;
477
  onError?: (error: NativeSyntheticEvent<ImageErrorEvent>) => void;
478
  onProgress?: (event: NativeSyntheticEvent<ImageProgressEvent>) => void;
479
  
480
  // Layout
481
  onLayout?: (event: LayoutEvent) => void;
482
  
483
  // Accessibility
484
  accessible?: boolean;
485
  accessibilityLabel?: string;
486
  
487
  // Other
488
  testID?: string;
489
  blurRadius?: number;
490
  capInsets?: EdgeInsets; // iOS
491
  tintColor?: string;
492
  
493
  // iOS specific
494
  fadeDuration?: number; // Android
495
}
496

497
interface ImageSourcePropType {
498
  uri?: string;
499
  bundle?: string;
500
  method?: string;
501
  headers?: {[key: string]: string};
502
  body?: string;
503
  cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached'; // iOS
504
  width?: number;
505
  height?: number;
506
  scale?: number;
507
}
508

509
interface ImageStyle extends ViewStyle {
510
  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
511
  tintColor?: string;
512
  overlayColor?: string; // Android
513
}
514

515
// Static methods
516
interface ImageStatic {
517
  getSize(
518
    uri: string,
519
    success: (width: number, height: number) => void,
520
    failure?: (error: any) => void
521
  ): void;
522
  
523
  getSizeWithHeaders(
524
    uri: string,
525
    headers: {[key: string]: string},
526
    success: (width: number, height: number) => void,
527
    failure?: (error: any) => void
528
  ): void;
529
  
530
  prefetch(url: string): Promise<boolean>;
531
  
532
  queryCache(urls: string[]): Promise<{[url: string]: 'memory' | 'disk'}>;
533
}
534
```
535

536
### ImageBackground
537

538
A component for rendering an image as a background with child components overlaid on top.
539

540
```javascript { .api }
541
import {ImageBackground} from 'react-native';
542

543
// Basic usage
544
<ImageBackground
545
  source={{uri: 'https://example.com/background.jpg'}}
546
  style={{width: '100%', height: 200}}
547
>
548
  <Text style={{color: 'white', fontSize: 24}}>
549
    Text over background image
550
  </Text>
551
</ImageBackground>
552

553
// With local image
554
<ImageBackground
555
  source={require('./assets/background.png')}
556
  style={styles.backgroundImage}
557
  resizeMode="cover"
558
>
559
  <View style={styles.overlay}>
560
    <Text style={styles.title}>Welcome</Text>
561
    <Button title="Get Started" onPress={handlePress} />
562
  </View>
563
</ImageBackground>
564

565
// With image loading states
566
<ImageBackground
567
  source={{uri: imageUrl}}
568
  style={styles.container}
569
  onLoad={() => setImageLoaded(true)}
570
  onError={() => setImageError(true)}
571
>
572
  {!imageLoaded && <ActivityIndicator size="large" />}
573
  <Text>Content over background</Text>
574
</ImageBackground>
575
```
576

577
```typescript { .api }
578
interface ImageBackgroundProps extends ImageProps {
579
  children?: React.ReactNode;
580
  imageStyle?: ImageStyle;
581
  imageRef?: React.Ref<Image>;
582
}
583
```
584

585
## Input Components
586

587
### TextInput
588

589
A foundational component for inputting text into the app via a keyboard.
590

591
```javascript { .api }
592
import {TextInput} from 'react-native';
593

594
// Basic text input
595
const [text, setText] = useState('');
596

597
<TextInput
598
  style={{height: 40, borderColor: 'gray', borderWidth: 1, padding: 10}}
599
  onChangeText={setText}
600
  value={text}
601
  placeholder="Enter text here"
602
/>
603

604
// Multiline text input
605
<TextInput
606
  style={{height: 100, textAlignVertical: 'top'}}
607
  multiline={true}
608
  numberOfLines={4}
609
  onChangeText={setText}
610
  value={text}
611
  placeholder="Enter multiple lines"
612
/>
613

614
// Secure text input (password)
615
<TextInput
616
  style={styles.input}
617
  secureTextEntry={true}
618
  onChangeText={setPassword}
619
  value={password}
620
  placeholder="Password"
621
/>
622

623
// Numeric input
624
<TextInput
625
  style={styles.input}
626
  keyboardType="numeric"
627
  onChangeText={setNumber}
628
  value={number}
629
  placeholder="Enter number"
630
/>
631

632
// Email input
633
<TextInput
634
  style={styles.input}
635
  keyboardType="email-address"
636
  autoCapitalize="none"
637
  autoComplete="email"
638
  onChangeText={setEmail}
639
  value={email}
640
  placeholder="Email address"
641
/>
642

643
// Input with submit handling
644
<TextInput
645
  style={styles.input}
646
  onChangeText={setText}
647
  value={text}
648
  onSubmitEditing={handleSubmit}
649
  returnKeyType="send"
650
  blurOnSubmit={true}
651
/>
652

653
// Focus management
654
const inputRef = useRef(null);
655

656
// Focus the input
657
inputRef.current?.focus();
658

659
// Blur the input  
660
inputRef.current?.blur();
661

662
// Clear the input
663
inputRef.current?.clear();
664
```
665

666
```typescript { .api }
667
interface TextInputProps {
668
  // Value and change handling
669
  value?: string;
670
  defaultValue?: string;
671
  onChangeText?: (text: string) => void;
672
  onEndEditing?: (event: NativeSyntheticEvent<TextInputEndEditingEvent>) => void;
673
  onSubmitEditing?: (event: NativeSyntheticEvent<TextInputSubmitEditingEvent>) => void;
674
  
675
  // Styling
676
  style?: ViewStyle;
677
  
678
  // Placeholder
679
  placeholder?: string;
680
  placeholderTextColor?: string;
681
  
682
  // Text behavior
683
  multiline?: boolean;
684
  numberOfLines?: number; // Android
685
  maxLength?: number;
686
  editable?: boolean;
687
  
688
  // Keyboard configuration
689
  keyboardType?: KeyboardType;
690
  returnKeyType?: ReturnKeyType;
691
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
692
  autoComplete?: AutoCompleteType;
693
  autoCorrect?: boolean;
694
  spellCheck?: boolean;
695
  
696
  // Security
697
  secureTextEntry?: boolean;
698
  textContentType?: TextContentType; // iOS
699
  
700
  // Selection
701
  selection?: {start: number; end?: number};
702
  selectionColor?: string;
703
  onSelectionChange?: (event: NativeSyntheticEvent<TextInputSelectionChangeEvent>) => void;
704
  
705
  // Focus handling
706
  onFocus?: (event: NativeSyntheticEvent<TextInputFocusEvent>) => void;
707
  onBlur?: (event: NativeSyntheticEvent<TextInputFocusEvent>) => void;
708
  blurOnSubmit?: boolean;
709
  
710
  // Keyboard behavior
711
  keyboardAppearance?: 'default' | 'light' | 'dark'; // iOS
712
  enablesReturnKeyAutomatically?: boolean; // iOS
713
  
714
  // Layout
715
  onLayout?: (event: LayoutEvent) => void;
716
  onContentSizeChange?: (event: NativeSyntheticEvent<TextInputContentSizeChangeEvent>) => void;
717
  
718
  // Accessibility
719
  accessible?: boolean;
720
  accessibilityLabel?: string;
721
  
722
  // Input accessory
723
  inputAccessoryViewID?: string; // iOS
724
  
725
  // Other
726
  testID?: string;
727
  clearButtonMode?: 'never' | 'while-editing' | 'unless-editing' | 'always'; // iOS
728
  clearTextOnFocus?: boolean; // iOS
729
  selectTextOnFocus?: boolean;
730
  
731
  // Text input methods (via ref)
732
  focus?: () => void;
733
  blur?: () => void;
734
  clear?: () => void;
735
  isFocused?: () => boolean;
736
}
737

738
type KeyboardType = 
739
  | 'default'
740
  | 'number-pad'
741
  | 'decimal-pad' 
742
  | 'numeric'
743
  | 'email-address'
744
  | 'phone-pad'
745
  | 'url'
746
  | 'ascii-capable'
747
  | 'numbers-and-punctuation'
748
  | 'name-phone-pad'
749
  | 'twitter'
750
  | 'web-search'
751
  | 'visible-password';
752

753
type ReturnKeyType = 
754
  | 'done'
755
  | 'go'
756
  | 'next' 
757
  | 'search'
758
  | 'send'
759
  | 'none'
760
  | 'previous'
761
  | 'default'
762
  | 'emergency-call'
763
  | 'google'
764
  | 'join'
765
  | 'route'
766
  | 'yahoo';
767
```
768

769
### Button
770

771
A basic button component with platform-specific styling.
772

773
```javascript { .api }
774
import {Button} from 'react-native';
775

776
// Basic button
777
<Button
778
  title="Press me"
779
  onPress={() => Alert.alert('Button pressed!')}
780
/>
781

782
// Disabled button
783
<Button
784
  title="Disabled"
785
  onPress={() => {}}
786
  disabled={true}
787
/>
788

789
// Button with color (Android)
790
<Button
791
  title="Colored Button"
792
  color="#ff5722"
793
  onPress={handlePress}
794
/>
795

796
// iOS button styling
797
<Button
798
  title="iOS Button"
799
  onPress={handlePress}
800
  // Note: iOS buttons inherit color from tintColor
801
/>
802
```
803

804
```typescript { .api }
805
interface ButtonProps {
806
  title: string;
807
  onPress: (event: GestureResponderEvent) => void;
808
  color?: string;
809
  disabled?: boolean;
810
  accessibilityLabel?: string;
811
  testID?: string;
812
}
813
```
814

815
### InputAccessoryView
816

817
A component which enables customization of the keyboard input accessory view on iOS.
818

819
```javascript { .api }
820
import {InputAccessoryView, TextInput, Button} from 'react-native';
821

822
// Basic input accessory view
823
<View>
824
  <TextInput
825
    inputAccessoryViewID="uniqueID"
826
    style={styles.textInput}
827
    placeholder="Enter text"
828
  />
829
  
830
  <InputAccessoryView nativeID="uniqueID">
831
    <View style={styles.accessory}>
832
      <Button title="Done" onPress={() => Keyboard.dismiss()} />
833
    </View>
834
  </InputAccessoryView>
835
</View>
836

837
// Multiple text inputs sharing same accessory
838
<View>
839
  <TextInput
840
    inputAccessoryViewID="sharedAccessory"
841
    placeholder="First input"
842
    style={styles.input}
843
  />
844
  
845
  <TextInput
846
    inputAccessoryViewID="sharedAccessory"
847
    placeholder="Second input"
848
    style={styles.input}
849
  />
850
  
851
  <InputAccessoryView nativeID="sharedAccessory">
852
    <View style={styles.toolbar}>
853
      <Button title="Previous" onPress={goToPrevious} />
854
      <Button title="Next" onPress={goToNext} />
855
      <Button title="Done" onPress={finishEditing} />
856
    </View>
857
  </InputAccessoryView>
858
</View>
859

860
// Custom keyboard toolbar
861
<View>
862
  <TextInput
863
    inputAccessoryViewID="customToolbar"
864
    multiline
865
    style={styles.textArea}
866
    placeholder="Enter your message"
867
  />
868
  
869
  <InputAccessoryView nativeID="customToolbar">
870
    <View style={styles.customToolbar}>
871
      <TouchableOpacity onPress={insertBold}>
872
        <Text style={styles.toolbarButton}>B</Text>
873
      </TouchableOpacity>
874
      <TouchableOpacity onPress={insertItalic}>
875
        <Text style={styles.toolbarButton}>I</Text>
876
      </TouchableOpacity>
877
      <TouchableOpacity onPress={insertLink}>
878
        <Text style={styles.toolbarButton}>Link</Text>
879
      </TouchableOpacity>
880
      <View style={styles.spacer} />
881
      <TouchableOpacity onPress={sendMessage}>
882
        <Text style={styles.sendButton}>Send</Text>
883
      </TouchableOpacity>
884
    </View>
885
  </InputAccessoryView>
886
</View>
887
```
888

889
```typescript { .api }
890
interface InputAccessoryViewProps {
891
  // Required: Unique identifier
892
  nativeID: string;
893
  
894
  // Content
895
  children?: React.ReactNode;
896
  
897
  // Styling
898
  style?: ViewStyle;
899
  
900
  // Background color
901
  backgroundColor?: string;
902
}
903
```
904

905
**Note:** InputAccessoryView is iOS-only. On Android, this component renders nothing.
906

907
## Touchable Components
908

909
### TouchableOpacity
910

911
A wrapper that responds to touches by decreasing the opacity of the wrapped view.
912

913
```javascript { .api }
914
import {TouchableOpacity} from 'react-native';
915

916
// Basic touchable
917
<TouchableOpacity onPress={() => console.log('Pressed!')}>
918
  <View style={styles.button}>
919
    <Text>Touch me</Text>
920
  </View>
921
</TouchableOpacity>
922

923
// Custom opacity
924
<TouchableOpacity 
925
  activeOpacity={0.6}
926
  onPress={handlePress}
927
  onLongPress={handleLongPress}
928
>
929
  <Image source={{uri: 'image.jpg'}} style={styles.image} />
930
</TouchableOpacity>
931

932
// With disabled state
933
<TouchableOpacity 
934
  disabled={isLoading}
935
  onPress={handleSubmit}
936
  style={[styles.button, isLoading && styles.disabledButton]}
937
>
938
  <Text style={styles.buttonText}>
939
    {isLoading ? 'Loading...' : 'Submit'}
940
  </Text>
941
</TouchableOpacity>
942
```
943

944
```typescript { .api }
945
interface TouchableOpacityProps extends TouchableWithoutFeedbackProps {
946
  activeOpacity?: number;
947
  style?: ViewStyle;
948
  children?: React.ReactNode;
949
}
950
```
951

952
### TouchableHighlight
953

954
A wrapper that responds to touches with an overlay color.
955

956
```javascript { .api }
957
import {TouchableHighlight} from 'react-native';
958

959
// Basic highlight
960
<TouchableHighlight
961
  onPress={handlePress}
962
  underlayColor="#DDDDDD"
963
>
964
  <View style={styles.button}>
965
    <Text>Press me</Text>
966
  </View>
967
</TouchableHighlight>
968

969
// Custom highlight color
970
<TouchableHighlight
971
  onPress={handlePress}
972
  underlayColor="rgba(255, 0, 0, 0.3)"
973
  style={styles.card}
974
>
975
  <View>
976
    <Text style={styles.title}>Card Title</Text>
977
    <Text style={styles.description}>Card description</Text>
978
  </View>
979
</TouchableHighlight>
980
```
981

982
```typescript { .api }
983
interface TouchableHighlightProps extends TouchableWithoutFeedbackProps {
984
  underlayColor?: string;
985
  onShowUnderlay?: () => void;
986
  onHideUnderlay?: () => void;
987
  style?: ViewStyle;
988
  children?: React.ReactNode;
989
}
990
```
991

992
### Pressable
993

994
A modern touchable component with configurable press behaviors and comprehensive event handling.
995

996
```javascript { .api }
997
import {Pressable} from 'react-native';
998

999
// Basic pressable
1000
<Pressable onPress={() => console.log('Pressed')}>
1001
  <Text>Press me</Text>
1002
</Pressable>
1003

1004
// With press state styling
1005
<Pressable
1006
  onPress={handlePress}
1007
  style={({pressed}) => [
1008
    styles.button,
1009
    pressed && styles.pressed
1010
  ]}
1011
>
1012
  {({pressed}) => (
1013
    <Text style={pressed ? styles.pressedText : styles.text}>
1014
      {pressed ? 'Pressed!' : 'Press me'}
1015
    </Text>
1016
  )}
1017
</Pressable>
1018

1019
// Advanced press handling
1020
<Pressable
1021
  onPress={handlePress}
1022
  onPressIn={() => setPressed(true)}
1023
  onPressOut={() => setPressed(false)}
1024
  onLongPress={handleLongPress}
1025
  onHoverIn={() => setHovered(true)} // Web/desktop
1026
  onHoverOut={() => setHovered(false)}
1027
  pressRetentionOffset={{top: 20, left: 20, right: 20, bottom: 20}}
1028
  hitSlop={{top: 10, left: 10, right: 10, bottom: 10}}
1029
  android_ripple={{color: 'rgba(0, 0, 0, 0.32)'}}
1030
>
1031
  <View style={styles.pressable}>
1032
    <Text>Advanced Pressable</Text>
1033
  </View>
1034
</Pressable>
1035

1036
// Disabled pressable
1037
<Pressable
1038
  disabled={isLoading}
1039
  onPress={handlePress}
1040
  style={({pressed}) => [
1041
    styles.button,
1042
    isLoading && styles.disabled,
1043
    pressed && !isLoading && styles.pressed
1044
  ]}
1045
>
1046
  <Text>{isLoading ? 'Loading...' : 'Submit'}</Text>
1047
</Pressable>
1048
```
1049

1050
```typescript { .api }
1051
interface PressableProps {
1052
  // Press handling
1053
  onPress?: (event: GestureResponderEvent) => void;
1054
  onPressIn?: (event: GestureResponderEvent) => void;
1055
  onPressOut?: (event: GestureResponderEvent) => void;
1056
  onLongPress?: (event: GestureResponderEvent) => void;
1057
  
1058
  // Hover handling (web/desktop)
1059
  onHoverIn?: (event: MouseEvent) => void;
1060
  onHoverOut?: (event: MouseEvent) => void;
1061
  
1062
  // Focus handling
1063
  onFocus?: (event: FocusEvent) => void;
1064
  onBlur?: (event: FocusEvent) => void;
1065
  
1066
  // Configuration  
1067
  disabled?: boolean;
1068
  hitSlop?: EdgeInsets;
1069
  pressRetentionOffset?: EdgeInsets;
1070
  delayLongPress?: number;
1071
  
1072
  // Styling with state
1073
  style?: ViewStyle | ((state: PressableStateCallbackType) => ViewStyle);
1074
  children?: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode);
1075
  
1076
  // Platform specific
1077
  android_ripple?: AndroidRippleConfig;
1078
  android_disableSound?: boolean;
1079
  
1080
  // Accessibility
1081
  accessible?: boolean;
1082
  accessibilityLabel?: string;
1083
  accessibilityRole?: AccessibilityRole;
1084
  accessibilityState?: AccessibilityState;
1085
  
1086
  // Other
1087
  testID?: string;
1088
  unstable_pressDelay?: number;
1089
}
1090

1091
interface PressableStateCallbackType {
1092
  pressed: boolean;
1093
  hovered?: boolean;
1094
  focused?: boolean;
1095
}
1096

1097
interface AndroidRippleConfig {
1098
  color?: string;
1099
  borderless?: boolean;
1100
  radius?: number;
1101
}
1102
```
1103

1104
## List Components
1105

1106
### FlatList
1107

1108
A performant interface for rendering basic, flat lists with lazy loading and optimization.
1109

1110
```javascript { .api }
1111
import {FlatList} from 'react-native';
1112

1113
// Basic list
1114
const data = [
1115
  {id: '1', title: 'Item 1'},
1116
  {id: '2', title: 'Item 2'},
1117
  {id: '3', title: 'Item 3'},
1118
];
1119

1120
<FlatList
1121
  data={data}
1122
  renderItem={({item}) => (
1123
    <View style={styles.item}>
1124
      <Text>{item.title}</Text>
1125
    </View>
1126
  )}
1127
  keyExtractor={item => item.id}
1128
/>
1129

1130
// Horizontal list
1131
<FlatList
1132
  data={photos}
1133
  renderItem={({item}) => (
1134
    <Image source={{uri: item.url}} style={styles.photo} />
1135
  )}
1136
  keyExtractor={item => item.id}
1137
  horizontal={true}
1138
  showsHorizontalScrollIndicator={false}
1139
/>
1140

1141
// List with separators
1142
<FlatList
1143
  data={data}
1144
  renderItem={renderItem}
1145
  keyExtractor={item => item.id}
1146
  ItemSeparatorComponent={() => <View style={styles.separator} />}
1147
  ListHeaderComponent={() => <Text style={styles.header}>Header</Text>}
1148
  ListFooterComponent={() => <Text style={styles.footer}>Footer</Text>}
1149
  ListEmptyComponent={() => <Text>No items found</Text>}
1150
/>
1151

1152
// Infinite scroll
1153
<FlatList
1154
  data={data}
1155
  renderItem={renderItem}
1156
  keyExtractor={item => item.id}
1157
  onEndReached={loadMore}
1158
  onEndReachedThreshold={0.1}
1159
  refreshing={refreshing}
1160
  onRefresh={onRefresh}
1161
  ListFooterComponent={isLoading ? <ActivityIndicator /> : null}
1162
/>
1163

1164
// Grid layout
1165
<FlatList
1166
  data={data}
1167
  renderItem={renderItem}
1168
  keyExtractor={item => item.id}
1169
  numColumns={2}
1170
  columnWrapperStyle={styles.row}
1171
/>
1172

1173
// Performance optimization
1174
<FlatList
1175
  data={largeData}
1176
  renderItem={renderItem}
1177
  keyExtractor={item => item.id}
1178
  getItemLayout={(data, index) => ({
1179
    length: ITEM_HEIGHT,
1180
    offset: ITEM_HEIGHT * index,
1181
    index,
1182
  })}
1183
  initialNumToRender={10}
1184
  maxToRenderPerBatch={5}
1185
  updateCellsBatchingPeriod={100}
1186
  windowSize={10}
1187
/>
1188
```
1189

1190
```typescript { .api }
1191
interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
1192
  // Data
1193
  data?: ReadonlyArray<ItemT> | null;
1194
  
1195
  // Rendering
1196
  renderItem: ListRenderItem<ItemT>;
1197
  
1198
  // Layout
1199
  numColumns?: number;
1200
  columnWrapperStyle?: ViewStyle;
1201
  horizontal?: boolean;
1202
  
1203
  // Components
1204
  ItemSeparatorComponent?: React.ComponentType<any> | null;
1205
  ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null;
1206
  ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null;
1207
  ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null;
1208
  
1209
  // Keys and extraction
1210
  keyExtractor?: (item: ItemT, index: number) => string;
1211
  extraData?: any;
1212
  
1213
  // Performance
1214
  getItemLayout?: (data: ArrayLike<ItemT> | null | undefined, index: number) => {length: number, offset: number, index: number};
1215
  initialNumToRender?: number;
1216
  initialScrollIndex?: number;
1217
  
1218
  // Scroll behavior
1219
  onEndReached?: ((info: {distanceFromEnd: number}) => void) | null;
1220
  onEndReachedThreshold?: number | null;
1221
  
1222
  // Refresh
1223
  refreshing?: boolean | null;
1224
  onRefresh?: (() => void) | null;
1225
  
1226
  // View management  
1227
  removeClippedSubviews?: boolean;
1228
  viewabilityConfig?: ViewabilityConfig;
1229
  onViewableItemsChanged?: ((info: {viewableItems: ViewToken[], changed: ViewToken[]}) => void) | null;
1230
  
1231
  // Scroll methods (via ref)
1232
  scrollToEnd?: (params?: {animated?: boolean}) => void;
1233
  scrollToIndex?: (params: {animated?: boolean, index: number, viewOffset?: number, viewPosition?: number}) => void;
1234
  scrollToItem?: (params: {animated?: boolean, item: ItemT, viewPosition?: number}) => void;
1235
  scrollToOffset?: (params: {animated?: boolean, offset: number}) => void;
1236
}
1237

1238
interface ListRenderItem<ItemT> {
1239
  (info: {item: ItemT, index: number, separators: {
1240
    highlight: () => void,
1241
    unhighlight: () => void,
1242
    updateProps: (select: 'leading' | 'trailing', newProps: any) => void,
1243
  }}): React.ReactElement | null;
1244
}
1245
```
1246

1247
### SectionList
1248

1249
A performant interface for rendering sectioned lists with headers and optimized scrolling.
1250

1251
```javascript { .api }
1252
import {SectionList} from 'react-native';
1253

1254
// Basic sectioned list
1255
const sections = [
1256
  {
1257
    title: 'Fruits',
1258
    data: ['Apple', 'Banana', 'Orange'],
1259
  },
1260
  {
1261
    title: 'Vegetables',
1262
    data: ['Carrot', 'Broccoli', 'Spinach'],
1263
  },
1264
];
1265

1266
<SectionList
1267
  sections={sections}
1268
  keyExtractor={(item, index) => item + index}
1269
  renderItem={({item}) => (
1270
    <View style={styles.item}>
1271
      <Text>{item}</Text>
1272
    </View>
1273
  )}
1274
  renderSectionHeader={({section: {title}}) => (
1275
    <Text style={styles.header}>{title}</Text>
1276
  )}
1277
/>
1278

1279
// Advanced sectioned list
1280
<SectionList
1281
  sections={sections}
1282
  keyExtractor={(item, index) => item.id + index}
1283
  renderItem={({item, index, section}) => (
1284
    <TouchableOpacity onPress={() => handleItemPress(item)}>
1285
      <View style={styles.item}>
1286
        <Text>{item.title}</Text>
1287
        <Text style={styles.subtitle}>{item.subtitle}</Text>
1288
      </View>
1289
    </TouchableOpacity>
1290
  )}
1291
  renderSectionHeader={({section: {title, data}}) => (
1292
    <View style={styles.sectionHeader}>
1293
      <Text style={styles.sectionTitle}>{title}</Text>
1294
      <Text style={styles.count}>({data.length} items)</Text>
1295
    </View>
1296
  )}
1297
  renderSectionFooter={({section}) => (
1298
    <View style={styles.sectionFooter}>
1299
      <Text>End of {section.title}</Text>
1300
    </View>
1301
  )}
1302
  ItemSeparatorComponent={() => <View style={styles.separator} />}
1303
  SectionSeparatorComponent={() => <View style={styles.sectionSeparator} />}
1304
  ListHeaderComponent={() => <Text style={styles.listHeader}>All Items</Text>}
1305
  ListFooterComponent={() => <Text style={styles.listFooter}>End of list</Text>}
1306
  stickySectionHeadersEnabled={true}
1307
/>
1308

1309
// With custom section structure
1310
const customSections = [
1311
  {
1312
    title: 'Today',
1313
    data: todayItems,
1314
    color: 'blue',
1315
  },
1316
  {
1317
    title: 'Yesterday', 
1318
    data: yesterdayItems,
1319
    color: 'gray',
1320
  },
1321
];
1322

1323
<SectionList
1324
  sections={customSections}
1325
  keyExtractor={item => item.id}
1326
  renderItem={({item, section}) => (
1327
    <View style={[styles.item, {borderLeftColor: section.color}]}>
1328
      <Text>{item.title}</Text>
1329
    </View>
1330
  )}
1331
  renderSectionHeader={({section}) => (
1332
    <View style={[styles.header, {backgroundColor: section.color}]}>
1333
      <Text style={styles.headerText}>{section.title}</Text>
1334
    </View>
1335
  )}
1336
/>
1337
```
1338

1339
```typescript { .api }
1340
interface SectionListProps<ItemT, SectionT> extends VirtualizedListProps<ItemT> {
1341
  // Data
1342
  sections: ReadonlyArray<SectionListData<ItemT, SectionT>>;
1343
  
1344
  // Rendering
1345
  renderItem: SectionListRenderItem<ItemT, SectionT>;
1346
  renderSectionHeader?: (info: {section: SectionListData<ItemT, SectionT>}) => React.ReactElement | null;
1347
  renderSectionFooter?: (info: {section: SectionListData<ItemT, SectionT>}) => React.ReactElement | null;
1348
  
1349
  // Components
1350
  ItemSeparatorComponent?: React.ComponentType<any> | null;
1351
  SectionSeparatorComponent?: React.ComponentType<any> | null;
1352
  ListEmptyComponent?: React.ComponentType<any> | React.ReactElement | null;
1353
  ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null;
1354
  ListHeaderComponent?: React.ComponentType<any> | React.ReactElement | null;
1355
  
1356
  // Behavior
1357
  stickySectionHeadersEnabled?: boolean;
1358
  
1359
  // Keys
1360
  keyExtractor?: (item: ItemT, index: number) => string;
1361
  
1362
  // Scroll methods (via ref)
1363
  scrollToLocation?: (params: SectionListScrollParams) => void;
1364
}
1365

1366
interface SectionListData<ItemT, SectionT = DefaultSectionT> {
1367
  data: ReadonlyArray<ItemT>;
1368
  key?: string;
1369
  
1370
  // Custom section properties
1371
  [key: string]: any;
1372
}
1373

1374
interface SectionListRenderItem<ItemT, SectionT> {
1375
  (info: {
1376
    item: ItemT,
1377
    index: number,
1378
    section: SectionListData<ItemT, SectionT>,
1379
    separators: {
1380
      highlight: () => void,
1381
      unhighlight: () => void,
1382
      updateProps: (select: 'leading' | 'trailing', newProps: any) => void,
1383
    }
1384
  }): React.ReactElement | null;
1385
}
1386

1387
interface SectionListScrollParams {
1388
  animated?: boolean;
1389
  itemIndex: number;
1390
  sectionIndex: number;
1391
  viewOffset?: number;
1392
  viewPosition?: number;
1393
}
1394
```
1395

1396
## Control Components
1397

1398
### Switch
1399

1400
A boolean input component for toggling between two states.
1401

1402
```javascript { .api }
1403
import {Switch} from 'react-native';
1404

1405
// Basic switch
1406
const [isEnabled, setIsEnabled] = useState(false);
1407

1408
<Switch
1409
  trackColor={{false: '#767577', true: '#81b0ff'}}
1410
  thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
1411
  ios_backgroundColor="#3e3e3e"
1412
  onValueChange={setIsEnabled}
1413
  value={isEnabled}
1414
/>
1415

1416
// Switch with labels
1417
<View style={styles.switchContainer}>
1418
  <Text>Enable notifications</Text>
1419
  <Switch
1420
    value={notificationsEnabled}
1421
    onValueChange={setNotificationsEnabled}
1422
  />
1423
</View>
1424

1425
// Disabled switch
1426
<Switch
1427
  disabled={true}
1428
  value={false}
1429
  trackColor={{false: '#ccc', true: '#ccc'}}
1430
  thumbColor="#999"
1431
/>
1432
```
1433

1434
```typescript { .api }
1435
interface SwitchProps {
1436
  // State
1437
  value?: boolean;
1438
  onValueChange?: (value: boolean) => void;
1439
  
1440
  // Styling
1441
  thumbColor?: string;
1442
  trackColor?: {false?: string; true?: string};
1443
  
1444
  // Behavior
1445
  disabled?: boolean;
1446
  
1447
  // iOS specific
1448
  ios_backgroundColor?: string;
1449
  
1450
  // Accessibility
1451
  accessible?: boolean;
1452
  accessibilityLabel?: string;
1453
  accessibilityRole?: AccessibilityRole;
1454
  accessibilityState?: AccessibilityState;
1455
  
1456
  // Other
1457
  testID?: string;
1458
}
1459
```
1460

1461
### ActivityIndicator
1462

1463
A component for showing loading state with a spinning indicator.
1464

1465
```javascript { .api }
1466
import {ActivityIndicator} from 'react-native';
1467

1468
// Basic activity indicator
1469
<ActivityIndicator />
1470

1471
// Large colored indicator
1472
<ActivityIndicator size="large" color="#0000ff" />
1473

1474
// Custom size (number for exact size)
1475
<ActivityIndicator size={50} color="red" />
1476

1477
// Animated indicator in loading state
1478
{isLoading && (
1479
  <View style={styles.loadingContainer}>
1480
    <ActivityIndicator size="large" color="#007AFF" />
1481
    <Text style={styles.loadingText}>Loading...</Text>
1482
  </View>
1483
)}
1484

1485
// Overlay loading
1486
<View style={styles.container}>
1487
  {/* Your content */}
1488
  <Text>Content here</Text>
1489
  
1490
  {isLoading && (
1491
    <View style={styles.overlay}>
1492
      <ActivityIndicator size="large" color="white" />
1493
    </View>
1494
  )}
1495
</View>
1496
```
1497

1498
```typescript { .api }
1499
interface ActivityIndicatorProps {
1500
  // Behavior
1501
  animating?: boolean;
1502
  
1503
  // Appearance
1504
  color?: string;
1505
  size?: 'small' | 'large' | number;
1506
  
1507
  // Layout
1508
  style?: ViewStyle;
1509
  
1510
  // iOS specific
1511
  hidesWhenStopped?: boolean;
1512
  
1513
  // Accessibility
1514
  accessible?: boolean;
1515
  accessibilityLabel?: string;
1516
  
1517
  // Other
1518
  testID?: string;
1519
}
1520
```
1521

1522
### RefreshControl
1523

1524
A component for adding pull-to-refresh functionality to scroll views.
1525

1526
```javascript { .api }
1527
import {RefreshControl} from 'react-native';
1528

1529
// Basic refresh control
1530
const [refreshing, setRefreshing] = useState(false);
1531

1532
const onRefresh = useCallback(() => {
1533
  setRefreshing(true);
1534
  
1535
  // Fetch new data
1536
  fetchData().then(() => {
1537
    setRefreshing(false);
1538
  });
1539
}, []);
1540

1541
<ScrollView
1542
  refreshControl={
1543
    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
1544
  }
1545
>
1546
  <Text>Pull down to refresh</Text>
1547
</ScrollView>
1548

1549
// Customized refresh control
1550
<FlatList
1551
  data={data}
1552
  renderItem={renderItem}
1553
  refreshControl={
1554
    <RefreshControl
1555
      refreshing={refreshing}
1556
      onRefresh={onRefresh}
1557
      colors={['#ff0000', '#00ff00', '#0000ff']} // Android
1558
      tintColor="#ff0000" // iOS
1559
      title="Pull to refresh" // iOS
1560
      titleColor="#00ff00" // iOS
1561
      progressBackgroundColor="#ffff00" // Android
1562
    />
1563
  }
1564
/>
1565
```
1566

1567
```typescript { .api }
1568
interface RefreshControlProps {
1569
  // State
1570
  refreshing?: boolean;
1571
  onRefresh?: () => void;
1572
  
1573
  // iOS specific
1574
  tintColor?: string;
1575
  title?: string;
1576
  titleColor?: string;
1577
  
1578
  // Android specific
1579
  colors?: string[];
1580
  progressBackgroundColor?: string;
1581
  progressViewOffset?: number;
1582
  
1583
  // Layout
1584
  style?: ViewStyle;
1585
  
1586
  // Other
1587
  enabled?: boolean;
1588
}
1589
```
1590

1591
## Modal and Status Components
1592

1593
### Modal
1594

1595
A component for presenting content above an enclosing view.
1596

1597
```javascript { .api }
1598
import {Modal} from 'react-native';
1599

1600
// Basic modal
1601
const [modalVisible, setModalVisible] = useState(false);
1602

1603
<Modal
1604
  animationType="slide"
1605
  transparent={true}
1606
  visible={modalVisible}
1607
  onRequestClose={() => setModalVisible(false)}
1608
>
1609
  <View style={styles.centeredView}>
1610
    <View style={styles.modalView}>
1611
      <Text style={styles.modalText}>Hello World!</Text>
1612
      <Pressable
1613
        style={[styles.button, styles.buttonClose]}
1614
        onPress={() => setModalVisible(!modalVisible)}
1615
      >
1616
        <Text style={styles.textStyle}>Hide Modal</Text>
1617
      </Pressable>
1618
    </View>
1619
  </View>
1620
</Modal>
1621

1622
// Full screen modal
1623
<Modal
1624
  animationType="fade"
1625
  visible={modalVisible}
1626
  onRequestClose={() => setModalVisible(false)}
1627
>
1628
  <SafeAreaView style={styles.fullScreenModal}>
1629
    <View style={styles.header}>
1630
      <TouchableOpacity onPress={() => setModalVisible(false)}>
1631
        <Text style={styles.closeButton}>Close</Text>
1632
      </TouchableOpacity>
1633
    </View>
1634
    <View style={styles.content}>
1635
      <Text>Full screen modal content</Text>
1636
    </View>
1637
  </SafeAreaView>
1638
</Modal>
1639

1640
// Modal with overlay
1641
<Modal
1642
  transparent={true}
1643
  visible={modalVisible}
1644
  animationType="fade"
1645
  onRequestClose={() => setModalVisible(false)}
1646
>
1647
  <TouchableOpacity
1648
    style={styles.overlay}
1649
    activeOpacity={1}
1650
    onPress={() => setModalVisible(false)}
1651
  >
1652
    <View style={styles.modalContainer}>
1653
      <TouchableOpacity activeOpacity={1}>
1654
        <View style={styles.modal}>
1655
          <Text>Modal content that won't close when touched</Text>
1656
        </View>
1657
      </TouchableOpacity>
1658
    </View>
1659
  </TouchableOpacity>
1660
</Modal>
1661
```
1662

1663
```typescript { .api }
1664
interface ModalProps {
1665
  // Visibility
1666
  visible?: boolean;
1667
  
1668
  // Animation
1669
  animationType?: 'none' | 'slide' | 'fade';
1670
  
1671
  // Presentation
1672
  transparent?: boolean;
1673
  presentationStyle?: 'fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'; // iOS
1674
  
1675
  // Events
1676
  onRequestClose?: () => void;
1677
  onShow?: (event: NativeSyntheticEvent<any>) => void;
1678
  onDismiss?: () => void; // iOS
1679
  
1680
  // iOS specific
1681
  supportedOrientations?: ('portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right')[];
1682
  onOrientationChange?: (event: NativeSyntheticEvent<any>) => void;
1683
  
1684
  // Android specific
1685
  hardwareAccelerated?: boolean;
1686
  statusBarTranslucent?: boolean;
1687
  
1688
  // Content
1689
  children?: React.ReactNode;
1690
  
1691
  // Other
1692
  testID?: string;
1693
}
1694
```
1695

1696
### StatusBar
1697

1698
A component for controlling the app status bar appearance.
1699

1700
```javascript { .api }
1701
import {StatusBar} from 'react-native';
1702

1703
// Basic status bar
1704
<StatusBar barStyle="dark-content" />
1705

1706
// Hidden status bar
1707
<StatusBar hidden={true} />
1708

1709
// Animated status bar changes
1710
<StatusBar
1711
  barStyle="light-content"
1712
  backgroundColor="#6a51ae"
1713
  animated={true}
1714
/>
1715

1716
// Dynamic status bar based on theme
1717
const isDark = useColorScheme() === 'dark';
1718

1719
<StatusBar
1720
  barStyle={isDark ? 'light-content' : 'dark-content'}
1721
  backgroundColor={isDark ? '#000' : '#fff'}
1722
/>
1723

1724
// Status bar in different screens
1725
function HomeScreen() {
1726
  return (
1727
    <View>
1728
      <StatusBar barStyle="dark-content" backgroundColor="white" />
1729
      <Text>Home Screen</Text>
1730
    </View>
1731
  );
1732
}
1733

1734
function ProfileScreen() {
1735
  return (
1736
    <View>
1737
      <StatusBar barStyle="light-content" backgroundColor="blue" />
1738
      <Text>Profile Screen</Text>
1739
    </View>
1740
  );
1741
}
1742

1743
// Static methods
1744
StatusBar.setBarStyle('light-content', true);
1745
StatusBar.setBackgroundColor('blue', true); // Android
1746
StatusBar.setHidden(true, 'slide'); // iOS
1747
```
1748

1749
```typescript { .api }
1750
interface StatusBarProps {
1751
  // Appearance
1752
  barStyle?: 'default' | 'light-content' | 'dark-content';
1753
  
1754
  // Visibility
1755
  hidden?: boolean;
1756
  
1757
  // Animation
1758
  animated?: boolean;
1759
  
1760
  // Android specific
1761
  backgroundColor?: string;
1762
  translucent?: boolean;
1763
  
1764
  // iOS specific
1765
  networkActivityIndicatorVisible?: boolean;
1766
  showHideTransition?: 'fade' | 'slide';
1767
}
1768

1769
// Static methods
1770
interface StatusBarStatic {
1771
  setBarStyle(style: 'default' | 'light-content' | 'dark-content', animated?: boolean): void;
1772
  setBackgroundColor(color: string, animated?: boolean): void; // Android
1773
  setHidden(hidden: boolean, animation?: 'none' | 'fade' | 'slide'): void;
1774
  setNetworkActivityIndicatorVisible(visible: boolean): void; // iOS
1775
  setTranslucent(translucent: boolean): void; // Android
1776
}
1777
```
1778

1779
## Keyboard Components
1780

1781
### KeyboardAvoidingView
1782

1783
A component that automatically adjusts its height, position, or bottom padding based on the keyboard height.
1784

1785
```javascript { .api }
1786
import {KeyboardAvoidingView} from 'react-native';
1787

1788
// Basic keyboard avoiding view
1789
<KeyboardAvoidingView
1790
  style={{flex: 1}}
1791
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
1792
>
1793
  <ScrollView>
1794
    <TextInput style={styles.input} placeholder="Enter text" />
1795
    <TextInput style={styles.input} placeholder="Enter more text" />
1796
  </ScrollView>
1797
</KeyboardAvoidingView>
1798

1799
// With custom offset
1800
<KeyboardAvoidingView
1801
  behavior="padding"
1802
  keyboardVerticalOffset={Platform.select({ios: 60, android: 80})}
1803
  style={styles.container}
1804
>
1805
  <View style={styles.form}>
1806
    <TextInput placeholder="Email" />
1807
    <TextInput placeholder="Password" secureTextEntry />
1808
    <Button title="Login" onPress={handleLogin} />
1809
  </View>
1810
</KeyboardAvoidingView>
1811

1812
// In modal or screen with header
1813
<KeyboardAvoidingView
1814
  behavior="height"
1815
  keyboardVerticalOffset={100} // Adjust for header height
1816
  style={{flex: 1}}
1817
>
1818
  <View style={styles.content}>
1819
    <TextInput multiline style={styles.textArea} />
1820
  </View>
1821
</KeyboardAvoidingView>
1822
```
1823

1824
```typescript { .api }
1825
interface KeyboardAvoidingViewProps extends ViewProps {
1826
  // Behavior
1827
  behavior?: 'height' | 'position' | 'padding';
1828
  
1829
  // Offset
1830
  keyboardVerticalOffset?: number;
1831
  
1832
  // Content
1833
  contentContainerStyle?: ViewStyle;
1834
  
1835
  // Events
1836
  onKeyboardChange?: (event: KeyboardEvent) => void;
1837
  
1838
  // Layout
1839
  enabled?: boolean;
1840
}
1841
```
1842

1843
This comprehensive documentation covers all the core React Native components with their interfaces, usage patterns, and examples. Each component includes TypeScript definitions and practical code examples showing common use cases.