Incubator.Dialog
Component for displaying custom content inside a popup dialog
(code example)
This component support alignment modifiers.
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>
ReferenceError: Dialog is not defined
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