0
# Feedback Components
1

2
User feedback mechanisms including tooltips, overlays, dialogs, and bottom sheets for enhanced user experience and interaction feedback.
3

4
## Capabilities
5

6
### Overlay
7

8
Modal overlay component for creating dialogs, popups, and modal interfaces with backdrop handling and customizable presentation styles.
9

10
```typescript { .api }
11
/**
12
 * Modal overlay for dialogs and popups
13
 */
14
interface OverlayProps {
15
  /** Overlay visibility state */
16
  isVisible: boolean;
17
  /** Children components to display in overlay */
18
  children: React.ReactNode;
19
  /** Backdrop press handler */
20
  onBackdropPress?(): void;
21
  /** Backdrop styles */
22
  backdropStyle?: StyleProp<ViewStyle>;
23
  /** Overlay styles */
24
  overlayStyle?: StyleProp<ViewStyle>;
25
  /** Fullscreen overlay */
26
  fullScreen?: boolean;
27
  /** Animation type */
28
  animationType?: 'slide' | 'fade' | 'none';
29
  /** Support orientation changes */
30
  supportedOrientations?: ('portrait' | 'landscape')[];
31
  /** Window level (iOS) */
32
  windowLevel?: number;
33
}
34
```
35

36
**Usage Examples:**
37

38
```typescript
39
import React, { useState } from 'react';
40
import { Overlay, Button, Text } from 'react-native-elements';
41

42
// Basic overlay
43
const [visible, setVisible] = useState(false);
44

45
<View>
46
  <Button title="Show Overlay" onPress={() => setVisible(true)} />
47
  
48
  <Overlay 
49
    isVisible={visible} 
50
    onBackdropPress={() => setVisible(false)}
51
  >
52
    <View style={{ padding: 20 }}>
53
      <Text h4>Overlay Content</Text>
54
      <Text>This is content inside the overlay.</Text>
55
      <Button 
56
        title="Close" 
57
        onPress={() => setVisible(false)} 
58
        buttonStyle={{ marginTop: 10 }}
59
      />
60
    </View>
61
  </Overlay>
62
</View>
63

64
// Custom styled overlay
65
<Overlay
66
  isVisible={modalVisible}
67
  onBackdropPress={closeModal}
68
  backdropStyle={{ backgroundColor: 'rgba(0,0,0,0.8)' }}
69
  overlayStyle={{
70
    backgroundColor: '#fff',
71
    borderRadius: 15,
72
    padding: 25,
73
    width: '80%',
74
    maxHeight: '60%',
75
  }}
76
  animationType="fade"
77
>
78
  <Text h3 style={{ textAlign: 'center', marginBottom: 20 }}>
79
    Confirmation
80
  </Text>
81
  <Text style={{ textAlign: 'center', marginBottom: 30 }}>
82
    Are you sure you want to delete this item?
83
  </Text>
84
  <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
85
    <Button
86
      title="Cancel"
87
      type="outline"
88
      onPress={closeModal}
89
      buttonStyle={{ width: 100 }}
90
    />
91
    <Button
92
      title="Delete"
93
      buttonStyle={{ backgroundColor: '#f44336', width: 100 }}
94
      onPress={handleDelete}
95
    />
96
  </View>
97
</Overlay>
98

99
// Fullscreen overlay
100
<Overlay
101
  isVisible={fullscreenVisible}
102
  fullScreen
103
  animationType="slide"
104
>
105
  <View style={{ flex: 1, backgroundColor: '#fff' }}>
106
    <Header
107
      centerComponent={{ text: 'Fullscreen Modal' }}
108
      rightComponent={{
109
        icon: 'close',
110
        onPress: () => setFullscreenVisible(false)
111
      }}
112
    />
113
    <View style={{ flex: 1, padding: 20 }}>
114
      <Text>Fullscreen overlay content goes here...</Text>
115
    </View>
116
  </View>
117
</Overlay>
118

119
// Loading overlay
120
<Overlay
121
  isVisible={isLoading}
122
  backdropStyle={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
123
  overlayStyle={{
124
    backgroundColor: 'transparent',
125
    elevation: 0,
126
    shadowOpacity: 0,
127
  }}
128
>
129
  <View style={{
130
    backgroundColor: '#fff',
131
    padding: 30,
132
    borderRadius: 10,
133
    alignItems: 'center',
134
  }}>
135
    <ActivityIndicator size="large" color="#007AFF" />
136
    <Text style={{ marginTop: 15, fontSize: 16 }}>Loading...</Text>
137
  </View>
138
</Overlay>
139
```
140

