NativeScript React

Custom React renderer for DOMiNATIVE on NativeScript

Uses a react-reconciler host config that renders React into a DOMiNATIVE DOM, so the same web markup (<div>, <section>, <a>, …) renders natively through masonkit/NativeScript views, rather than a separate native-element renderer.

---

Installation

npm install @nativescript-community/react dominative undom-ng react react-reconciler

Note: dominative, undom-ng, and react are peer dependencies. Install them yourself so they can be upgraded directly from upstream.

Requires React 19+ and react-reconciler 0.32+.

---

Usage

import { Application } from '@nativescript/core';
import { startReactApp } from '@nativescript-community/react';

function App() {
  return (
    <gridlayout rows="auto,*">
      <label class="text-lg">Hello, React on NativeScript!</label>
    </gridlayout>
  );
}

startReactApp({ Application, root: App });

Or mount manually:

import { render } from '@nativescript-community/react';
import { document } from 'dominative';

const dispose = render(<App />, document.body);
// later: dispose();

---

Caveats

Event handling

NativeScript events are case-sensitive and do not bubble (no delegation). React event props bind directly to the matching native event: onClick/onTap → tap, onLongPress → longPress, and any other on<Event> → the lowercased event name (onLoaded → loaded).

License

MIT