Skip to main content

Dialog

<Dialog
  visible={isVisible}
  onDismiss={() => console.log('dismissed')}
  direction={Dialog.directions.DOWN}
>
  <Text text60>Content</Text>
</Dialog>
INFO
This component support alignment modifiers.
APIThis is the list of additional props for the component

containerProps
ViewProps
​

Extra props for the container

containerStyle
ViewStyle
​

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

direction
up | down | left | right
​

The direction from which and to which the dialog is animating \ panning (default down).. Default is down

disableAnimation
boolean
​

Disable animation (default is false) In some cases you might want to disable the animation (probably for Android only), this is when the dialog is scrollable and has touchable items in the scrollable area. This is a temporary solution for a reanimated + RN77\8 bug. See https://github.com/software-mansion/react-native-reanimated/issues/6659 and https://github.com/facebook/react-native/issues/49694

headerProps
DialogHeaderProps
​

The Dialog's header (title, subtitle etc)

ignoreBackgroundPress
boolean
​

Whether or not to ignore background press.

modalProps
ModalProps
​

Pass props to the dialog modal

onDismiss
(props?: DialogProps) => void
​

Callback that is called after the dialog's dismiss (after the animation has ended).

showClose
boolean
​

Show the close button

testID
string
​

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.

visible
boolean
​

The visibility of the dialog