141
### Tooltip
142

143
Contextual information popup component that displays helpful information when users interact with UI elements.
144

145
```typescript { .api }
146
/**
147
 * Contextual information popup
148
 */
149
interface TooltipProps {
150
  /** Tooltip content */
151
  popover: React.ReactElement;
152
  /** Children element that triggers tooltip */
153
  children: React.ReactElement;
154
  /** Tooltip height */
155
  height?: number;
156
  /** Tooltip width */
157
  width?: number;
158
  /** Background color */
159
  backgroundColor?: string;
160
  /** Highlight color */
161
  highlightColor?: string;
162
  /** Container styles */
163
  containerStyle?: StyleProp<ViewStyle>;
164
  /** Popover styles */
165
  popoverStyle?: StyleProp<ViewStyle>;
166
  /** Overlay color */
167
  overlayColor?: string;
168
  /** Pointer events */
169
  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
170
  /** Toggle tooltip on press */
171
  toggleOnPress?: boolean;
172
  /** Action type */
173
  toggleAction?: 'onPress' | 'onLongPress' | 'onPressIn' | 'onPressOut';
174
  /** Close on backdrop press */
175
  closeOnlyOnBackdropPress?: boolean;
176
  /** With pointer */
177
  withPointer?: boolean;
178
  /** Pointer color */
179
  pointerColor?: string;
180
  /** With overlay */
181
  withOverlay?: boolean;
182
  /** Skip iOS modal */
183
  skipAndroidStatusBar?: boolean;
184
}
185
```
186

187
**Usage Examples:**
188

189
```typescript
190
import React from 'react';
191
import { Tooltip, Button, Text, Icon } from 'react-native-elements';
192

193
// Basic tooltip
194
<Tooltip
195
  popover={<Text>This is a helpful tooltip message</Text>}
196
  height={40}
197
  width={200}
198
  backgroundColor="#333"
199
>
200
  <Button title="Hover for tooltip" />
201
</Tooltip>
202

203
// Tooltip with custom styling
204
<Tooltip
205
  popover={
206
    <View>
207
      <Text style={{ color: '#fff', fontSize: 14 }}>
208
        Click here to save your changes
209
      </Text>
210
    </View>
211
  }
212
  backgroundColor="#007AFF"
213
  highlightColor="rgba(0, 122, 255, 0.2)"
214
  height={60}
215
  width={220}
216
  containerStyle={{
217
    borderRadius: 8,
218
  }}
219
  pointerColor="#007AFF"
220
  withPointer={true}
221
>
222
  <Icon
223
    name="save"
224
    type="material"
225
    color="#007AFF"
226
    size={30}
227
  />
228
</Tooltip>
229

230
// Tooltip with long press trigger
231
<Tooltip
232
  popover={
233
    <Text style={{ color: '#fff' }}>
234
      Long press activated tooltip with detailed information
235
      about this feature.
236
    </Text>
237
  }
238
  height={80}
239
  width={250}
240
  backgroundColor="#333"
241
  toggleAction="onLongPress"
242
  withOverlay={true}
243
  overlayColor="rgba(0,0,0,0.3)"
244
>
245
  <Text style={{ color: '#007AFF', textDecorationLine: 'underline' }}>
246
    Long press me for info
247
  </Text>
248
</Tooltip>
249

250
// Tooltip with rich content
251
<Tooltip
252
  popover={
253
    <View style={{ padding: 10 }}>
254
      <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 16 }}>
255
        Pro Feature
256
      </Text>
257
      <Text style={{ color: '#fff', marginTop: 5 }}>
258
        This feature is available in the Pro version.
259
      </Text>
260
      <Button
261
        title="Upgrade"
262
        buttonStyle={{
263
          backgroundColor: '#4caf50',
264
          marginTop: 10,
265
          paddingHorizontal: 20,
266
        }}
267
        titleStyle={{ fontSize: 12 }}
268
      />
269
    </View>
270
  }
271
  height={120}
272
  width={200}
273
  backgroundColor="#333"
274
  containerStyle={{
275
    borderRadius: 10,
276
  }}
277
>
278
  <View style={{
279
    flexDirection: 'row',
280
    alignItems: 'center',
281
    padding: 10,
282
    backgroundColor: '#f0f0f0',
283
    borderRadius: 5,
284
  }}>
285
    <Icon name="star" color="#ffc107" />
286
    <Text style={{ marginLeft: 5 }}>Premium Feature</Text>
287
  </View>
288
</Tooltip>
289
```
290

