Remote Components

What is a Component?

A component is a React or React Native code module (JS, JSX, TS, or TSX) stored in the Visual Experience Engine and delivered to a web site or mobile app at runtime that is un-scheduled. The web site or mobile app fetches components by path, platform, and version, then dynamically loads and renders them.

Components are used for:

• Scheduled Content variants – App scheduled content can render custom UI via components
• Specification configurations – Specification configs can reference components and supply them with configuration
• Reusable UI – Shared carousels, buttons, layouts, etc., that multiple scheduled content items or specifications can use

---

Core Properties

Property	Description
id (cid)	Unique identifier (Firebase push key)
name	Display name (derived from path, e.g. Button.js)
path	Path within the app (e.g. Components/Button.js)
platforms	ios, android (or both)
versionCount	Number of revisions (v1, v2, …)
published	Per-revision publication flag
type	Code type: js, jsx, ts, tsx

---

Revisions and Versioning

• Each save creates or updates a revision (v1, v2, v3, …).
• Revisions support rollback and experimentation before promoting.
• Each revision has its own published flag.
• The mobile app can request a specific version or the latest.

---

API: Fetching a Component

The mobile app fetches components via the remote component endpoint.

Query parameters:

Parameter	Required	Description
key	Yes	API key for the app
path	Yes	Component path (e.g. Components/CarouselBanner.js)
platform	Yes	ios or android
version	Yes	Revision (e.g. v1, v2). Omit to get latest

Example request:

GET /v1/remote-component?key=YOUR_API_KEY&path=Components/CarouselBanner.js&platform=ios&version=v2

Example response:

{
  "id": "-Md1X9-yVo2MvHMspbGA",
  "path": "Components/CarouselBanner.js",
  "version": "v2",
  "code": "define([\"exports\",\"react\",\"react-native\",..."
}

The code field contains the compiled JavaScript (e.g. AMD/UMD-style) the app evaluates and executes.

---

How Components Are Used

1. In Scheduled Content Variants

• Scheduled content variants can use components to render custom React Native UI.
• Variant code may import or reference a component by path.
• Metadata fields of type Component let editors choose which component a scheduled content item uses.

2. In Specification Configurations

• Specification configurations define components as named sections.
• Each component can have its own config (string, json, image).
• The app loads the component from the Visual Experience Engine and passes that config as props.
• AddComponent in the Specification form lets you pick from the app's component library.

3. Default / HOC Component

• isDefault marks a component as the default wrapper (HOC).
• This component can wrap other dynamically loaded components with shared behavior (e.g. analytics, theming).

---

Code Types

Components support these code types:

Type	Description
js	JavaScript
jsx	React JSX
ts	TypeScript
tsx	TypeScript with JSX

The Visual Experience Engine transpiles source (raw) to compiled JS before storing and serving it.

---

Platform Support

• Components can target iOS, Android, or both.
• The platforms field controls which platforms see the component.
• The API filters by platform so the app only receives platform-appropriate code.

---

Workflow Summary

1. Create a component in the Visual Experience Engine: set path, platforms, and code.
2. Save to create v1 (optionally publish).
3. Edit and save again to update or create a new revision.
4. Mobile app requests the component by path, platform, and version.
5. App evaluates the compiled code and renders the component.
6. For specification, the config supplies component-specific configuration.

---

Key Takeaway

A component is a versioned, platform-specific React Native code module stored in the Visual Experience Engine. The mobile app fetches it by path and platform, evaluates the compiled code, and renders it. Components power custom scheduled content UI and specification layouts, and can be configured via specification configurations.