0
# Navigation & Feedback
1

2
Navigation aids, alerts, progress indicators, user feedback components, and status communication elements.
3

4
## Capabilities
5

6
### Alert Component
7

8
Alert component for displaying important messages and notifications.
9

10
```typescript { .api }
11
/**
12
 * Alert component for displaying important messages
13
 * @param props - Alert component props
14
 * @returns JSX element representing an alert message
15
 */
16
function Alert(props: IAlertProps): JSX.Element;
17

18
interface IAlertProps extends StyledProps {
19
  status?: "info" | "warning" | "success" | "error";
20
  variant?: "solid" | "left-accent" | "top-accent" | "subtle";
21
  colorScheme?: string;
22
  children?: React.ReactNode;
23
  flexDirection?: "row" | "column";
24
}
25
```
26

27
**Usage Examples:**
28

29
```typescript
30
import { Alert, VStack } from "native-base";
31

32
function AlertExamples() {
33
  return (
34
    <VStack space={3}>
35
      {/* Status alerts */}
36
      <Alert status="info">
37
        <Alert.Icon />
38
        <Alert.Title>Info Alert</Alert.Title>
39
        <Alert.Description>
40
          This is an informational message.
41
        </Alert.Description>
42
      </Alert>
43
      
44
      <Alert status="warning">
45
        <Alert.Icon />
46
        <Alert.Title>Warning Alert</Alert.Title>
47
        <Alert.Description>
48
          This is a warning message.
49
        </Alert.Description>
50
      </Alert>
51
      
52
      <Alert status="success">
53
        <Alert.Icon />
54
        <Alert.Title>Success Alert</Alert.Title>
55
        <Alert.Description>
56
          Operation completed successfully.
57
        </Alert.Description>
58
      </Alert>
59
      
60
      <Alert status="error">
61
        <Alert.Icon />
62
        <Alert.Title>Error Alert</Alert.Title>
63
        <Alert.Description>
64
          An error has occurred.
65
        </Alert.Description>
66
      </Alert>
67
      
68
      {/* Variant alerts */}
69
      <Alert variant="left-accent" status="info">
70
        <Alert.Icon />
71
        <Alert.Title>Left Accent Alert</Alert.Title>
72
      </Alert>
73
      
74
      <Alert variant="solid" status="success">
75
        <Alert.Icon />
76
        <Alert.Title>Solid Alert</Alert.Title>
77
      </Alert>
78
    </VStack>
79
  );
80
}
81
```
82

83
### Badge Component
84

85
Badge component for status indicators and labels.
86

87
```typescript { .api }
88
/**
89
 * Badge component for status indicators and labels
90
 * @param props - Badge component props
91
 * @returns JSX element representing a badge
92
 */
93
function Badge(props: IBadgeProps): JSX.Element;
94

95
interface IBadgeProps extends StyledProps {
96
  children?: React.ReactNode;
97
  variant?: "solid" | "outline" | "subtle";
98
  colorScheme?: string;
99
  startIcon?: JSX.Element;
100
  endIcon?: JSX.Element;
101
  leftIcon?: JSX.Element;
102
  rightIcon?: JSX.Element;
103
  _text?: ITextProps;
104
  _icon?: IIconProps;
105
}
106
```
107

108
**Usage Examples:**
109

