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