Skip to main content

Dialog

<Dialog
 visible={isVisible}
 onDismiss={() => console.log('dismissed')}
 panDirection={PanningProvider.Directions.DOWN}
>
 <Text text60>Content</Text>
</Dialog>
INFO
This component support alignment modifiers.
APIThis is the list of additional props for the component

containerStyle
ViewStyle
​

Component's container style

height
string | number
​

Height. Default is undefined

ignoreBackgroundPress
boolean
​

Whether or not to ignore background press

onDialogDismissed
(props: any) => void
​

Called once the dialog has been dismissed completely

onDismiss
(props?: any) => void
​

Called when clicking on the background

overlayBackgroundColor
string
​

The color of the overlay background. Default is Colors.rgba(Colors.grey10, 0.6)

panDirection
UP | DOWN | LEFT | RIGHT
​

The direction of the allowed pan. Default is PanningProvider.Directions.DOWN

pannableHeaderProps
any
​

The props that will be passed to the pannable header

renderPannableHeader
(props: any) => JSX.Element
​

For scrollable content (the children of the dialog)If this is added only the header will be pannable. Props are transferred to the 'renderPannableHeader'

testID
string
​

The test id for e2e tests

useSafeArea
boolean
​

In iOS, use safe area, in case component attached to the bottom

visible
boolean
​

Control visibility of the component

width
string | number
​

Width. Default is 90%