Dialog

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

You can wrap any component with a simple Dialog component to display quick information to the user.

Also receives all Overlay props except fullscreen.

Components

• Dialog.Actions Define Dialog Actions using this component.
• Dialog.Button This is used to add a button to the Dialog. Receives all Button props.
• Dialog.LoadingDialogLoader allows adding loader to the Dialog. Loader is simply ActivityIndicator.
• Dialog.TitleDialogTitle allows you to add title to the Dialog.

Usage

Web-platform specific note:

You must pass a valid React Native Modal component implementation into ModalComponent prop because Modal component is not implemented yet in react-native-web

...
import Modal from 'modal-react-native-web';

...

<Dialog ModalComponent={Modal} ... />
...

---

Props

Dialog

• children
• isVisible
• overlayStyle
• pressableProps

Dialog.Actions

• children

Dialog.Button

None

Dialog.Loading

• loadingProps
• loadingStyle

Dialog.Title

• title
• titleProps
• titleStyle

Reference

Dialog

children

Add Enclosed components.

Type	Default
ReactNode	None

---

isVisible

If true, the overlay is visible.

If true, the dialog is visible.

Type	Default
boolean	None

---

overlayStyle

Style of the actual overlay.

Add additional styling to the internal Overlay component.

Type	Default
View style(Object)	None

---

pressableProps

Type	Default
Omit<PressableProps, "onPress" or "onLongPress" or "onPressIn" or "onPressOut">	None

---

Dialog.Actions

children

Add Enclosed components as an action to the dialog.

Type	Default
ReactNode	None

---

Dialog.Button

None

Dialog.Loading

loadingProps

Add additional props for ActivityIndicator component

Type	Default
ActivityIndicatorProps	{ size: 'large' }

---

loadingStyle

Add additional styling for loading component.

Type	Default
View style(Object)	None

---

Dialog.Title

title

Add Dialog title.

Type	Default
string	None

---

titleProps

Add additional props for Text component.

Type	Default
TextProps	None

---

titleStyle

Add additional styling for title component.

Type	Default
Text Style(Object)	None

---