React Native Custom Blocks

Custom Blocks let you build a piece of storefront UI as real React Native (TSX) code. You write a normal React component, it's transpiled in the browser, and it renders live inside the app - no build step or deploy required.

They're built for cases that need full JavaScript logic (loops, conditionals, helper functions, hooks), third-party npm packages (animations, gestures, QR codes, HTML rendering, ...), or AI-assisted generation.

The component model

Every custom block is a single default-exported function component:

import React from 'react';
import { Flexbox, Text } from '@evlop/native-components';
import { CustomBlock } from '@evlop/shopify';

const MyBlock: CustomBlock.Section = ({ data }) => {
  return (
    <Flexbox flexDirection="column" gap={8} p="md">
      <Text fontSize="2xl" fontWeight="Bold">
        {data.title}
      </Text>
    </Flexbox>
  );
};

export default MyBlock;

• It receives a data prop (shape depends on the block type - some types also get extra top-level props, like product-information's product/variant).
• CustomBlock.<Type> (from @evlop/shopify) is an optional type annotation that gives you the correct prop types for that block type.
• Only the packages listed in Available Packages can be imported - no relative imports, no browser-only APIs (fetch, window, document), no arbitrary npm packages.

Where to go next

• Getting Started - how a block is created, its file layout, and how live preview works
• Block Types - the full list of block types and the exact data shape each one gets
• Settings Panel (configurationSchema) - how merchant-configurable fields work for blocks with settings
• Available Packages - every npm package you can import from block code