291
### Dialog
292

293
Modal dialog component for displaying important information, confirmations, and user interactions with various content layouts.
294

295
```typescript { .api }
296
/**
297
 * Modal dialog component
298
 */
299
interface DialogProps {
300
  /** Dialog visibility */
301
  isVisible: boolean;
302
  /** Dialog title */
303
  title?: string;
304
  /** Dialog message */
305
  message?: string;
306
  /** Children components */
307
  children?: React.ReactNode;
308
  /** Actions array */
309
  actions?: DialogAction[];
310
  /** Backdrop press handler */
311
  onBackdropPress?(): void;
312
  /** Overlay styles */
313
  overlayStyle?: StyleProp<ViewStyle>;
314
  /** Dialog styles */
315
  dialogStyle?: StyleProp<ViewStyle>;
316
  /** Title styles */
317
  titleStyle?: StyleProp<TextStyle>;
318
  /** Message styles */
319
  messageStyle?: StyleProp<TextStyle>;
320
}
321

322
/**
323
 * Dialog loading component
324
 */
325
interface DialogLoadingProps {
326
  /** Loading visibility */
327
  isVisible: boolean;
328
  /** Loading message */
329
  loadingText?: string;
330
  /** Activity indicator props */
331
  activityIndicatorProps?: ActivityIndicatorProps;
332
  /** Overlay styles */
333
  overlayStyle?: StyleProp<ViewStyle>;
334
}
335

336
/**
337
 * Dialog title component
338
 */
339
interface DialogTitleProps {
340
  /** Title text */
341
  title?: string;
342
  /** Title styles */
343
  titleStyle?: StyleProp<TextStyle>;
344
}
345

346
/**
347
 * Dialog action configuration
348
 */
349
interface DialogAction {
350
  /** Action title */
351
  title: string;
352
  /** Action handler */
353
  onPress: () => void;
354
  /** Button styles */
355
  buttonStyle?: StyleProp<ViewStyle>;
356
  /** Title styles */
357
  titleStyle?: StyleProp<TextStyle>;
358
}
359
```
360

361
**Usage Examples:**
362

