Modal

@shopify/shop-minis-platform-sdk / components/Modal

MODAL_HEADER_HEIGHT

Renames and re-exports HEADER_HEIGHT

MODAL_HEADER_ICON_LEFT_BOUNDING_BOX

Renames and re-exports HEADER_ICON_LEFT_BOUNDING_BOX

MODAL_HEADER_ICON_RIGHT_BOUNDING_BOX

Renames and re-exports HEADER_ICON_RIGHT_BOUNDING_BOX

ModalHeaderLayoutVariant

ModalHeaderLayoutVariant: "solid" | "overlay"

---

Modal()

Modal(__namedParameters): Element

A modal component with an animated entrance/exit.

Parameters

Parameter	Type
__namedParameters	ModalProps

Returns

Element

Deprecated

use useSheet instead

The height of the modal can either reflect the size of the given children or a fixed height can be set. When using auto sizing you must be careful to never pass so much content to overflow on small screen sizes.

When paired with <ModalScrollView /> the children can scroll.

Component

Example

const [isOpen, setIsOpen] = useState(false)

return (
  <>
    <Button
      text="Open Modal"
      disabled={isOpen}
      onPress={() => setIsOpen(true)}
    />
    <Modal isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
      <SomeContent />
    </Modal>
  </>
)

---

ModalSafeArea()

ModalSafeArea(__namedParameters): Element

Parameters

Parameter

Type

__namedParameters

ModalSafeAreaProps & BackgroundColorProps\<object> & OpacityProps\<object> & VisibleProps\<object> & LayoutProps\<object> & SpacingProps\<object> & object & object & object & object & object & object & object & Omit\<ViewProps & object, "width" | "height" | "borderRadius" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight" | "overflow" | "aspectRatio" | "alignContent" | "alignItems" | "alignSelf" | "justifyContent" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginHorizontal" | "marginVertical" | "marginStart" | "marginEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingHorizontal" | "paddingVertical" | "paddingStart" | "paddingEnd" | "columnGap" | "rowGap" | "gap" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopWidth" | "borderStartWidth" | "borderEndWidth" | "borderWidth" | "borderColor" | "borderTopColor" | "borderRightColor" | "borderLeftColor" | "borderBottomColor" | "borderStartColor" | "borderEndColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomStartRadius" | "borderBottomEndRadius" | "borderTopStartRadius" | "borderTopEndRadius" | "shadowOpacity" | "shadowOffset" | "shadowRadius" | "elevation" | "position" | "top" | "right" | "bottom" | "left" | "start" | "end" | "backgroundColor" | "opacity" | "visible" | "shadowColor" | "zIndex"> & RefAttributes\<unknown>

Returns

Element

Component

When using <Modal headerLayoutVariant="overlay" /> you can use this component to avoid accidentally overflowing and overlapping the icons