110
```typescript
111
import { Badge, HStack, Text, CheckIcon } from "native-base";
112

113
function BadgeExamples() {
114
  return (
115
    <VStack space={3}>
116
      {/* Basic badges */}
117
      <HStack space={2}>
118
        <Badge>Default</Badge>
119
        <Badge colorScheme="primary">Primary</Badge>
120
        <Badge colorScheme="success">Success</Badge>
121
        <Badge colorScheme="warning">Warning</Badge>
122
        <Badge colorScheme="danger">Danger</Badge>
123
      </HStack>
124
      
125
      {/* Variant badges */}
126
      <HStack space={2}>
127
        <Badge variant="solid" colorScheme="info">Solid</Badge>
128
        <Badge variant="outline" colorScheme="info">Outline</Badge>
129
        <Badge variant="subtle" colorScheme="info">Subtle</Badge>
130
      </HStack>
131
      
132
      {/* Badges with icons */}
133
      <HStack space={2}>
134
        <Badge leftIcon={<CheckIcon size="xs" />} colorScheme="success">
135
          Completed
136
        </Badge>
137
        <Badge rightIcon={<Icon name='star' size="xs" />} colorScheme="warning">
138
          Featured  
139
        </Badge>
140
      </HStack>
141
      
142
      {/* Badges in context */}
143
      <HStack space={2} alignItems="center">
144
        <Text>Status:</Text>
145
        <Badge colorScheme="success">Active</Badge>
146
      </HStack>
147
    </VStack>
148
  );
149
}
150
```
151

152
### Progress Components
153

154
Progress indicators for showing task completion and loading states.
155

156
```typescript { .api }
157
/**
158
 * Linear progress indicator component
159
 * @returns JSX element representing a progress bar
160
 */
161
function Progress(): JSX.Element;
162

163
/**
164
 * Circular progress indicator component
165
 * @returns JSX element representing a circular progress indicator
166
 */
167
function CircularProgress(): JSX.Element;
168
```
169

170
**Usage Examples:**
171

172
```typescript
173
import { Progress, CircularProgress, VStack, Text } from "native-base";
174

175
function ProgressExamples() {
176
  const [progress, setProgress] = React.useState(45);
177
  
178
  return (
179
    <VStack space={4}>
180
      {/* Linear progress */}
181
      <VStack space={2}>
182
        <Text>Upload Progress: {progress}%</Text>
183
        <Progress value={progress} mx={4} />
184
      </VStack>
185
      
186
      {/* Colored progress */}
187
      <Progress value={75} colorScheme="success" />
188
      
189
      {/* Circular progress */}
190
      <CircularProgress value={progress} />
191
      
192
      {/* Indeterminate progress */}
193
      <Progress isIndeterminate />
194
    </VStack>
195
  );
196
}
197
```
198

199
### Toast Component and Hook
200

201
Toast notifications for temporary messages and feedback.
202

203
```typescript { .api }
204
/**
205
 * Toast component for displaying temporary notifications
206
 * @param props - Toast component props
207
 * @returns JSX element representing a toast notification
208
 */
209
function Toast(props: IToastProps): JSX.Element;
210

211
/**
212
 * Hook for managing toast notifications
213
 * @returns Toast management functions
214
 */
215
function useToast(): ToastFunction;
216

217
interface IToastProps extends StyledProps {
218
  id?: string | number;
219
  title?: string;
220
  description?: string;
221
  status?: "info" | "warning" | "success" | "error";
222
  duration?: number;
223
  isClosable?: boolean;
224
  placement?: "top" | "top-right" | "top-left" | "bottom" | "bottom-left" | "bottom-right";
225
  render?: (props: any) => JSX.Element;
226
  onCloseComplete?: () => void;
227
  variant?: "solid" | "subtle" | "left-accent" | "top-accent" | "outline";
228
  accessibilityAnnouncement?: string;
229
  accessibilityLiveRegion?: "polite" | "assertive";
230
}
231

232
interface ToastFunction {
233
  show: (props: IToastProps) => string | number;
234
  close: (id: string | number) => void;
235
  closeAll: () => void;
236
  update: (id: string | number, props: Partial<IToastProps>) => void;
237
  isActive: (id: string | number) => boolean;
238
}
239
```
240

241
**Usage Examples:**
242

