0
# Media & Data Display
1

2
Images, icons, avatars, lists, and data presentation components for rich content display and user interface elements.
3

4
## Capabilities
5

6
### Image Component
7

8
Image display component with responsive sizing and loading states.
9

10
```typescript { .api }
11
/**
12
 * Image component with responsive sizing and loading states
13
 * @param props - Image component props
14
 * @returns JSX element representing an image
15
 */
16
function Image(props: IImageProps): JSX.Element;
17

18
interface IImageProps extends StyledProps {
19
  source: { uri: string } | number;
20
  alt: string;
21
  size?: ResponsiveValue<string | number>;
22
  htmlWidth?: string | number;
23
  htmlHeight?: string | number;
24
  fallbackSrc?: string;
25
  fallback?: JSX.Element;
26
  ignoreFallback?: boolean;
27
  loading?: "eager" | "lazy";
28
  crossOrigin?: string;
29
  referrerPolicy?: string;
30
  // React Native Image props
31
  resizeMode?: "cover" | "contain" | "stretch" | "repeat" | "center";
32
  onLoad?: () => void;
33
  onError?: () => void;
34
  onLoadStart?: () => void;
35
  onLoadEnd?: () => void;
36
  onProgress?: (event: any) => void;
37
  testID?: string;
38
  accessibilityLabel?: string;
39
  blurRadius?: number;
40
  capInsets?: { top: number; left: number; bottom: number; right: number };
41
  defaultSource?: { uri: string } | number;
42
  loadingIndicatorSource?: { uri: string } | number;
43
  progressiveRenderingEnabled?: boolean;
44
  fadeDuration?: number;
45
}
46
```
47

48
**Usage Examples:**
49

50
```typescript
51
import { Image, VStack, HStack, Text } from "native-base";
52

53
function ImageExamples() {
54
  return (
55
    <VStack space={4}>
56
      {/* Basic image */}
57
      <Image 
58
        source={{ uri: "https://example.com/image.jpg" }}
59
        alt="Example image"
60
        size="lg"
61
      />
62
      
63
      {/* Responsive image */}
64
      <Image 
65
        source={{ uri: "https://example.com/hero.jpg" }}
66
        alt="Hero image"
67
        w={{ base: "100%", md: "50%" }}
68
        h={{ base: "200", md: "300" }}
69
        resizeMode="cover"
70
      />
71
      
72
      {/* Image with fallback */}
73
      <Image 
74
        source={{ uri: "https://broken-link.jpg" }}
75
        fallbackSrc="https://via.placeholder.com/150"
76
        alt="Image with fallback"
77
        size="md"
78
      />
79
      
80
      {/* Image with custom fallback element */}
81
      <Image 
82
        source={{ uri: "https://broken-link.jpg" }}
83
        fallback={
84
          <Box bg="gray.100" size="150" alignItems="center" justifyContent="center">
85
            <Text>No Image</Text>
86
          </Box>
87
        }
88
        alt="Custom fallback"
89
      />
90
      
91
      {/* Circular image */}
92
      <Image 
93
        source={{ uri: "https://example.com/profile.jpg" }}
94
        alt="Profile"
95
        size="100"
96
        borderRadius="full"
97
      />
98
    </VStack>
99
  );
100
}
101
```
102

103
### Icon Component
104

105
Icon display component with extensive icon library and customization options.
106

107
```typescript { .api }
108
/**
109
 * Icon component for displaying vector icons
110
 * @param props - Icon component props
111
 * @returns JSX element representing an icon
112
 */
113
function Icon(props: IIconProps): JSX.Element;
114

115
/**
116
 * Create custom icon component from SVG path
117
 * @param options - Icon creation options
118
 * @returns Custom icon component
119
 */
120
function createIcon(options: IconOptions): React.ComponentType<IIconProps>;
121

122
interface IIconProps extends StyledProps {
123
  name?: string;
124
  size?: ResponsiveValue<string | number>;
125
  color?: ResponsiveValue<string>;
126
  as?: React.ComponentType<any>;
127
  viewBox?: string;
128
  children?: React.ReactNode;
129
  focusable?: boolean;
130
  role?: string;
131
  // Accessibility
132
  accessibilityLabel?: string;
133
}
134

135
interface IconOptions {
136
  displayName?: string;
137
  viewBox?: string;
138
  path?: JSX.Element | JSX.Element[];
139
  d?: string;
140
  defaultProps?: Partial<IIconProps>;
141
}
142
```
143

144
**Usage Examples:**
145

