react-native-ui-lib/src/components/modal/api/modal.api.json

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

{
  "name": "Modal",
  "category": "overlays",
  "description": "Component that present content on top of the invoking screen",
  "extends": ["Modal"],
  "extendsLink": ["https://reactnative.dev/docs/modal"],
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ModalScreen.tsx",
  "images": ["https://media.giphy.com/media/3oFzmfSX8KgvctI4Ks/giphy.gif"],
  "props": [
    {
      "name": "enableModalBlur",
      "type": "boolean",
      "description": "Blurs the modal background when transparent",
      "note": "iOS only"
    },
    {
      "name": "blurView",
      "type": "JSX.Element",
      "description": "A custom view to use as a BlurView instead of the default one"
    },
    {
      "name": "onBackgroundPress",
      "type": "(event: GestureResponderEvent) => void",
      "description": "allow dismissing a modal when clicking on its background"
    },
    {"name": "overlayBackgroundColor", "type": "string", "description": "The background color of the overlay"},
    {"name": "testID", "type": "string", "description": "The modal's end-to-end test identifier"},
    {
      "name": "accessibilityLabel",
      "type": "string",
      "description": "Overrides the text that's read by the screen reader when the user interacts with the element.\\By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space."
    },
    {
      "name": "useGestureHandlerRootView",
      "type": "boolean",
      "description": "Should add a GestureHandlerRootView"
    }
  ],
  "snippet": [
    "<Modal visible={isVisible$1} onBackgroundPress={() => console.log('background pressed')$3}>",
    " <Text text60>Content</Text>$4",
    "</Modal>"
  ]
}