243
```typescript
244
import { useToast, Button, VStack } from "native-base";
245

246
function ToastExamples() {
247
  const toast = useToast();
248
  
249
  const showSuccessToast = () => {
250
    toast.show({
251
      title: "Success",
252
      description: "Operation completed successfully",
253
      status: "success",
254
      duration: 3000,
255
      isClosable: true,
256
    });
257
  };
258
  
259
  const showErrorToast = () => {
260
    toast.show({
261
      title: "Error",
262
      description: "Something went wrong",
263
      status: "error",
264
      placement: "top",
265
    });
266
  };
267
  
268
  const showCustomToast = () => {
269
    toast.show({
270
      render: ({ id }) => (
271
        <Box bg="blue.500" px={4} py={2} rounded="md">
272
          <Text color="white">Custom toast content</Text>
273
        </Box>
274
      ),
275
    });
276
  };
277
  
278
  return (
279
    <VStack space={3}>
280
      <Button onPress={showSuccessToast}>Show Success Toast</Button>
281
      <Button onPress={showErrorToast}>Show Error Toast</Button>
282
      <Button onPress={showCustomToast}>Show Custom Toast</Button>
283
      <Button onPress={() => toast.closeAll()}>Close All Toasts</Button>
284
    </VStack>
285
  );
286
}
287
```
288

289
### Breadcrumb Component
290

291
Navigation breadcrumb component for hierarchical navigation.
292

293
```typescript { .api }
294
/**
295
 * Breadcrumb navigation component
296
 * @param props - Breadcrumb component props
297
 * @returns JSX element representing navigation breadcrumbs
298
 */
299
function Breadcrumb(props: IBreadcrumbProps): JSX.Element;
300

301
interface IBreadcrumbProps extends StyledProps {
302
  separator?: JSX.Element | string;
303
  spacing?: ResponsiveValue<string | number>;
304
  children?: React.ReactNode;
305
}
306
```
307

308
**Usage Examples:**
309

310
```typescript
311
import { Breadcrumb, ChevronRightIcon } from "native-base";
312

313
function BreadcrumbExamples() {
314
  return (
315
    <VStack space={4}>
316
      {/* Basic breadcrumb */}
317
      <Breadcrumb>
318
        <Breadcrumb.Item>
319
          <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
320
        </Breadcrumb.Item>
321
        <Breadcrumb.Item>
322
          <Breadcrumb.Link href="#">Category</Breadcrumb.Link>
323
        </Breadcrumb.Item>
324
        <Breadcrumb.Item isCurrentPage>
325
          <Breadcrumb.Link>Current Page</Breadcrumb.Link>
326
        </Breadcrumb.Item>
327
      </Breadcrumb>
328
      
329
      {/* Custom separator */}
330
      <Breadcrumb separator={<ChevronRightIcon size="xs" />}>
331
        <Breadcrumb.Item>
332
          <Breadcrumb.Link href="#">Docs</Breadcrumb.Link>
333
        </Breadcrumb.Item>
334
        <Breadcrumb.Item>
335
          <Breadcrumb.Link href="#">Components</Breadcrumb.Link>
336
        </Breadcrumb.Item>
337
        <Breadcrumb.Item isCurrentPage>
338
          <Breadcrumb.Link>Breadcrumb</Breadcrumb.Link>
339
        </Breadcrumb.Item>
340
      </Breadcrumb>
341
    </VStack>
342
  );
343
}
344
```
345

346
### Skeleton Component
347

348
Skeleton loader component for loading states.
349

350
```typescript { .api }
351
/**
352
 * Skeleton loader component for loading states
353
 * @param props - Skeleton component props
354
 * @returns JSX element representing a skeleton loader
355
 */
356
function Skeleton(props: ISkeletonProps): JSX.Element;
357

358
interface ISkeletonProps extends StyledProps {
359
  children?: React.ReactNode;
360
  isLoaded?: boolean;
361
  fadeDuration?: number;
362
  speed?: number;
363
  colorScheme?: string;
364
  startColor?: string;
365
  endColor?: string;
366
  size?: string | number;
367
  height?: ResponsiveValue<string | number>;
368
  width?: ResponsiveValue<string | number>;
369
}
370
```
371