363
```typescript
364
import React, { useState } from 'react';
365
import { Dialog, Button } from 'react-native-elements';
366

367
// Basic confirmation dialog
368
const [dialogVisible, setDialogVisible] = useState(false);
369

370
<View>
371
  <Button title="Show Dialog" onPress={() => setDialogVisible(true)} />
372
  
373
  <Dialog
374
    isVisible={dialogVisible}
375
    title="Confirm Action"
376
    message="Are you sure you want to proceed?"
377
    actions={[
378
      {
379
        title: 'Cancel',
380
        onPress: () => setDialogVisible(false),
381
        buttonStyle: { backgroundColor: '#ccc' },
382
      },
383
      {
384
        title: 'Confirm',
385
        onPress: () => {
386
          handleConfirm();
387
          setDialogVisible(false);
388
        },
389
        buttonStyle: { backgroundColor: '#007AFF' },
390
      },
391
    ]}
392
    onBackdropPress={() => setDialogVisible(false)}
393
  />
394
</View>
395

396
// Loading dialog
397
const [loadingVisible, setLoadingVisible] = useState(false);
398

399
<Dialog.Loading
400
  isVisible={loadingVisible}
401
  loadingText="Processing your request..."
402
  activityIndicatorProps={{
403
    size: 'large',
404
    color: '#007AFF',
405
  }}
406
  overlayStyle={{
407
    backgroundColor: 'rgba(0,0,0,0.7)',
408
  }}
409
/>
410

411
// Custom content dialog
412
<Dialog
413
  isVisible={customDialogVisible}
414
  onBackdropPress={() => setCustomDialogVisible(false)}
415
  dialogStyle={{
416
    borderRadius: 15,
417
    padding: 0,
418
    backgroundColor: '#fff',
419
  }}
420
>
421
  <Dialog.Title 
422
    title="Custom Dialog" 
423
    titleStyle={{ 
424
      fontSize: 20, 
425
      fontWeight: 'bold',
426
      textAlign: 'center',
427
      paddingVertical: 20,
428
    }} 
429
  />
430
  
431
  <View style={{ padding: 20 }}>
432
    <Text style={{ fontSize: 16, marginBottom: 15 }}>
433
      This is a custom dialog with rich content.
434
    </Text>
435
    
436
    <Input
437
      placeholder="Enter your name"
438
      leftIcon={{ type: 'material', name: 'person' }}
439
    />
440
    
441
    <View style={{
442
      flexDirection: 'row',
443
      justifyContent: 'space-between',
444
      marginTop: 20,
445
    }}>
446
      <Button
447
        title="Cancel"
448
        type="outline"
449
        onPress={() => setCustomDialogVisible(false)}
450
        buttonStyle={{ width: 100 }}
451
      />
452
      <Button
453
        title="Save"
454
        onPress={handleSave}
455
        buttonStyle={{ width: 100 }}
456
      />
457
    </View>
458
  </View>
459
</Dialog>
460

461
// Alert dialog with icon
462
<Dialog
463
  isVisible={alertVisible}
464
  title="Success"
465
  message="Your data has been saved successfully!"
466
  actions={[
467
    {
468
      title: 'OK',
469
      onPress: () => setAlertVisible(false),
470
      buttonStyle: { backgroundColor: '#4caf50' },
471
    },
472
  ]}
473
  dialogStyle={{
474
    alignItems: 'center',
475
  }}
476
>
477
  <Icon
478
    name="check-circle"
479
    type="material"
480
    size={60}
481
    color="#4caf50"
482
    style={{ marginBottom: 20 }}
483
  />
484
</Dialog>
485
```
486

487
### BottomSheet
488

489
Bottom sliding panel component for presenting additional content, actions, or navigation options from the bottom of the screen.
490

491
```typescript { .api }
492
/**
493
 * Bottom sliding panel component
494
 */
495
interface BottomSheetProps {
496
  /** BottomSheet visibility */
497
  isVisible: boolean;
498
  /** Container styles */
499
  containerStyle?: StyleProp<ViewStyle>;
500
  /** Modal props */
501
  modalProps?: Partial<ModalProps>;
502
  /** Close handler */
503
  onBackdropPress?(): void;
504
  /** Backdrop styles */
505
  backdropStyle?: StyleProp<ViewStyle>;
506
  /** Children components */
507
  children?: React.ReactNode;
508
}
509
```
510

511
**Usage Examples:**
512

