Header

Replaces the storefront's page header / top navigation bar. Rendered exactly once, at the top of every page that uses the app's layout - it's a single persistent element, not a per-item template. Typically a logo/title plus navigation entry points (a menu button, search icon, cart icon), commonly built from data.menuItems.

type: "header" - a block with settings - see Settings Panel for how its configurable fields work.

Data

• data.menuItems - always available automatically: an array of up to 5 { label: string, icon: string, action: Action } navigation items. Never declare your own menuItems field in configurationSchema.json - it's added for you.
• Any other field this block's own configurationSchema.json defines.

Render each item's action on an action-capable prop, e.g. <Actionable action={item.action}> or <Icon ... onPress={...}>.

Example

import React from 'react';
import { Flexbox, Icon, Actionable, useAppDrawer } from '@evlop/native-components';
import { CustomBlock } from '@evlop/shopify';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const Header: CustomBlock.Header = (props) => {
  const { data = {} } = props;
  const appDrawer = useAppDrawer();
  const insets = useSafeAreaInsets();
  const menuItems = Array.isArray(data.menuItems) ? data.menuItems : [];

  return (
    <Flexbox
      backgroundColor="header-background"
      minHeight={64}
      paddingLeft={insets.left + 16}
      paddingRight={insets.right + 16}
      paddingTop={insets.top + 10}
      paddingBottom={10}
      alignItems="center"
      justifyContent="space-between"
    >
      <Icon
        icon="material-community-icons:menu"
        size={26}
        color="header-tint"
        onPress={() => {
          if (appDrawer.isAvailable()) {
            appDrawer.toggleDrawer();
          }
        }}
      />

      <Flexbox flexDirection="row" alignItems="center" justifyContent="flex-end" flex={1} marginLeft={16} gap={14}>
        {menuItems.map((item, index) => (
          <Actionable key={`${item.label || 'menu-item'}-${index}`} action={item.action}>
            <Flexbox alignItems="center" justifyContent="center">
              {item.icon ? <Icon icon={item.icon} size={22} color="header-tint" /> : null}
            </Flexbox>
          </Actionable>
        ))}
      </Flexbox>
    </Flexbox>
  );
};

export default Header;

useAppDrawer (from @evlop/native-components) gives you isAvailable()/toggleDrawer() to open the Drawer Menu from a menu icon, as shown above. useSafeAreaInsets (from react-native-safe-area-context) keeps the header clear of the device notch/status bar - use it for any header/footer/drawer that reaches an edge of the screen.