Skip to main content

Product highlights

Product highlights allow the host of a live show to pin a product in the player overlay, drawing viewer attention to it. Your app is notified whenever the highlighted product changes, and can react by updating custom UI elements.

Handle Highlight Updates​

Listen for the should-update-product-highlight event in your onEvent callback to receive the currently highlighted product. The event contains a products array with one product when a product is highlighted, and an empty array when the highlight is cleared.

import { Platform } from 'react-native';

function handleEvent(e) {
  const { type, data } = e.nativeEvent;

  if (type === 'should-update-product-highlight') {
    const products = Platform.OS === 'ios'
      ? data?.event?.products
      : data?.products;

    if (!products?.length) {
      clearHighlightedProduct();
      return;
    }

    const [highlightedProduct] = products;
    const productId = highlightedProduct.id;
    const sku = highlightedProduct.ref;
    const title = highlightedProduct.title;

    // Fetch your own product data and update your custom UI
  }
}

Handle Product View (Custom Navigation)​

When the product button is configured as 'none', tapping a highlighted product fires should-show-product-view instead of opening the player's built-in product modal. Use this to navigate to your native product detail screen.

if (type === 'should-show-product-view') {
  const eventData = Platform.OS === 'ios' ? data?.event : data;
  const sku = eventData?.ref;

  navigateToProduct(sku);
}

To enable this behavior, set the product button to 'none' in your player configuration:

configuration={{
  buttons: {
    product: 'none',
  },
}}

Handle Product List​

When a user opens the product list in the player with product set to 'none', the should-show-product-list and should-hide-product-list events fire. Use these to coordinate your own product list overlay with the player.

if (type === 'should-show-product-list') {
  showProductListOverlay();
}

if (type === 'should-hide-product-list') {
  hideProductListOverlay();
}

ℹ️ Product data for highlights is provided to the player through product hydration. See Product hydration for how to supply product details using invoke('updateProductWithData', ...).