513
```typescript
514
import React, { useState } from 'react';
515
import { BottomSheet, ListItem, Button } from 'react-native-elements';
516

517
// Basic bottom sheet with list options
518
const [bottomSheetVisible, setBottomSheetVisible] = useState(false);
519

520
<View>
521
  <Button 
522
    title="Show Options" 
523
    onPress={() => setBottomSheetVisible(true)} 
524
  />
525
  
526
  <BottomSheet
527
    isVisible={bottomSheetVisible}
528
    onBackdropPress={() => setBottomSheetVisible(false)}
529
  >
530
    <ListItem onPress={() => handleOption('edit')}>
531
      <ListItem.Content>
532
        <ListItem.Title>Edit</ListItem.Title>
533
      </ListItem.Content>
534
    </ListItem>
535
    
536
    <ListItem onPress={() => handleOption('share')}>
537
      <ListItem.Content>
538
        <ListItem.Title>Share</ListItem.Title>
539
      </ListItem.Content>
540
    </ListItem>
541
    
542
    <ListItem onPress={() => handleOption('delete')}>
543
      <ListItem.Content>
544
        <ListItem.Title style={{ color: '#f44336' }}>
545
          Delete
546
        </ListItem.Title>
547
      </ListItem.Content>
548
    </ListItem>
549
    
550
    <ListItem onPress={() => setBottomSheetVisible(false)}>
551
      <ListItem.Content>
552
        <ListItem.Title>Cancel</ListItem.Title>
553
      </ListItem.Content>
554
    </ListItem>
555
  </BottomSheet>
556
</View>
557

558
// Bottom sheet with custom content
559
<BottomSheet
560
  isVisible={customSheetVisible}
561
  onBackdropPress={() => setCustomSheetVisible(false)}
562
  containerStyle={{
563
    backgroundColor: '#fff',
564
    borderTopLeftRadius: 20,
565
    borderTopRightRadius: 20,
566
  }}
567
>
568
  <View style={{ padding: 20 }}>
569
    <Text h4 style={{ textAlign: 'center', marginBottom: 20 }}>
570
      Filter Options
571
    </Text>
572
    
573
    <CheckBox
574
      title="Show completed items"
575
      checked={showCompleted}
576
      onPress={() => setShowCompleted(!showCompleted)}
577
    />
578
    
579
    <CheckBox
580
      title="Show archived items"
581
      checked={showArchived}
582
      onPress={() => setShowArchived(!showArchived)}
583
    />
584
    
585
    <Slider
586
      value={priceRange}
587
      onValueChange={setPriceRange}
588
      minimumValue={0}
589
      maximumValue={1000}
590
      thumbStyle={{ backgroundColor: '#007AFF' }}
591
      minimumTrackTintColor="#007AFF"
592
      style={{ marginVertical: 20 }}
593
    />
594
    <Text>Price range: $0 - ${priceRange}</Text>
595
    
596
    <View style={{
597
      flexDirection: 'row',
598
      justifyContent: 'space-between',
599
      marginTop: 30,
600
    }}>
601
      <Button
602
        title="Clear"
603
        type="outline"
604
        onPress={clearFilters}
605
        buttonStyle={{ width: 100 }}
606
      />
607
      <Button
608
        title="Apply"
609
        onPress={applyFilters}
610
        buttonStyle={{ width: 100 }}
611
      />
612
    </View>
613
  </View>
614
</BottomSheet>
615

616
// Bottom sheet with icons and descriptions
617
<BottomSheet
618
  isVisible={actionSheetVisible}
619
  onBackdropPress={() => setActionSheetVisible(false)}
620
>
621
  <ListItem onPress={() => handleAction('camera')}>
622
    <Icon name="camera-alt" type="material" color="#007AFF" />
623
    <ListItem.Content>
624
      <ListItem.Title>Take Photo</ListItem.Title>
625
      <ListItem.Subtitle>Use device camera</ListItem.Subtitle>
626
    </ListItem.Content>
627
  </ListItem>
628
  
629
  <ListItem onPress={() => handleAction('gallery')}>
630
    <Icon name="photo-library" type="material" color="#4caf50" />
631
    <ListItem.Content>
632
      <ListItem.Title>Choose from Gallery</ListItem.Title>
633
      <ListItem.Subtitle>Select existing photo</ListItem.Subtitle>
634
    </ListItem.Content>
635
  </ListItem>
636
  
637
  <ListItem onPress={() => handleAction('remove')}>
638
    <Icon name="delete" type="material" color="#f44336" />
639
    <ListItem.Content>
640
      <ListItem.Title style={{ color: '#f44336' }}>
641
        Remove Photo
642
      </ListItem.Title>
643
      <ListItem.Subtitle>Delete current photo</ListItem.Subtitle>
644
    </ListItem.Content>
645
  </ListItem>
646
</BottomSheet>
647
```