372
**Usage Examples:**
373

374
```typescript
375
import { Skeleton, VStack, HStack, Text } from "native-base";
376

377
function SkeletonExamples() {
378
  const [isLoaded, setIsLoaded] = React.useState(false);
379
  
380
  React.useEffect(() => {
381
    const timer = setTimeout(() => setIsLoaded(true), 3000);
382
    return () => clearTimeout(timer);
383
  }, []);
384
  
385
  return (
386
    <VStack space={4}>
387
      {/* Basic skeleton */}
388
      <Skeleton h="20" />
389
      
390
      {/* Skeleton with content */}
391
      <Skeleton isLoaded={isLoaded}>
392
        <Text>This content will show after loading</Text>
393
      </Skeleton>
394
      
395
      {/* Skeleton composition */}
396
      <VStack space={3}>
397
        <HStack space={2}>
398
          <Skeleton size="40" rounded="full" />
399
          <VStack space={2} flex={1}>
400
            <Skeleton h="3" />
401
            <Skeleton h="3" w="70%" />
402
          </VStack>
403
        </HStack>
404
        
405
        <Skeleton h="32" />
406
        
407
        <HStack space={2}>
408
          <Skeleton h="3" flex={1} />
409
          <Skeleton h="3" flex={1} />
410
          <Skeleton h="3" flex={1} />
411
        </HStack>
412
      </VStack>
413
      
414
      {/* Custom colors */}
415
      <Skeleton 
416
        h="20" 
417
        startColor="coolGray.100" 
418
        endColor="warmGray.300" 
419
      />
420
    </VStack>
421
  );
422
}
423
```
424

425
### Spinner Component
426

427
Loading spinner component for indicating activity.
428

429
```typescript { .api }
430
/**
431
 * Loading spinner component
432
 * @param props - Spinner component props
433
 * @returns JSX element representing a loading spinner
434
 */
435
function Spinner(props: ISpinnerProps): JSX.Element;
436

437
interface ISpinnerProps extends StyledProps {
438
  size?: "sm" | "lg" | number;
439
  color?: ResponsiveValue<string>;
440
  thickness?: string;
441
  speed?: string;
442
  emptyColor?: string;
443
  label?: string;
444
  accessibilityLabel?: string;
445
}
446
```
447

448
**Usage Examples:**
449

450
```typescript
451
import { Spinner, HStack, VStack, Text } from "native-base";
452

453
function SpinnerExamples() {
454
  return (
455
    <VStack space={4}>
456
      {/* Basic spinners */}
457
      <HStack space={4} alignItems="center">
458
        <Spinner size="sm" />
459
        <Spinner />
460
        <Spinner size="lg" />
461
      </HStack>
462
      
463
      {/* Colored spinners */}
464
      <HStack space={4} alignItems="center">
465
        <Spinner color="blue.500" />
466
        <Spinner color="green.500" />
467
        <Spinner color="red.500" />
468
      </HStack>
469
      
470
      {/* Spinner with text */}
471
      <HStack space={2} alignItems="center">
472
        <Spinner color="blue.500" />
473
        <Text>Loading...</Text>
474
      </HStack>
475
      
476
      {/* Custom spinner */}
477
      <Spinner 
478
        thickness="4px"
479
        speed="0.65s"
480
        emptyColor="gray.200"
481
        color="blue.500"
482
        size="xl"
483
      />
484
    </VStack>
485
  );
486
}
487
```
488

489
## Feedback Patterns
490

491
### Loading States
492

493
Common patterns for handling loading states:
494

