0
# Overlays & Feedback
1

2
Modal and overlay components including dialogs, menus, modals, portals, and feedback components.
3

4
## Capabilities
5

6
### Dialog
7

8
Modal dialog component with multiple sub-components for content organization.
9

10
```typescript { .api }
11
namespace Dialog {
12
  function Title(props: DialogTitleProps): JSX.Element;
13
  function Content(props: DialogContentProps): JSX.Element;
14
  function Actions(props: DialogActionsProps): JSX.Element;
15
  function ScrollArea(props: DialogScrollAreaProps): JSX.Element;
16
  function Icon(props: DialogIconProps): JSX.Element;
17
}
18

19
interface DialogTitleProps {
20
  children: React.ReactNode;
21
  style?: StyleProp<TextStyle>;
22
  theme?: ThemeProp;
23
}
24

25
interface DialogContentProps {
26
  children: React.ReactNode;
27
  style?: StyleProp<ViewStyle>;
28
  theme?: ThemeProp;
29
}
30

31
interface DialogActionsProps {
32
  children: React.ReactNode;
33
  style?: StyleProp<ViewStyle>;
34
  theme?: ThemeProp;
35
}
36

37
interface DialogScrollAreaProps {
38
  children: React.ReactNode;
39
  style?: StyleProp<ViewStyle>;
40
  theme?: ThemeProp;
41
}
42

43
interface DialogIconProps {
44
  icon: IconSource;
45
  size?: number;
46
  style?: StyleProp<ViewStyle>;
47
  theme?: ThemeProp;
48
}
49
```
50

51
### Menu
52

53
Dropdown menu component with menu items.
54

55
```typescript { .api }
56
function Menu(props: MenuProps): JSX.Element;
57

58
interface MenuProps {
59
  visible: boolean;
60
  onDismiss: () => void;
61
  anchor: React.ReactNode | { x: number; y: number };
62
  children: React.ReactNode;
63
  contentStyle?: StyleProp<ViewStyle>;
64
  style?: StyleProp<ViewStyle>;
65
  theme?: ThemeProp;
66
}
67

68
namespace Menu {
69
  function Item(props: MenuItemProps): JSX.Element;
70
}
71

72
interface MenuItemProps {
73
  title: string;
74
  icon?: IconSource;
75
  onPress?: () => void;
76
  disabled?: boolean;
77
  accessibilityLabel?: string;
78
  style?: StyleProp<ViewStyle>;
79
  titleStyle?: StyleProp<TextStyle>;
80
  theme?: ThemeProp;
81
}
82
```
83

84
### Modal
85

86
Basic modal overlay component.
87

88
```typescript { .api }
89
function Modal(props: ModalProps): JSX.Element;
90

91
interface ModalProps {
92
  visible: boolean;
93
  onDismiss?: () => void;
94
  children: React.ReactNode;
95
  dismissable?: boolean;
96
  contentContainerStyle?: StyleProp<ViewStyle>;
97
  style?: StyleProp<ViewStyle>;
98
  theme?: ThemeProp;
99
}
100
```
101

102
### Portal
103

104
Portal component for rendering content outside normal component hierarchy.
105

106
```typescript { .api }
107
function Portal(props: PortalProps): JSX.Element;
108

109
interface PortalProps {
110
  children: React.ReactNode;
111
}
112

113
namespace Portal {
114
  function Host(props: PortalHostProps): JSX.Element;
115
}
116

117
interface PortalHostProps {
118
  children: React.ReactNode;
119
}
120
```
121

122
### Snackbar
123

124
Toast message component for brief feedback.
125

126
```typescript { .api }
127
function Snackbar(props: SnackbarProps): JSX.Element;
128

129
interface SnackbarProps {
130
  visible: boolean;
131
  onDismiss: () => void;
132
  children: React.ReactNode;
133
  action?: {
134
    label: string;
135
    onPress: () => void;
136
    accessibilityLabel?: string;
137
  };
138
  duration?: number;
139
  elevation?: MD3Elevation;
140
  onIconPress?: () => void;
141
  icon?: IconSource;
142
  iconAccessibilityLabel?: string;
143
  rippleColor?: ColorValue;
144
  style?: StyleProp<ViewStyle>;
145
  wrapperStyle?: StyleProp<ViewStyle>;
146
  theme?: ThemeProp;
147
}
148
```
149

150
### Tooltip
151

152
Tooltip component for contextual information.
153

154
```typescript { .api }
155
function Tooltip(props: TooltipProps): JSX.Element;
156

157
interface TooltipProps {
158
  title: string;
159
  children: React.ReactElement;
160
  enterTouchDelay?: number;
161
  leaveTouchDelay?: number;
162
  theme?: ThemeProp;
163
}
164
```
165

166
**Usage Examples:**
167

168
```typescript
169
import React, { useState } from 'react';
170
import { Dialog, Menu, Modal, Snackbar, Portal, Button, Text } from 'react-native-paper';
171

172
// Dialog example
173
function DialogExample() {
174
  const [visible, setVisible] = useState(false);
175

176
  return (
177
    <Portal>
178
      <Dialog visible={visible} onDismiss={() => setVisible(false)}>
179
        <Dialog.Title>Alert</Dialog.Title>
180
        <Dialog.Content>
181
          <Text>This is a dialog</Text>
182
        </Dialog.Content>
183
        <Dialog.Actions>
184
          <Button onPress={() => setVisible(false)}>Done</Button>
185
        </Dialog.Actions>
186
      </Dialog>
187
    </Portal>
188
  );
189
}
190

191
// Menu example
192
function MenuExample() {
193
  const [visible, setVisible] = useState(false);
194

195
  return (
196
    <Menu
197
      visible={visible}
198
      onDismiss={() => setVisible(false)}
199
      anchor={<Button onPress={() => setVisible(true)}>Show menu</Button>}
200
    >
201
      <Menu.Item onPress={() => {}} title="Item 1" />
202
      <Menu.Item onPress={() => {}} title="Item 2" />
203
    </Menu>
204
  );
205
}
206

207
// Snackbar example
208
function SnackbarExample() {
209
  const [visible, setVisible] = useState(false);
210

211
  return (
212
    <Snackbar
213
      visible={visible}
214
      onDismiss={() => setVisible(false)}
215
      action={{
216
        label: 'Undo',
217
        onPress: () => {
218
          // Do something
219
        },
220
      }}
221
    >
222
      Hey there! I'm a Snackbar.
223
    </Snackbar>
224
  );
225
}
226
```