Footer

Replaces the storefront's footer. Rendered exactly once, at the bottom of every page that uses the app's layout - it's a single persistent element, not a per-item template. Typically links (commonly built from data.menuItems), copyright text, or social icons - or, as in the example below, a bottom tab bar.

type: "footer" - 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}>.

Example

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

const Footer: CustomBlock.Footer = (props) => {
  const { data = {} } = props;
  const { menuItemsWithActionsUpdated: menuItems, activeIndexAnimated } = useMenuItemsForFooterTabs(data.menuItems, { isGlobal: true });
  const insets = useSafeAreaInsets();

  return (
    <Box bg="gray-0" style={{ paddingBottom: insets.bottom }}>
      <Flexbox flexDirection="row" justifyContent="space-between" alignItems="center" height={56}>
        {menuItems.map((item, index) => (
          <Actionable
            key={item.id}
            action={item.action}
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center', height: '100%' }}
            pressEffect="shrink"
          >
            <Icon icon={item.icon} size={22} color="gray-500" />
            <Text fontSize="xs" color="gray-500">{item.label}</Text>
          </Actionable>
        ))}
      </Flexbox>
    </Box>
  );
};

export default Footer;

useMenuItemsForFooterTabs (from @evlop/shopify) is a helper specifically for a bottom tab bar footer: pass it data.menuItems and it returns the items with their actions wired up plus an activeIndexAnimated value you can use to animate the active tab. It's optional - a simpler, non-tab-bar footer (e.g. plain links and copyright text) doesn't need it; just render data.menuItems directly with <Actionable action={item.action}> as shown on the Header page.

useSafeAreaInsets (from react-native-safe-area-context) keeps the footer clear of the device's bottom safe area (home indicator).