495
```typescript
496
import { Skeleton, Spinner, Button, VStack } from "native-base";
497

498
function LoadingStates() {
499
  const [isLoading, setIsLoading] = React.useState(false);
500
  const [data, setData] = React.useState(null);
501
  
502
  const loadData = async () => {
503
    setIsLoading(true);
504
    try {
505
      // Simulate API call
506
      await new Promise(resolve => setTimeout(resolve, 2000));
507
      setData("Loaded data");
508
    } finally {
509
      setIsLoading(false);
510
    }
511
  };
512
  
513
  return (
514
    <VStack space={4}>
515
      <Button onPress={loadData} isLoading={isLoading}>
516
        Load Data
517
      </Button>
518
      
519
      <Skeleton isLoaded={!isLoading}>
520
        <Text>{data || "No data loaded"}</Text>
521
      </Skeleton>
522
    </VStack>
523
  );
524
}
525
```
526

527
### Status Communication
528

529
Comprehensive status communication patterns:
530

531
```typescript
532
import { Alert, Badge, Toast, useToast, VStack, HStack } from "native-base";
533

534
function StatusCommunication() {
535
  const toast = useToast();
536
  
537
  const showStatus = (status: string) => {
538
    toast.show({
539
      title: `Status: ${status}`,
540
      status: status as any,
541
      duration: 2000,
542
    });
543
  };
544
  
545
  return (
546
    <VStack space={4}>
547
      {/* Persistent status */}
548
      <Alert status="info">
549
        <Alert.Icon />
550
        <Alert.Title>System Status</Alert.Title>
551
        <Alert.Description>All systems operational</Alert.Description>
552
      </Alert>
553
      
554
      {/* Quick status indicators */}
555
      <HStack space={2} alignItems="center">
556
        <Text>Server:</Text>
557
        <Badge colorScheme="success">Online</Badge>
558
        <Text>Database:</Text>
559
        <Badge colorScheme="warning">Slow</Badge>
560
      </HStack>
561
      
562
      {/* Temporary feedback */}
563
      <HStack space={2}>
564
        <Button onPress={() => showStatus('success')}>Success</Button>
565
        <Button onPress={() => showStatus('error')}>Error</Button>
566
        <Button onPress={() => showStatus('warning')}>Warning</Button>
567
      </HStack>
568
    </VStack>
569
  );
570
}
571
```
572

573
### Fab Component
574

575
Floating Action Button component for primary actions that remain accessible throughout the user's journey.
576

577
```typescript { .api }
578
/**
579
 * Floating Action Button for primary actions
580
 * @param props - Fab component props
581
 * @returns JSX element representing a floating action button
582
 */
583
function Fab(props: IFabProps): JSX.Element;
584

585
interface IFabProps extends IButtonProps {
586
  placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
587
  label?: JSX.Element | string;
588
  icon?: JSX.Element;
589
  renderInPortal?: boolean;
590
}
591
```
592

593
**Usage Examples:**
594

595
```typescript
596
import { Fab, AddIcon, EditIcon } from "native-base";
597

598
// Basic FAB
599
<Fab
600
  icon={<AddIcon />}
601
  onPress={() => console.log("Add new item")}
602
/>
603

604
// FAB with label
605
<Fab
606
  icon={<AddIcon />}
607
  label="Add Item"
608
  onPress={() => console.log("Add new item")}
609
/>
610

611
// FAB with custom placement
612
<Fab
613
  placement="top-right"
614
  icon={<EditIcon />}
615
  colorScheme="blue"
616
  onPress={() => console.log("Edit mode")}
617
/>
618

619
// FAB with custom styling
620
<Fab
621
  icon={<AddIcon />}
622
  bg="gradient.500"
623
  shadow={4}
624
  size="lg"
625
  _pressed={{ bg: "gradient.600" }}
626
  onPress={() => console.log("Create something")}
627
/>
628

629
// FAB rendered outside portal (for specific layout needs)
630
<Fab
631
  icon={<AddIcon />}
632
  renderInPortal={false}
633
  placement="bottom-right"
634
  onPress={() => console.log("Add in context")}
635
/>
636
```