Shelf

• The Shelf component is specifically designed for Minis to provide a smooth and efficient horizontal scrolling experience. Ideal for displaying collections such as books, products, or galleries, the Shelf allows for adjustable spacing between items and the inclusion of custom header and footer components. This functionality enables tailored, engaging layouts while adopting best practices in performance and user experience.

  Integrated with the FlatList from 'react-native-gesture-handler', the Shelf ensures robust performance and smooth gesture handling. The versatility in its design supports various customization features which are highly suitable for displaying content in a visually appealing scrollable row.

  Here is an example of how to integrate the Shelf component within your Mini:

• 
  

  <Shelf
    data={items}
    renderItem={({ item }) => <ItemDisplay item={item} />}
    keyExtractor={(item) => item.id}
    ShelfHeaderComponent={<CustomHeader />}
    ShelfFooterComponent={<CustomFooter />}
    spaceBetweenItems={12}
  />

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.

Integration

Step 1: Importing the Component

Import the Shelf from the @shopify/shop-minis-platform-sdk:

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

Step 2: Using the Shelf

Deploy the Shelf within your application where a horizontally scrollable list is required. Configure it with essential properties such as a data array, a rendering function for each item, and optional components for the list's head and tail:

<Shelf
  data={horizontalDataArray}
  renderItem={renderHorizontalItem}
  keyExtractor={item => item.uniqueKey}
  ShelfHeaderComponent={<YourHeaderComponent />}
  ShelfFooterComponent={<YourFooterComponent />}
  spaceBetweenItems={10}
/>

Examples

Basic Shelf Setup:

<Shelf
  data={bookCollection}
  renderItem={({ item }) => <Book bookDetails={item} />}
  keyExtractor={(item) => item.id}
/>

Advanced Shelf with Custom Spacing and Extra Components:

<Shelf
  data={productLineup}
  renderItem={({ item }) => <ProductCard product={item} />}
  keyExtractor={(item) => item.productId}
  spaceBetweenItems={15}
  ShelfHeaderComponent={<SaleBanner />}
  ShelfFooterComponent={<EndOfListNotice />}
/>

Props

• data (any[]): The dataset for the list.
• renderItem (Function): Render function for each item in the data array.
• keyExtractor (Function): Returns a unique key for each item.
• ShelfHeaderComponent (ComponentType | ReactElement): Component rendered at the start of the list.
• ShelfFooterComponent (ComponentType | ReactElement): Component rendered at the end of the list.
• spaceBetweenItems (number): Defines the spacing between items in the list.

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