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

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

{
  "name": "Modal",
  "category": "overlays",
  "description": "Component that present content on top of the invoking screen",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ModalScreen.tsx",
  "props": [
    {
      "name": "enableModalBlur",
      "type": "boolean",
      "description": "Blurs the modal background when transparent (iOS only)"
    },
    {
      "name": "blurView",
      "type": "JSX.Element",
      "description": "A custom view to use as a BlueView instead of the default one"
    },
    {
      "name": "onBackgroundPress",
      "type": "function",
      "description": "Allow dismissing a modal when clicking on its background"
    },
    {
      "name": "overlayBackgroundColor",
      "type": "string",
      "description": "The background color of the overlay"
    },
    {
      "name": "useGestureHandlerRootView",
      "type": "boolean",
      "description": "Should add a GestureHandlerRootView"
    },
    {
      "name": "useKeyboardAvoidingView",
      "type": "boolean",
      "description": "Should add a KeyboardAvoidingView (iOS only)"
    },
    {
      "name": "keyboardAvoidingViewProps",
      "type": "object",
      "description": "Send additional props to the KeyboardAvoidingView (iOS only)"
    },
    {
      "name": "fixReanimatedInteraction",
      "type": "boolean",
      "description": "Fix RNModal's interaction with react-native-reanimated (Android only, default: true)"
    }
  ],
  "snippet": [
    "<Modal",
    "  visible={visible}",
    "  onBackgroundPress={() => setVisible(false)}",
    "  overlayBackgroundColor=\"rgba(0, 0, 0, 0.7)\"",
    ">",
    "  <View>",
    "    <Text>Modal Content</Text>",
    "  </View>",
    "</Modal>"
  ]
}