146
```typescript
147
import { Icon, HStack, VStack, createIcon } from "native-base";
148
import { AddIcon, SearchIcon, StarIcon } from "native-base";
149

150
// Create custom icon
151
const CustomIcon = createIcon({
152
  viewBox: "0 0 24 24",
153
  d: "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
154
});
155

156
function IconExamples() {
157
  return (
158
    <VStack space={4}>
159
      {/* Built-in icons */}
160
      <HStack space={3} alignItems="center">
161
        <AddIcon size="sm" />
162
        <SearchIcon size="md" />
163
        <StarIcon size="lg" />
164
      </HStack>
165
      
166
      {/* Colored icons */}
167
      <HStack space={3} alignItems="center">
168
        <AddIcon color="blue.500" />
169
        <SearchIcon color="green.500" />
170
        <StarIcon color="yellow.500" />
171
      </HStack>
172
      
173
      {/* Responsive icons */}
174
      <Icon 
175
        as={StarIcon}
176
        size={{ base: "sm", md: "lg" }}
177
        color={{ base: "gray.400", _dark: "gray.600" }}
178
      />
179
      
180
      {/* Custom icon */}
181
      <CustomIcon size="xl" color="purple.500" />
182
    </VStack>
183
  );
184
}
185
```
186

187
### Avatar Component
188

189
Avatar component for user profile images and initials.
190

191
```typescript { .api }
192
/**
193
 * Avatar component for user profile representation
194
 * @param props - Avatar component props
195
 * @returns JSX element representing a user avatar
196
 */
197
function Avatar(props: IAvatarProps): JSX.Element;
198

199
interface IAvatarProps extends StyledProps {
200
  name?: string;
201
  source?: { uri: string } | number;
202
  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | string | number;
203
  showBorder?: boolean;
204
  borderColor?: ResponsiveValue<string>;
205
  borderWidth?: ResponsiveValue<string | number>;
206
  _text?: ITextProps;
207
  children?: React.ReactNode;
208
  // Fallback props
209
  getInitials?: (name: string) => string;
210
  ignoreFallback?: boolean;
211
}
212
```
213

214
**Usage Examples:**
215

216
```typescript
217
import { Avatar, HStack, VStack } from "native-base";
218

219
function AvatarExamples() {
220
  return (
221
    <VStack space={4}>
222
      {/* Avatar sizes */}
223
      <HStack space={2} alignItems="center">
224
        <Avatar size="xs" name="John Doe" />
225
        <Avatar size="sm" name="Jane Smith" />
226
        <Avatar size="md" name="Bob Johnson" />
227
        <Avatar size="lg" name="Alice Brown" />
228
        <Avatar size="xl" name="Charlie Wilson" />
229
      </HStack>
230
      
231
      {/* Avatar with image */}
232
      <Avatar 
233
        source={{ uri: "https://example.com/profile.jpg" }}
234
        name="John Doe"
235
        size="lg"
236
      />
237
      
238
      {/* Avatar with border */}
239
      <Avatar 
240
        name="Jane Smith"
241
        size="xl"
242
        showBorder
243
        borderColor="blue.500"
244
        borderWidth="2"
245
      />
246
      
247
      {/* Avatar group */}
248
      <Avatar.Group spacing={-2} max={3}>
249
        <Avatar name="John Doe" />
250
        <Avatar name="Jane Smith" />
251
        <Avatar name="Bob Johnson" />
252
        <Avatar name="Alice Brown" />
253
        <Avatar name="Charlie Wilson" />
254
      </Avatar.Group>
255
      
256
      {/* Custom avatar */}
257
      <Avatar bg="purple.500" size="lg">
258
        <Avatar.Badge bg="green.500" />
259
        <Text color="white" fontSize="lg" fontWeight="bold">
260
          JD
261
        </Text>
262
      </Avatar>
263
    </VStack>
264
  );
265
}
266
```
267

268
### List Component
269

270
List component for displaying structured data with various layouts.
271

272
```typescript { .api }
273
/**
274
 * List component for displaying structured data
275
 * @param props - List component props
276
 * @returns JSX element representing a structured list
277
 */
278
function List(props: IListProps): JSX.Element;
279

280
interface IListProps extends StyledProps {
281
  spacing?: ResponsiveValue<string | number>;
282
  children?: React.ReactNode;
283
}
284

285
interface IListItemProps extends IBoxProps {
286
  children?: React.ReactNode;
287
}
288
```
289

290
**Usage Examples:**
291

