useSheet

• The useSheet hook provides a streamlined mechanism to display modals with customizable sheets within React Native applications, particularly useful for encapsulating user interfaces such as forms, settings, or detailed content in a modal overlay. This hook simplifies the modal presentation process by managing modal states and animations effectively.

  Check out a simple demo of the useSheet hook in action by scanning the QR code provided alongside:

  Here's an example of how you might use the useSheet hook in a component:

• 
  

  const MyComponent = () => {
    const openSheet = useSheet();
  
    const handleOpenSheet = () => {
      openSheet((dismiss) => (
        <YourCustomModalContent onDismiss={dismiss} />
      ), {
        HeaderComponent: YourCustomHeader,
        backgroundColor: 'white',
        showCloseButton: true
      });
    };
  
    return (
      <Button onPress={handleOpenSheet} title="Open Sheet" />
    );
  }

Integration

Requirements:

• Ensure your project environment is set up with access to @shopify/shop-minis-platform-sdk. See the quickstart for requirements and to set up a Shop Mini.

Step 1: Importing the hook

Import the useSheet hook from your project's hooks directory or where it's defined:

import { useSheet } from '@shopify/shop-minis-platform-sdk';

Step 2: Using the useSheet hook

Implement the useSheet within your component to manage and display sheets dynamically. You can configure a sheet with customizable content, styles, and additional configurations:

const openCustomSheet = useSheet();

const showUserSettings = () => {
  openCustomSheet (dismiss) => (
    <SettingsModal onClose={dismiss} />
  ), {
    HeaderComponent: SettingsHeader,
    backgroundColor: '#f9f9f9',
    showCloseButton: true
  });
};

In this example, useSheet is used to create a settings modal which can be triggered within the application.

Props

The useSheet hook takes two parameters:

1. modalComponent: A function that must return the JSX or component to be rendered inside the modal. This function receives dismissModal, a method to programmatically close the modal.

2. showSheetOptions (SheetOptions): (Optional) An object defining extra configurations for the sheet:

   • HeaderComponent: A component displayed at the top of the sheet.
   • backgroundColor: The background color of the sheet container.
   • showCloseButton: A boolean to indicate whether a close button should be shown.
   • onCancel: A callback function that fires when the modal is dismissed.
   • contentsStyle: Style object for the inner contents of the sheet.

For more details on the props, please refer to the useSheet parameters and SheetOptions props.