DevelopersReact Native

React Native SDK

Embed published RuleCMS widgets in React Native

Ship the same published widgets into a React Native app. Install from npm, register the default cards, and render with a published key.

Getting started guide →

Install and embed

Add @rulecms/widget-react-native and render a published widget.

install.shBash
npm install @rulecms/widget-react-native @rulecms/source-components-react-native
HomepageHero.tsxTSX
import { RuleCMSWidget } from "@rulecms/widget-react-native";export function HomepageHero() {  return (    <RuleCMSWidget      publishedKey="your-widget-key"      ...    />  );}

React Native is a host, not a lesser CMS

The composer, environments, and tokens are the same product.

If the customer-facing app is React Native, you still get the full RuleCMS journey: visual compose, device-aware content, staging, production, and scoped API tokens. @rulecms/widget-react-native fetches the layout tree. @rulecms/source-components-react-native renders the default cards with native views.

Those cards are the basic RuleCMS set — text, images, video, icons, buttons, dividers, embeds, lists, and accordions. That is enough to keep campaigns and in-app stories on the same publish path as the website. First-class custom libraries and design-system registration in the composer are a React web capability. Stay on React Native for the app you already ship.

Provider and widget

Install from npm. That is the supported surface.

Register rulecmsSourceComponentsLibrary as the default library. Wrap the screen with RuleCMSWidgetProvider so every widget shares the token.

HomepageHero.tsxTSX
import { RuleCMSWidget, RuleCMSWidgetProvider } from "@rulecms/widget-react-native";import { rulecmsSourceComponentsLibrary } from "@rulecms/source-components-react-native";export function HomepageHero({  token,  publishedKey,}: {  token: string;  publishedKey: string;}) {  return (    <RuleCMSWidgetProvider      token={token}      libraries={{ default: rulecmsSourceComponentsLibrary }}    >      <RuleCMSWidget        publishedKey={publishedKey}        componentProps={{          "b721c4e2-…": { onClick: handleCta },        }}      />    </RuleCMSWidgetProvider>  );}

Environments and host callbacks

  • Staging and production: plain token + environmentId---widget-… published key.
  • Development: dev. token + draft widget key for live drafts — same routing rules as @rulecms/widget-react.

Pass componentProps so a published button can open a React Native modal, a stack screen, or a checkout sheet. Key by column id or by a path of enclosing collection columns. In development, a key that addresses no column prints once.

Token walkthrough: projects, environments, and tokens. Packages live on npm. A public sample lab is not published yet — follow this guide and the packages. Do not look for a GitHub SDK repository on the marketing site; those repos are not the public integration surface.

Packages

Install from the public registry. These are the supported SDK surfaces — not GitHub source repos.

Sample labs

Public teaching projects that show the integration pattern. Copy the wiring, not the app architecture — they are not production starters.

A public sample lab is not published for React Native yet. Use the packages above and the embed on this page. The supported surface is the public registry — not a GitHub SDK repository.

Need the product docs for tokens, widgets, or the headless API? Start at Getting started, then environments and tokens and the API reference.

Other SDKs

Same published widgets and environment tokens. Pick the guide for the stack you ship.

Explore RuleCMS

Dive deeper into what makes RuleCMS different.

Ship React Native with RuleCMS

Create a project, provision three environments, and copy a scoped API token.