Product metafields

Starter code to load product metafields from shopify and display

import React from 'react';
import { Text, Flexbox, Image } from "@evlop/native-components";
import { useMetafields } from "@evlop/shopify";
import QRCode from 'react-qr-code';
import RenderHTML from 'react-native-render-html';

const AppBlock: NativeAppBlock = function ({ data, product }) {

  const productMetafields = useMetafields({
    resourceType: "product",
    resourceId: String(product?.id),
    metafieldIdentifiers: data.metafieldIdentifiers,
  });

  return (
    <Flexbox flexDirection="column" gap="2xs" px="md" py="2xs">
      <Text fontWeight="Bold" fontSize="2xl">{data.title}</Text>
      {data.metafieldIdentifiers?.map(({ namespace: _namespace, key, label, id, displayAs }) => {
        let displayValue: any = productMetafields?.[_namespace]?.[key];

        if(data.hideEmptyValue && !displayValue) return;

        const valueStr = typeof displayValue === 'object' ? JSON.stringify(displayValue) : `${displayValue ?? ''}`;

        const renderByDisplayAs = () => {
          switch (displayAs) {
            case 'image':
              return <Image src={displayValue ?? ''} width={100} height={100} />;
            case 'qr':
              return <QRCode value={valueStr} size={128} />;
            case 'html':
              return <RenderHTML source={{html: valueStr}} />;
            case 'text':
            default:
              return <Text color="gray-800">{`${displayValue ?? "N/A"}`}</Text>;
          }
        };

        return (
          <Flexbox key={id} flexDirection="column" gap="5xs">
            <Text fontWeight="Bold">{label}</Text>
            {renderByDisplayAs()}
          </Flexbox>
        );
      })}
    </Flexbox>
  );
};

export default AppBlock;