0
# Display Components
1

2
Visual elements for showing information including avatars, badges, images, and tiles for enhanced content presentation and user interface design.
3

4
## Capabilities
5

6
### Avatar
7

8
User profile image component with fallbacks, multiple sizes, and customizable appearance for representing users and entities in your application.
9

10
```typescript { .api }
11
/**
12
 * User profile image/icon with various display options
13
 */
14
interface AvatarProps extends TouchableOpacityProps {
15
  /** Image source */
16
  source?: ImageSourcePropType;
17
  /** Avatar URI (deprecated, use source) */
18
  avatarStyle?: StyleProp<ImageStyle>;
19
  /** Container styles */
20
  containerStyle?: StyleProp<ViewStyle>;
21
  /** Icon configuration for fallback */
22
  icon?: IconNode;
23
  /** Title text for text-based avatar */
24
  title?: string;
25
  /** Title styles */
26
  titleStyle?: StyleProp<TextStyle>;
27
  /** Overlay component */
28
  overlayContainerStyle?: StyleProp<ViewStyle>;
29
  /** Image component props */
30
  imageProps?: Partial<ImageProps>;
31
  /** Placeholder styles */
32
  placeholderStyle?: StyleProp<ViewStyle>;
33
  /** Rounded avatar */
34
  rounded?: boolean;
35
  /** Avatar size */
36
  size?: 'small' | 'medium' | 'large' | 'xlarge' | number;
37
  /** Custom image component */
38
  ImageComponent?: React.ComponentType<any>;
39
  /** Show edit button */
40
  showEditButton?: boolean;
41
  /** Edit button configuration */
42
  editButton?: Partial<IconProps>;
43
  /** Touch handler */
44
  onPress?(): void;
45
  /** Long press handler */
46
  onLongPress?(): void;
47
  /** Active opacity */
48
  activeOpacity?: number;
49
}
50
```
51

52
**Usage Examples:**
53

54
```typescript
55
import React from 'react';
56
import { Avatar, Accessory } from 'react-native-elements';
57

58
// Basic avatar with image
59
<Avatar
60
  source={{ uri: 'https://example.com/avatar.jpg' }}
61
  size="medium"
62
  rounded
63
/>
64

65
// Avatar with title fallback
66
<Avatar
67
  title="JD"
68
  size="large"
69
  rounded
70
  containerStyle={{ backgroundColor: '#007AFF' }}
71
  titleStyle={{ color: '#fff' }}
72
/>
73

74
// Avatar with icon fallback
75
<Avatar
76
  icon={{ name: 'user', type: 'font-awesome', color: '#fff' }}
77
  size="xlarge"
78
  rounded
79
  containerStyle={{ backgroundColor: '#9b59b6' }}
80
/>
81

82
// Avatar with edit button
83
<Avatar
84
  source={{ uri: 'https://example.com/profile.jpg' }}
85
  size={100}
86
  rounded
87
  showEditButton
88
  editButton={{
89
    name: 'camera',
90
    type: 'font-awesome',
91
    color: '#fff',
92
    underlayColor: '#000',
93
    onPress: () => console.log('Edit pressed'),
94
  }}
95
/>
96

97
// Avatar with accessory (badge)
98
<Avatar
99
  source={{ uri: 'https://example.com/user.jpg' }}
100
  size="large"
101
  rounded
102
>
103
  <Accessory
104
    size={20}
105
    icon={{ name: 'check', type: 'material', color: '#fff' }}
106
    style={{ backgroundColor: '#4caf50' }}
107
  />
108
</Avatar>
109

110
// Touchable avatar
111
<Avatar
112
  source={{ uri: 'https://example.com/avatar.jpg' }}
113
  size="medium"
114
  rounded
115
  onPress={() => console.log('Avatar pressed')}
116
  activeOpacity={0.7}
117
  containerStyle={{
118
    borderWidth: 2,
119
    borderColor: '#007AFF',
120
  }}
121
/>
122

123
// Custom sized avatar with overlay
124
<Avatar
125
  source={{ uri: 'https://example.com/photo.jpg' }}
126
  size={120}
127
  rounded
128
  overlayContainerStyle={{
129
    backgroundColor: 'rgba(0,0,0,0.3)',
130
  }}
131
  imageProps={{
132
    resizeMode: 'cover',
133
  }}
134
/>
135
```
136

137
### Badge
138

139
Small status indicator component for showing notifications, counts, or status information with customizable colors and positioning.
140

