react-native-ui-lib/src/incubator/dialog/dialog.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "Dialog",
  "category": "incubator",
  "description": "Component for displaying custom content inside a popup dialog",
  "note": "Use alignment modifiers to control the dialog position (top, bottom, centerV, centerH, etc... by default the dialog is aligned to center).  \nWhen adding a `FlatList` \\ `ScrollView` to the content be sure to use one from `react-native-gesture-handler` (see [this link](https://github.com/software-mansion/react-native-gesture-handler/issues/1380) for `SectionList`).",
  "modifiers": ["alignment"],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx",
  "props": [
    {"name": "visible", "type": "boolean", "description": "The visibility of the dialog"},
    {"name": "headerProps", "type": "DialogHeaderProps", "description": "The Dialog's header (title, subtitle etc)"},
    {
      "name": "containerStyle",
      "type": "ViewStyle",
      "description": "The Dialog`s container style (it is set to {position: 'absolute'})"
    },
    {
      "name": "containerProps",
      "type": "ViewProps",
      "description": "Extra props for the container"
    },
    {
      "name": "onDismiss",
      "type": "(props?: DialogProps) => void",
      "description": "Callback that is called after the dialog's dismiss (after the animation has ended)."
    },
    {
      "name": "direction",
      "type": "up | down | left | right",
      "description": "The direction from which and to which the dialog is animating \\ panning (default down).",
      "default": "down"
    },
    {
      "name": "showClose",
      "type": "boolean",
      "description": "Show the close button"
    },
    {"name": "ignoreBackgroundPress", "type": "boolean", "description": "Whether or not to ignore background press."},
    {"name": "modalProps", "type": "ModalProps", "description": "Pass props to the dialog modal"},
    {
      "name": "testID",
      "type": "string",
      "description": "Used to locate this view in end-to-end tests.  \nThe container has the original id.  \nSupported inner elements IDs:  \n`${TestID}.modal` - the Modal's id.  \n`${TestID}.overlayFadingBackground` - the fading background id."
    }
  ],
  "snippet": [
    "<Dialog",
    "  visible={isVisible$1}",
    "  onDismiss={() => console.log('dismissed')$2}",
    "  panDirection={PanningProvider.Directions.DOWN$3}",
    ">",
    "  <Text text60>Content</Text>$4",
    "</Dialog>"
  ]
}