292
```typescript
293
import { List, HStack, VStack, Text, Icon, CheckIcon } from "native-base";
294

295
function ListExamples() {
296
  return (
297
    <VStack space={4}>
298
      {/* Basic list */}
299
      <List spacing={2}>
300
        <List.Item>
301
          <Text>First item</Text>
302
        </List.Item>
303
        <List.Item>
304
          <Text>Second item</Text>
305
        </List.Item>
306
        <List.Item>
307
          <Text>Third item</Text>
308
        </List.Item>
309
      </List>
310
      
311
      {/* List with icons */}
312
      <List spacing={3}>
313
        <List.Item>
314
          <HStack space={2} alignItems="center">
315
            <CheckIcon size="sm" color="green.500" />
316
            <Text>Completed task</Text>
317
          </HStack>
318
        </List.Item>
319
        <List.Item>
320
          <HStack space={2} alignItems="center">
321
            <CheckIcon size="sm" color="green.500" />
322
            <Text>Another completed task</Text>
323
          </HStack>
324
        </List.Item>
325
      </List>
326
      
327
      {/* Complex list items */}
328
      <List spacing={3}>
329
        <List.Item>
330
          <HStack space={3} alignItems="center">
331
            <Avatar size="sm" name="John Doe" />
332
            <VStack flex={1}>
333
              <Text fontWeight="bold">John Doe</Text>
334
              <Text fontSize="sm" color="gray.500">
335
                Software Engineer
336
              </Text>
337
            </VStack>
338
            <Badge colorScheme="success">Online</Badge>
339
          </HStack>
340
        </List.Item>
341
        <List.Item>
342
          <HStack space={3} alignItems="center">
343
            <Avatar size="sm" name="Jane Smith" />
344
            <VStack flex={1}>
345
              <Text fontWeight="bold">Jane Smith</Text>
346
              <Text fontSize="sm" color="gray.500">
347
                Product Manager
348
              </Text>
349
            </VStack>
350
            <Badge colorScheme="gray">Offline</Badge>
351
          </HStack>
352
        </List.Item>
353
      </List>
354
    </VStack>
355
  );
356
}
357
```
358

359
### Card Component
360

361
Card component for grouping related content with consistent styling.
362

363
```typescript { .api }
364
/**
365
 * Card component for content grouping
366
 * @param props - Card component props
367
 * @returns JSX element representing a content card
368
 */
369
function Card(props: ICardProps): JSX.Element;
370

371
interface ICardProps extends IBoxProps {
372
  variant?: "outline" | "filled" | "elevated" | "unstyled";
373
  children?: React.ReactNode;
374
}
375
```
376

377
**Usage Examples:**
378

379
```typescript
380
import { Card, Text, Image, VStack, HStack, Button } from "native-base";
381

382
function CardExamples() {
383
  return (
384
    <VStack space={4}>
385
      {/* Basic card */}
386
      <Card>
387
        <Card.Body>
388
          <Text fontWeight="bold" fontSize="lg">
389
            Card Title
390
          </Text>
391
          <Text>
392
            This is the card content. It can contain any type of content.
393
          </Text>
394
        </Card.Body>
395
      </Card>
396
      
397
      {/* Card with header and footer */}
398
      <Card>
399
        <Card.Header>
400
          <Text fontWeight="bold" fontSize="lg">
401
            Article Title
402
          </Text>
403
        </Card.Header>
404
        <Card.Body>
405
          <Text>
406
            Article content goes here. This is a longer description of the article.
407
          </Text>
408
        </Card.Body>
409
        <Card.Footer>
410
          <HStack space={2}>
411
            <Button size="sm" variant="ghost">
412
              Read More
413
            </Button>
414
            <Button size="sm">
415
              Share
416
            </Button>
417
          </HStack>
418
        </Card.Footer>
419
      </Card>
420
      
421
      {/* Card with image */}
422
      <Card maxW="sm">
423
        <Image 
424
          source={{ uri: "https://example.com/image.jpg" }}
425
          alt="Card image"
426
          w="100%"
427
          h="200"
428
        />
429
        <Card.Body>
430
          <VStack space={2}>
431
            <Text fontWeight="bold" fontSize="lg">
432
              Image Card
433
            </Text>
434
            <Text>
435
              Card with an image at the top.
436
            </Text>
437
          </VStack>
438
        </Card.Body>
439
      </Card>
440
      
441
      {/* Elevated card */}
442
      <Card variant="elevated" shadow="lg">
443
        <Card.Body>
444
          <Text fontWeight="bold">Elevated Card</Text>
445
          <Text>This card has elevation and shadow.</Text>
446
        </Card.Body>
447
      </Card>
448
    </VStack>
449
  );
450
}
451
```
452

453
### Code Component
454

455
Code display component for syntax highlighting and code snippets.
456

457
```typescript { .api }
458
/**
459
 * Code component for displaying code snippets
460
 * @returns JSX element representing formatted code
461
 */
462
function Code(): JSX.Element;
463
```
464

465
**Usage Example:**
466

467
```typescript
468
import { Code, VStack, Text } from "native-base";
469

470
function CodeExample() {
471
  return (
472
    <VStack space={3}>
473
      <Text>Inline code: <Code>console.log('hello')</Code></Text>
474
      
475
      <Code>
476
        {`function greet(name) {
477
  return \`Hello, \${name}!\`;
478
}`}
479
      </Code>
480
    </VStack>
