Quick start

Scaffold a fresh app

The fastest way to try SymbioteNative in your own project:

npx @symbiote-native/cli new my-app --framework react

--framework is one of react | vue | angular | solid | svelte. This generates a full app — native ios/android folders plus the chosen adapter — and pins react-native/react at the app root for you. @symbiote-native/cli is beta: new scaffolds a complete app; add extends an existing SymbioteNative app with optional layers (navigation, splash screen, individual Expo packages, …) but doesn’t yet wire SymbioteNative into a plain, non-SymbioteNative RN project. See @symbiote-native/cli for the full flag reference.

Note

The rest of this page runs one of the repository’s own examples instead — useful if you’d rather read/modify a full app in place than scaffold a new one.

Prerequisites

• Node.js >=20
• pnpm 11.x
• A React Native iOS or Android development environment
• Xcode for iOS simulator runs, or Android Studio/SDK for Android runs

Install dependencies

From the repository root:

pnpm install

Run an example

React

Run the React canary:

cd examples/react
pnpm ios

For Android:

cd examples/react
pnpm android

The React example is the reference canary: it drives the SymbioteNative engine through a React reconciler in mutation mode, then the engine commits to Fabric.

Vue

Run the Vue example:

cd examples/vue-sfc
pnpm ios

or, for the TSX-flavored Vue example:

cd examples/vue-tsx
pnpm ios

The Vue examples prove the same native engine can be driven by Vue’s renderer operations rather than React’s host config.

Angular

Run the Angular example:

cd examples/angular
pnpm ios

For Android:

cd examples/angular
pnpm android

The Angular example proves the same native engine driven a third way: a custom Renderer2/RendererFactory2 — Angular’s own framework-agnostic rendering seam — maps Angular’s operations onto the engine mutation API, with a DOM-less bootstrap (no platform-browser, no zone.js).

Svelte

Run the Svelte canary:

cd examples/svelte
pnpm ios

For Android:

cd examples/svelte
pnpm android

The Svelte example proves the engine can be driven with no framework reconciler at all: @symbiote-native/svelte patches globalThis DOM classes so stock compiled Svelte output believes it is talking to the real DOM, and every DOM call it makes routes into the same mutation API every other adapter drives.

Solid

Run the Solid canary:

cd examples/solid
pnpm ios

For Android:

cd examples/solid
pnpm android

The Solid example proves the engine can be driven through Solid’s own official non-DOM seam: @symbiote-native/solid is a custom renderer built on solid-js/universal’s createRenderer, mapping each renderer operation onto the same tiny mutation API every other adapter drives.

What to look for

The visible demo is intentionally small: a native tap-to-increment counter. The important part is the route it takes:

1. Framework state changes.
2. The adapter calls insert, remove, setProp, or commit on the engine.
3. The engine translates mutations into Fabric’s persistent clone-on-write model.
4. React Native Fabric updates real native views.

Next, read how it works to understand the render pipeline.