Skip to main content

Incubator.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).
When adding a FlatList \ ScrollView to the content be sure to use one from react-native-gesture-handler (see this link for SectionList).

Usage​

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

API​

containerProps​

Extra props for the container ViewProps

containerStyle​

The Dialogs container style (it is set to {position: 'absolute'}) ViewStyle `

direction​

The direction from which and to which the dialog is animating \ panning (default down). up | down | left | right

headerProps​

The Dialog's header (title, subtitle etc) DialogHeaderProps

ignoreBackgroundPress​

Whether or not to ignore background press. boolean

modalProps​

Pass props to the dialog modal ModalProps

onDismiss​

Callback that is called after the dialog's dismiss (after the animation has ended). (props?: DialogProps) => void

showClose​

Show the close button boolean

testID​

Used to locate this view in end-to-end tests.
The container has the original id.
Supported inner elements IDs:
${TestID}.modal - the Modal's id.
${TestID}.overlayFadingBackground - the fading background id. string

visible​

The visibility of the dialog boolean