481
  );
482
}
483
```
484

485
### Tag Component
486

487
Tag component for labels, categories, and metadata.
488

489
```typescript { .api }
490
/**
491
 * Tag component for labels and categories
492
 * @param props - Tag component props
493
 * @returns JSX element representing a tag
494
 */
495
function Tag(props: ITagProps): JSX.Element;
496

497
interface ITagProps extends StyledProps {
498
  children?: React.ReactNode;
499
  variant?: "solid" | "subtle" | "outline";
500
  colorScheme?: string;
501
  size?: "sm" | "md" | "lg";
502
  startIcon?: JSX.Element;
503
  endIcon?: JSX.Element;
504
  onClose?: () => void;
505
  isDisabled?: boolean;
506
  _text?: ITextProps;
507
}
508
```
509

510
**Usage Examples:**
511

512
```typescript
513
import { Tag, HStack, VStack, CloseIcon } from "native-base";
514

515
function TagExamples() {
516
  return (
517
    <VStack space={4}>
518
      {/* Basic tags */}
519
      <HStack space={2} flexWrap="wrap">
520
        <Tag>Default</Tag>
521
        <Tag colorScheme="blue">Blue</Tag>
522
        <Tag colorScheme="green">Green</Tag>
523
        <Tag colorScheme="red">Red</Tag>
524
      </HStack>
525
      
526
      {/* Tag variants */}
527
      <HStack space={2} flexWrap="wrap">
528
        <Tag variant="solid" colorScheme="blue">Solid</Tag>
529
        <Tag variant="subtle" colorScheme="blue">Subtle</Tag>
530
        <Tag variant="outline" colorScheme="blue">Outline</Tag>
531
      </HStack>
532
      
533
      {/* Tag sizes */}
534
      <HStack space={2} alignItems="center">
535
        <Tag size="sm">Small</Tag>
536
        <Tag size="md">Medium</Tag>
537
        <Tag size="lg">Large</Tag>
538
      </HStack>
539
      
540
      {/* Closable tags */}
541
      <HStack space={2} flexWrap="wrap">
542
        <Tag>
543
          <Tag.Label>Closable Tag</Tag.Label>
544
          <Tag.CloseButton />
545
        </Tag>
546
        <Tag colorScheme="green">
547
          <Tag.Label>Another Tag</Tag.Label>
548
          <Tag.CloseButton />
549
        </Tag>
550
      </HStack>
551
    </VStack>
552
  );
553
}
554
```
555

556
## Data Display Patterns
557

558
### Data Tables
559

560
Creating table-like layouts with NativeBase components:
561

562
```typescript
563
import { VStack, HStack, Text, Divider, ScrollView } from "native-base";
564

565
function DataTable() {
566
  const data = [
567
    { name: "John Doe", role: "Developer", status: "Active" },
568
    { name: "Jane Smith", role: "Designer", status: "Active" },
569
    { name: "Bob Johnson", role: "Manager", status: "Inactive" },
570
  ];
571
  
572
  return (
573
    <VStack space={2}>
574
      {/* Header */}
575
      <HStack space={4} p={2} bg="gray.100">
576
        <Text flex={2} fontWeight="bold">Name</Text>
577
        <Text flex={2} fontWeight="bold">Role</Text>
578
        <Text flex={1} fontWeight="bold">Status</Text>
579
      </HStack>
580
      
581
      <Divider />
582
      
583
      {/* Data rows */}
584
      {data.map((item, index) => (
585
        <VStack key={index}>
586
          <HStack space={4} p={2}>
587
            <Text flex={2}>{item.name}</Text>
588
            <Text flex={2}>{item.role}</Text>
589
            <Badge 
590
              flex={1} 
591
              colorScheme={item.status === 'Active' ? 'success' : 'gray'}
592
            >
593
              {item.status}
594
            </Badge>
595
          </HStack>
596
          {index < data.length - 1 && <Divider />}
597
        </VStack>
598
      ))}
599
    </VStack>
600
  );
601
}
602
```
603

604
### Gallery Layouts
605

606
Creating image galleries and media grids:
607

608
```typescript
609
import { SimpleGrid, Image, AspectRatio } from "native-base";
610

611
function ImageGallery() {
612
  const images = [
613
    "https://example.com/image1.jpg",
614
    "https://example.com/image2.jpg",
615
    "https://example.com/image3.jpg",
616
    "https://example.com/image4.jpg",
617
  ];
618
  
619
  return (
620
    <SimpleGrid columns={2} spacing={4}>
621
      {images.map((src, index) => (
622
        <AspectRatio key={index} ratio={1}>
623
          <Image source={{ uri: src }} alt={`Image ${index + 1}`} />
624
        </AspectRatio>
625
      ))}
626
    </SimpleGrid>
627
  );
628
}
629
```