Modal

Deprecated

The Modal component is deprecated. It is no longer being maintained or updated.

Use useSheet instead

We strongly urge all users and developers to migrate to use useSheet as it includes more up-to-date information and enhancements catering to current needs.

For more support, please send us an email or send us a message in the #shop-minis channel in the Shopify Partners Slack.

• The Modal component is a comprehensive utility designed for displaying floating layers over the content, such as dialog boxes or custom alerts, within a React Native application. This component makes it easy to implement a modal that adapts to content size changes dynamically, with provisions for a fully customizable header through a `headerComponent`. It also includes default behaviors for solid and overlay header styles, which cater to different design needs.
  
  

  See the typical usage example below:

• 
  

  <Modal
    isOpen={showModal}
    onDismiss={() => setShowModal(false)}
    headerText="Confirm Action"
  >
    <SomeComponent />
  </Modal>

Props

For more details on the props, please refer to the Modal Props.