Skip to main content
Version: Bleeding Edge 🚧

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.

Import

import { Dialog } from "@rneui/themed";

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

note

Includes all Overlay props.

NameTypeDefaultDescription
childrenReactNodeAdd Enclosed components.
onLongPressGestureResponderEventHandlerCalled when a long-tap gesture is detected.
onPressInGestureResponderEventHandlerCalled when a touch is engaged before onPress.
onPressOutGestureResponderEventHandlerCalled when a touch is released before onPress.
overlayStyleView StyleAdd additional styling to the internal Overlay component.
pressablePropsPressableProps except click handlersNone