Search Using React Native SDK

The Experience Search API is a native, AI-powered, multi-modal search solution that enables personalized search experiences on your website or app. It supports:

Semantic Search: Understands natural language text queries, enabling you to deliver highly relevant search results that meet user expectations and drive conversions.
Visual Search: Enables users to search using images from their camera or gallery to find visually similar or relevant products.

📘
For more information see the following:

API reference

Developer guide

Semantic Search

Parameters

Parameter	Data Structure Type	Mandatory?	Description
page	Page	Yes	Contains information about the current page (screen name, referrer, categories)
text	String	Yes	The natural‑language query to process using Semantic Search
filters	Filter[]	No	Optional attribute filters (brand, color, price range, and so on)
pagination	Pagination	Yes	Defines number of items and offset for pagination
sortBy	SortOptions?	No	Sorting rules (for example., by field or by relevance)
pageAttributes	Map<String,PageAttribute>?	No	Key–value attributes for campaign targeting or search context
branchId	String?	No	Branch identifier for multi‑branch setups (stores, financial institutions, restaurants)
options	SearchOptions?	No	Additional search configurations (for example, return analytics metadata)

Code example

async function semanticSearchExample() {

  await search.semanticSearch({
    page: Page.homePage({ location: 'location' }),
    text: 'jeans',
    pagination: { numItems: 1, offset: 2 }
  })
  .then((result) => {

    switch (result.status) {
      case 'SUCCESS':
      case 'WARNING': {

        const choice = result.choice;
        const variation = choice?.variations?.[0];

        const custom = variation?.payload?.data?.custom;
        const spellCheckedQuery = variation?.payload?.data?.spellCheckedQuery;
        const totalNumResults = variation?.payload?.data?.totalNumResults;

        const slots = variation?.payload?.data?.slots;
        if (slots) {
          for (const slot of slots) {
            const productData = slot.productData as DefaultRecsProductData | undefined;
            console.log(productData?.group_id ?? '');
            console.log(productData?.name ?? '');
            console.log(productData?.url ?? '');
            console.log(productData?.price ?? '');
            console.log(productData?.in_stock ?? '');
            console.log(productData?.image_url ?? '');
            console.log(productData?.categories ?? '');
            console.log(productData?.keywords ?? '');
          }
        }

        const facets = variation?.payload?.data?.facets;
        if (facets) {
          for (const facet of facets) {
            // Shared parameters
            console.log('Column:', facet.column);
            console.log('Display Name:', facet.displayName);
            console.log('Values Type:', facet.valuesType);

            if (isNumberFacet(facet)) {
              console.log('Number Facet:', facet.name);
              console.log('Min:', facet.min);
              console.log('Max:', facet.max);
              console.log('Selected Min:', facet.selectedMin);
              console.log('Selected Max:', facet.selectedMax);
            } else {
              console.log('String Facet:', facet.name);
              console.log('Values:');
              for (const value of facet.values) {
                console.log(`- ${value.name} (count: ${value.count}, selected: ${value.selected})`);
              }
            }

            console.log('---');
          }
        }

        break;
      }

      case 'ERROR':
        // handle error
        break;
    }

  })
  .catch((error) => {
    // handle error that happened during the request, like wrong parameter
  });
}

Visual Search

Parameters

Parameter	Data Structure Type	Mandatory?	Description
page	Page	Yes	Provides screen context for the visual search request
imageBase64	String	Yes	Base64‑encoded image to use for product matching
filters	Filter[]	No	Optional attribute filters (brand, color, price range, and so on)
sortBy	SortOptions	No	Sorting rules (for example, by field or by relevance)
pageAttributes	Map<String,PageAttribute>?	No	Key–value attributes for campaign targeting or search context
branchId	String?	No	Branch identifier for multi‑branch setups (stores, financial institutions, restaurants)
options	SearchOptions?	No	Additional search configurations (for example, return analytics metadata)

Code example

async function visualSearchExample() {

  await search.visualSearch({
    page: Page.homePage({ location: 'location' }),
    imageBase64: 'imageBase64'
  })
  .then((result) => {

    switch (result.status) {
      case 'SUCCESS':
      case 'WARNING': {

        const choice = result.choice;
        const variation = choice?.variations?.[0];

        const custom = variation?.payload?.data?.custom;
        const totalNumResults = variation?.payload?.data?.totalNumResults;

        const slots = variation?.payload?.data?.slots;
        if (slots) {
          for (const slot of slots) {
            const productData = slot.productData as DefaultRecsProductData | undefined;
            console.log(productData?.group_id ?? '');
            console.log(productData?.name ?? '');
            console.log(productData?.url ?? '');
            console.log(productData?.price ?? '');
            console.log(productData?.in_stock ?? '');
            console.log(productData?.image_url ?? '');
            console.log(productData?.categories ?? '');
            console.log(productData?.keywords ?? '');
          }
        }

        const facets = variation?.payload?.data?.facets;
        if (facets) {
          for (const facet of facets) {

            // Shared parameters
            console.log('Column:', facet.column);
            console.log('Display Name:', facet.displayName);
            console.log('Values Type:', facet.valuesType);

            if (isNumberFacet(facet)) {
              console.log('Number Facet:', facet.name);
              console.log('Min:', facet.min);
              console.log('Max:', facet.max);
              console.log('Selected Min:', facet.selectedMin);
              console.log('Selected Max:', facet.selectedMax);
            } else {
              console.log('String Facet:', facet.name);
              console.log('Values:');
              for (const value of facet.values) {
                console.log(`- ${value.name} (count: ${value.count}, selected: ${value.selected})`);
              }
            }

            console.log('---');
          }
        }

        break;
      }

      case 'ERROR':
        // handle error
        break;
    }

  })
  .catch((error) => {
    // handle error that happened during the request, like wrong parameter
  });
}

Updated 5 days ago