Available Packages
These are the only packages that can be imported in custom block code - nothing else is available in the sandboxed runtime (no react-dom, no browser-only APIs like fetch/window/document, no other npm package, no relative/local imports).
Core
| Package | Purpose |
|---|---|
react | React itself - import React from 'react' plus hooks (useState, useEffect, useMemo, ...) |
react-native | Only for primitives genuinely not covered by @evlop/native-components (prefer that first) - e.g. StyleSheet, Platform, Dimensions |
formik | Form state, only relevant if the block needs an interactive form (e.g. a newsletter signup field) |
lodash | Utility functions (get, debounce, groupBy, etc.) for data manipulation |
query-string | Parsing/stringifying URL query strings |
Evlop packages (prefer these first)
| Package | Purpose |
|---|---|
@evlop/native-components | The primary UI primitives: View, Box, Flexbox, Text, Image, ImageBackground, Actionable, Button, Icon, etc. Use this for all layout/UI unless it genuinely doesn't cover something. |
@evlop/shopify | Typed Shopify data and helpers: ShopifyProduct, ShopifyCollection, ShopifyProductVariant, ShopifyCart, Money, CustomBlock (the per-block-type prop types), loadProductsManager, useCart, useCartLineItemActions, useCustomer, useMenuItemsForFooterTabs, useAppDrawer, etc. |
@evlop/commons | Shared utility helpers used across Evlop apps, including remoteAction (remoteAction.do(action) - executes an action value from your own code, e.g. inside a useEffect, where there's no action prop to wire it to) |
Specialized UI
Only import these when the block specifically calls for it - don't reach for them by default.
| Package | Purpose |
|---|---|
react-native-svg | Custom vector graphics/icons beyond what an icon prop covers |
@shopify/react-native-skia | Advanced 2D canvas-style drawing - rarely needed |
react-native-reanimated | Advanced/performant animations beyond a simple fade/scale |
react-native-animated-glow | A glow/shine animation effect |
react-native-gesture-handler | Custom touch/gesture handling (swipe, pan, pinch) beyond a simple tap |
react-native-linear-gradient | Gradient backgrounds |
@react-native-masked-view/masked-view | Masking one view's content with another (e.g. gradient text) |
react-native-collapsible | Expand/collapse (accordion-style) sections |
lottie-react-native | Lottie (After Effects) JSON animations |
react-qr-code | Rendering a QR code from a string/URL |
Media & content
| Package | Purpose |
|---|---|
react-native-video | Playing a video file/URL |
react-native-webview | Embedding an external web page/URL inside the block |
react-native-render-html | Rendering an HTML string (e.g. a rich-text field's value) as native views |
react-native-image-picker | Letting the shopper pick/take a photo - rare, only for interactive blocks needing camera/gallery access |
react-native-safe-area-context | Safe-area insets (useSafeAreaInsets), only relevant for full-screen/edge-to-edge layouts like a custom header/footer/drawer-menu |
Navigation
| Package | Purpose |
|---|---|
@react-navigation/native | Only if a block needs in-app navigation beyond the standard action pattern already covered by Actionable/Button's action prop - prefer that first |
Finding exact prop names and types
Each package publishes its real TypeScript definitions - check there instead of guessing when a prop's exact name or shape isn't covered by this documentation (e.g. the exact shape of ShopifyProduct, or where a registered metafield ends up):
https://cdn.jsdelivr.net/npm/@evlop/shopify/dist/types/main.ai.d.ts
(replace the package name in that URL for @evlop/commons or @evlop/native-components) - check there instead of guessing when a prop's exact name or shape isn't covered by this documentation.