Skip to main content

Dialog

Component for displaying custom content inside a popup dialog
(code example)

tip

This component support alignment modifiers.

note

Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center)

Usage​

Live Editor
<Dialog
 visible={isVisible}
 onDismiss={() => console.log('dismissed')}
 panDirection={PanningProvider.Directions.DOWN}
>
 <Text text60>Content</Text>
</Dialog>
Result
Loading...

API​

containerStyle​

Component's container style ViewStyle

height​

Height string | number

ignoreBackgroundPress​

Whether or not to ignore background press boolean

onDialogDismissed​

Called once the dialog has been dismissed completely (props: any) => void

onDismiss​

Called when clicking on the background (props?: any) => void

overlayBackgroundColor​

The color of the overlay background string

panDirection​

The direction of the allowed pan UP | DOWN | LEFT | RIGHT

pannableHeaderProps​

The props that will be passed to the pannable header any

renderPannableHeader​

If this is added only the header will be pannable. Props are transferred to the 'renderPannableHeader'​

For scrollable content (the children of the dialog) (props: any) => JSX.Element

testID​

The test id for e2e tests string

useSafeArea​

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

visible​

Control visibility of the component boolean

width​

Width string | number