141
```typescript { .api }
142
/**
143
 * Small status indicator component
144
 */
145
interface BadgeProps {
146
  /** Badge content */
147
  value?: React.ReactNode;
148
  /** Badge status type */
149
  status?: 'primary' | 'success' | 'warning' | 'error';
150
  /** Badge container styles */
151
  badgeStyle?: StyleProp<ViewStyle>;
152
  /** Container styles */
153
  containerStyle?: StyleProp<ViewStyle>;
154
  /** Text styles */
155
  textStyle?: StyleProp<TextStyle>;
156
  /** Component to wrap with badge */
157
  Component?: React.ComponentType<any>;
158
  /** Touch handler */
159
  onPress?(): void;
160
}
161

162
/**
163
 * Higher-order component for adding badges to components
164
 */
165
function withBadge<P>(badgeProps?: BadgeProps): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P>;
166
```
167

168
**Usage Examples:**
169

170
```typescript
171
import React from 'react';
172
import { Badge, withBadge, Icon, Avatar } from 'react-native-elements';
173

174
// Basic badge with number
175
<Badge value={5} status="error" />
176

177
// Badge with text
178
<Badge
179
  value="NEW"
180
  status="success"
181
  textStyle={{ color: '#fff', fontSize: 12 }}
182
/>
183

184
// Custom styled badge
185
<Badge
186
  value={99}
187
  badgeStyle={{
188
    backgroundColor: '#FF6B6B',
189
    borderRadius: 15,
190
    height: 30,
191
    minWidth: 30,
192
  }}
193
  textStyle={{
194
    color: '#fff',
195
    fontSize: 14,
196
    fontWeight: 'bold',
197
  }}
198
/>
199

200
// Badge with icon
201
<Badge
202
  value={<Icon name="star" size={12} color="#fff" />}
203
  status="warning"
204
/>
205

206
// Using withBadge HOC
207
const BadgedIcon = withBadge({
208
  value: 3,
209
  status: 'error',
210
  badgeStyle: { right: -6, top: -3 }
211
})(Icon);
212

213
<BadgedIcon
214
  name="notifications"
215
  type="material"
216
  size={30}
217
  color="#666"
218
/>
219

220
// Badge on avatar
221
const BadgedAvatar = withBadge({
222
  value: '!',
223
  status: 'error',
224
  badgeStyle: { right: 5, top: 5 }
225
})(Avatar);
226

227
<BadgedAvatar
228
  source={{ uri: 'https://example.com/avatar.jpg' }}
229
  size="medium"
230
  rounded
231
/>
232

233
// Touchable badge
234
<Badge
235
  value="5"
236
  status="primary"
237
  onPress={() => console.log('Badge pressed')}
238
  containerStyle={{
239
    position: 'absolute',
240
    top: 10,
241
    right: 10,
242
  }}
243
/>
244

245
// Empty badge (dot indicator)
246
<Badge
247
  badgeStyle={{
248
    backgroundColor: '#4caf50',
249
    width: 10,
250
    height: 10,
251
    borderRadius: 5,
252
  }}
253
/>
254
```
255

256
### Image
257

258
Enhanced image component with loading states, error handling, and placeholder support for improved user experience during image loading.
259

260
```typescript { .api }
261
/**
262
 * Enhanced image component with loading states
263
 */
264
interface ImageProps extends RNImageProps {
265
  /** Container styles */
266
  containerStyle?: StyleProp<ViewStyle>;
267
  /** Placeholder component */
268
  PlaceholderContent?: React.ReactElement;
269
  /** Placeholder styles */
270
  placeholderStyle?: StyleProp<ViewStyle>;
271
  /** Loading indicator component */
272
  LoadingIndicatorComponent?: React.ComponentType<any>;
273
  /** Error component */
274
  ErrorComponent?: React.ComponentType<any>;
275
  /** Transition duration */
276
  transition?: boolean;
277
  /** Transition duration in ms */
278
  transitionDuration?: number;
279
  /** Child content (overlay) */
280
  children?: React.ReactNode;
281
  /** Child container styles */
282
  childrenContainerStyle?: StyleProp<ViewStyle>;
283
}
284
```
285

286
**Usage Examples:**
287

