@loyalid/layout-builder-rn

React Native renderer for Loyalid Layout Builder.

Install

npm install @loyalid/layout-builder-rn

Peer dependencies: react >= 16.8, react-native >= 0.60

Quick Start

import RNLayoutRenderer from '@loyalid/layout-builder-rn';

const layoutJSON = {
  general_style: {
    background_color: '#ffffff',
    padding: '24px',
    font_size: '16px',
    max_width: '760px',
    margin: '0 auto',
  },
  blocks: [
    { type: 'title', content: 'Hello World', level: 'h1', style: { color: '#1e293b' } },
    { type: 'paragraph', content: 'This is a paragraph.', style: { color: '#475569' } },
    { type: 'image', url: 'https://example.com/photo.jpg', alt: 'Photo' },
    { type: 'divider', style: { border_color: '#e2e8f0' } },
  ]
};

function App() {
  return <RNLayoutRenderer layoutJSON={layoutJSON} />;
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | layoutJSON | string \| object | ✅ | Layout JSON string or parsed object | | style | object | ❌ | Override outer container style | | components | object | ❌ | Custom block component overrides |

Custom Block Types

import { registerBlock } from '@loyalid/layout-builder-rn';

// Register a custom block component
registerBlock('video', VideoBlockComponent);
registerBlock('carousel', CarouselComponent);

// Now use in layout JSON
const layoutJSON = {
  blocks: [
    { type: 'video', url: 'https://...', style: {} },
  ]
};

Custom Components Override

Pass custom components directly via props (no global registration):

<RNLayoutRenderer
  layoutJSON={layoutJSON}
  components={{
    video: VideoBlockComponent,
    carousel: CarouselComponent,
  }}
/>

Utilities

import {
  mapStyle,           // Convert JSON styles → RN StyleSheet
  mapContainerStyle,  // Convert container-level styles
  mapBlockStyle,      // Convert block-level styles
  normalizeFontWeight, // Normalize font weight names
  getRegisteredTypes, // List all registered block types
} from '@loyalid/layout-builder-rn';

Style Mapping

All JSON style properties are automatically converted to React Native compatible styles:

| JSON Property | RN Output | |---------------|-----------| | font_size: '16px' | { fontSize: 16 } | | background_color: '#fff' | { backgroundColor: '#fff' } | | text_align: 'center' | { textAlign: 'center' } | | margin: '0 auto' | { marginLeft: 'auto', marginRight: 'auto' } | | border_left_color: '#3b82f6' | { borderLeftColor: '#3b82f6' } | | shadow_offset_x: 2 | { shadowOffset: { width: 2, height: ... } } |

Supported Block Types

| Type | Component | Description | |------|-----------|-------------| | title | RNTitle | Heading (h1–h6) with defaults | | paragraph | RNParagraph | Text block with selectable text | | quote | RNQuote | Blockquote with left border accent | | image | RNImage | Image with aspect ratio and alt text | | divider | RNDivider | Horizontal separator |

File Structure

src/
├── components/
│   ├── RNTitle.jsx         ← h1–h6 heading block
│   ├── RNParagraph.jsx     ← Text paragraph block
│   ├── RNQuote.jsx         ← Blockquote with citation
│   ├── RNImage.jsx         ← Image with alt text
│   ├── RNDivider.jsx       ← Horizontal divider
│   └── RNContainer.jsx     ← Scrollable wrapper
├── core/
│   ├── styleMapper.js      ← CSS → RN StyleSheet conversion
│   ├── blockMapper.js      ← Block type registry
│   └── index.js            ← Core exports
├── RNLayoutRenderer.jsx    ← Main renderer component
└── react-native.js         ← Package entry point