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<Dialog visible={isVisible} onDismiss={() => console.log('dismissed')} panDirection={PanningProvider.Directions.DOWN}> <Text text60>Content</Text></Dialog>
#
API#
containerPropsExtra props for the container
ViewProps
#
containerStyleThe Dialogs container style (it is set to {position: 'absolute'})
ViewStyle `
#
directionThe direction from which and to which the dialog is animating \ panning (default down).
up | down | left | right
#
headerPropsThe Dialog's header (title, subtitle etc)
DialogHeaderProps
#
ignoreBackgroundPressWhether or not to ignore background press.
boolean
#
modalPropsPass props to the dialog modal
ModalProps
#
onDismissCallback that is called after the dialog's dismiss (after the animation has ended).
(props?: DialogProps) => void
#
testIDUsed 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
#
visibleThe visibility of the dialog
boolean