288
```typescript
289
import React from 'react';
290
import { Image, Avatar, ActivityIndicator } from 'react-native-elements';
291

292
// Basic image with loading state
293
<Image
294
  source={{ uri: 'https://example.com/image.jpg' }}
295
  style={{ width: 200, height: 200 }}
296
  PlaceholderContent={<ActivityIndicator />}
297
/>
298

299
// Image with custom placeholder
300
<Image
301
  source={{ uri: 'https://example.com/photo.jpg' }}
302
  containerStyle={{ width: 300, height: 200 }}
303
  PlaceholderContent={
304
    <Text style={{ color: '#666' }}>Loading...</Text>
305
  }
306
  placeholderStyle={{
307
    backgroundColor: '#f0f0f0',
308
    justifyContent: 'center',
309
    alignItems: 'center',
310
  }}
311
/>
312

313
// Image with transition effect
314
<Image
315
  source={{ uri: 'https://example.com/banner.jpg' }}
316
  style={{ width: '100%', height: 250 }}
317
  transition={true}
318
  transitionDuration={300}
319
/>
320

321
// Image with overlay content
322
<Image
323
  source={{ uri: 'https://example.com/background.jpg' }}
324
  style={{ width: '100%', height: 300 }}
325
  childrenContainerStyle={{
326
    position: 'absolute',
327
    bottom: 0,
328
    left: 0,
329
    right: 0,
330
    backgroundColor: 'rgba(0,0,0,0.5)',
331
    padding: 20,
332
  }}
333
>
334
  <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>
335
    Overlay Text
336
  </Text>
337
</Image>
338

339
// Rounded image with error handling
340
<Image
341
  source={{ uri: 'https://invalid-url.com/image.jpg' }}
342
  style={{ width: 100, height: 100, borderRadius: 50 }}
343
  ErrorComponent={() => (
344
    <View style={{ 
345
      width: 100, 
346
      height: 100, 
347
      borderRadius: 50, 
348
      backgroundColor: '#ddd',
349
      justifyContent: 'center',
350
      alignItems: 'center'
351
    }}>
352
      <Icon name="broken-image" type="material" color="#999" />
353
    </View>
354
  )}
355
/>
356

357
// Custom loading indicator
358
<Image
359
  source={{ uri: 'https://example.com/large-image.jpg' }}
360
  style={{ width: 250, height: 250 }}
361
  LoadingIndicatorComponent={() => (
362
    <View style={{ 
363
      flex: 1,
364
      justifyContent: 'center',
365
      alignItems: 'center',
366
      backgroundColor: '#f8f9fa'
367
    }}>
368
      <ActivityIndicator size="large" color="#007AFF" />
369
      <Text style={{ marginTop: 10, color: '#666' }}>
370
        Loading image...
371
      </Text>
372
    </View>
373
  )}
374
/>
375
```
376

377
### Tile
378

379
Card-like component for displaying featured content with image backgrounds, overlay text, and customizable layouts for content presentation.
380

381
```typescript { .api }
382
/**
383
 * Card-like component for displaying featured content
384
 */
385
interface TileProps extends TouchableOpacityProps {
386
  /** Tile image source */
387
  imageSrc?: ImageSourcePropType | string;
388
  /** Icon configuration */
389
  icon?: IconNode;
390
  /** Featured content */
391
  featured?: boolean;
392
  /** Title text */
393
  title?: string;
394
  /** Title styles */
395
  titleStyle?: StyleProp<TextStyle>;
396
  /** Caption text */
397
  caption?: string;
398
  /** Caption styles */
399
  captionStyle?: StyleProp<TextStyle>;
400
  /** Image container styles */
401
  imageContainerStyle?: StyleProp<ViewStyle>;
402
  /** Container styles */
403
  containerStyle?: StyleProp<ViewStyle>;
404
  /** Icon container styles */
405
  iconContainerStyle?: StyleProp<ViewStyle>;
406
  /** Overlay container styles */
407
  overlayContainerStyle?: StyleProp<ViewStyle>;
408
  /** Content container styles */
409
  contentContainerStyle?: StyleProp<ViewStyle>;
410
  /** Image component props */
411
  imageProps?: Partial<ImageProps>;
412
  /** Tile width */
413
  width?: number;
414
  /** Tile height */
415
  height?: number;
416
  /** Active opacity */
417
  activeOpacity?: number;
418
  /** Touch handler */
419
  onPress?(): void;
420
}
421
```
422

423
**Usage Examples:**
424

