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