425
```typescript
426
import React from 'react';
427
import { Tile } from 'react-native-elements';
428

429
// Basic tile with image and title
430
<Tile
431
  imageSrc={{ uri: 'https://example.com/feature.jpg' }}
432
  title="Featured Article"
433
  width={300}
434
  height={200}
435
  onPress={() => console.log('Tile pressed')}
436
/>
437

438
// Featured tile with overlay text
439
<Tile
440
  imageSrc="https://example.com/hero.jpg"
441
  title="Amazing Destination"
442
  caption="Discover the beauty"
443
  featured
444
  titleStyle={{
445
    fontSize: 24,
446
    color: '#fff',
447
    fontWeight: 'bold',
448
  }}
449
  captionStyle={{
450
    fontSize: 16,
451
    color: '#fff',
452
  }}
453
  overlayContainerStyle={{
454
    backgroundColor: 'rgba(0,0,0,0.4)',
455
  }}
456
/>
457

458
// Tile with icon
459
<Tile
460
  imageSrc={{ uri: 'https://example.com/background.jpg' }}
461
  icon={{
462
    name: 'play-circle',
463
    type: 'font-awesome',
464
    size: 60,
465
    color: '#fff',
466
  }}
467
  title="Watch Video"
468
  width={250}
469
  height={200}
470
  iconContainerStyle={{
471
    backgroundColor: 'rgba(0,0,0,0.3)',
472
    borderRadius: 30,
473
  }}
474
/>
475

476
// Custom styled tile
477
<Tile
478
  imageSrc={{ uri: 'https://example.com/product.jpg' }}
479
  title="Product Name"
480
  caption="$29.99"
481
  containerStyle={{
482
    borderRadius: 15,
483
    overflow: 'hidden',
484
    elevation: 5,
485
    shadowOffset: { width: 0, height: 2 },
486
    shadowOpacity: 0.2,
487
    shadowRadius: 5,
488
  }}
489
  titleStyle={{
490
    fontSize: 18,
491
    fontWeight: 'bold',
492
    color: '#333',
493
  }}
494
  captionStyle={{
495
    fontSize: 16,
496
    color: '#007AFF',
497
    fontWeight: 'bold',
498
  }}
499
  contentContainerStyle={{
500
    backgroundColor: '#fff',
501
    padding: 15,
502
  }}
503
/>
504

505
// Grid of tiles
506
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
507
  {categories.map((category, index) => (
508
    <Tile
509
      key={index}
510
      imageSrc={{ uri: category.image }}
511
      title={category.name}
512
      width={150}
513
      height={120}
514
      containerStyle={{
515
        margin: 5,
516
        borderRadius: 10,
517
      }}
518
      onPress={() => navigateToCategory(category.id)}
519
    />
520
  ))}
521
</View>
522

523
// Tile with custom image props
524
<Tile
525
  imageSrc={{ uri: 'https://example.com/large.jpg' }}
526
  title="High Resolution"
527
  imageProps={{
528
    resizeMode: 'cover',
529
    transition: true,
530
    PlaceholderContent: <ActivityIndicator />,
531
  }}
532
  width={300}
533
  height={250}
534
/>
535
```
536

537
### Accessory
538

539
Avatar accessory badge component for adding status indicators, notifications, or decorative elements to avatar components.
540

541
```typescript { .api }
542
/**
543
 * Avatar accessory badge
544
 */
545
interface AccessoryProps {
546
  /** Accessory size */
547
  size?: number;
548
  /** Icon configuration */
549
  icon?: IconNode;
550
  /** Container styles */
551
  style?: StyleProp<ViewStyle>;
552
  /** Icon styles */
553
  iconStyle?: StyleProp<ViewStyle>;
554
  /** Touch handler */
555
  onPress?(): void;
556
  /** Underlying color */
557
  underlayColor?: string;
558
}
559
```
560

561
**Usage Examples:**
562

563
```typescript
564
import React from 'react';
565
import { Avatar, Accessory } from 'react-native-elements';
566

567
// Avatar with online status accessory
568
<Avatar
569
  source={{ uri: 'https://example.com/user.jpg' }}
570
  size="large"
571
  rounded
572
>
573
  <Accessory
574
    size={20}
575
    style={{
576
      backgroundColor: '#4caf50',
577
      borderWidth: 2,
578
      borderColor: '#fff',
579
    }}
580
  />
581
</Avatar>
582

583
// Avatar with notification accessory
584
<Avatar
585
  source={{ uri: 'https://example.com/profile.jpg' }}
586
  size={80}
587
  rounded
588
>
589
  <Accessory
590
    size={24}
591
    icon={{
592
      name: 'notifications',
593
      type: 'material',
594
      color: '#fff',
595
      size: 12,
596
    }}
597
    style={{
598
      backgroundColor: '#f44336',
599
    }}
600
    onPress={() => console.log('Notification pressed')}
601
  />
602
</Avatar>
603

604
// Avatar with edit accessory
605
<Avatar
606
  title="JD"
607
  size="xlarge"
608
  rounded
609
  containerStyle={{ backgroundColor: '#007AFF' }}
610
  titleStyle={{ color: '#fff' }}
611
>
612
  <Accessory
613
    size={30}
614
    icon={{
615
      name: 'edit',
616
      type: 'material',
617
      color: '#fff',
618
      size: 16,
619
    }}
620
    style={{
621
      backgroundColor: '#333',
622
    }}
623
    onPress={() => console.log('Edit profile')}
624
  />
625
</Avatar>
626

627
// Avatar with custom styled accessory
628
<Avatar
629
  source={{ uri: 'https://example.com/avatar.jpg' }}
630
  size="medium"
631
  rounded
632
>
633
  <Accessory
634
    size={18}
635
    style={{
636
      backgroundColor: '#ff9800',
637
      borderWidth: 1,
638
      borderColor: '#fff',
639
      position: 'absolute',
640
      top: 0,
641
      right: 0,
642
    }}
643
    icon={{
644
      name: 'star',
645
      type: 'material',
646
      color: '#fff',
647
      size: 10,
648
    }}
649
  />
650
</Avatar>
651
```