Native Android & iOS — Noderyx Documentation

01

Three commands to an app

native:init compiles your views and scaffolds the application; native:run builds and launches it on a device or emulator.

TERMINAL

npm run native:init      # compile views and scaffold
npm run native:android   # build and launch on Android
npm run native:ios       # the same on macOS

NOTE

Android needs Android Studio with an SDK platform. iOS binaries can only be compiled and signed on macOS with Xcode.

02

Compiled, not interpreted

Everything a screen needs is resolved while you build, not while the user waits. That is why a re-render allocates nothing.

Element → native widget No lookup table and no DOM on the device.

{{placeholder}} → expression No template parsing at runtime.

Loop variables → property access post?.title, not a dictionary lookup.

Class names → flattened styles Style objects are composed once when the module loads.

03

Element mapping

The translation is deliberate and reported. Anything without a native equivalent is listed at build time rather than silently dropped.

div, main, section, article, header, footer, nav, form, ul, ol View

h1, h2, h3, p, span, strong, code Text

a Pressable with accessibilityRole="link"

button Pressable with accessibilityRole="button"

img Image with a uri source

input, textarea TextInput; type sets the keyboard and secure entry

list FlatList, virtualized

head, meta, link, script Skipped

NOTE

aria-label and alt become accessibilityLabel, and id becomes testID.

04

What is generated

One memoized component per view, plus a small runtime you can read end to end.

PROJECT

platforms/native/
  App.jsx        screen map, startup data, status bar
  Navigator.jsx  stack navigation with animated transitions
  native.js      camera, location, storage, share, notifications, haptics
  runtime.js     the helpers compiled screens call
  styles.js      style combinations, flattened once at load
  theme.js       design tokens — the one file to edit
  home.jsx       one component per view
  assets/        generated icon, adaptive icon, splash art

NOTE

Everything except theme.js and the project files is regenerated on every build. Keep your own code in separate modules.

05

Styling

theme.js holds one entry per tag and Cool.css class your views use. Known classes arrive filled in; the rest start empty and are yours to complete. Editing theme.js updates every screen, and regenerating never overwrites it.

platforms/native/theme.js

export const theme = {
  coolBtn: { alignItems: "center", backgroundColor: "#7C5CFF", borderRadius: 999 },
  coolBrand: {}   // fill this in
};

NOTE

Class names are camel-cased: cool-error-card becomes coolErrorCard.

06

Navigation

Navigator.jsx is a dependency-free stack with animated transitions. It resolves /about, /about.html, and / to screens, so the same views link correctly on every target. External URLs open in the system browser, and the Android hardware back button pops the stack.

NOTE

Replace it with React Navigation or Expo Router when you need tabs, modals, or deep links—the screens are ordinary components and need no changes.

07

Native features

native.js exposes the same API as the web bridge, so application code moves between targets unchanged. Modules load lazily, so you install only what you use.

JAVASCRIPT

await native.camera();
await native.location();
await native.share({ title, url });
await native.haptics("light");
await native.notify({ title, body });
await native.storage.set("token", value);
const data = await native.api("/api/me");

NOTE

Install only what you call: npx expo install expo-image-picker expo-location expo-haptics.

08

Talking to your server

The app has no server of its own—point it at yours. App.jsx fetches /api/app once at startup and merges the result into the screen data, so the first frame draws immediately from what you passed in.

noderyx.config.js

native: {
  appId: "com.example.myapp",
  appName: "My App",
  views: "resources/views",
  out: "platforms/native",
  entry: "home",
  apiUrl: process.env.MOBILE_API_URL
}

NOTE

Your server must allow the app's origin—see the CORS section on the Security page.

09

Shipping

Generate the platform projects, then build with the standard platform tools.

TERMINAL

cd platforms/native
npx expo prebuild        # generate android/ and ios/
npx expo run:android     # or open android/ in Android Studio

NOTE

Version numbers live in app.json. Icons and splash art are generated into assets/ and never overwritten once they exist.

10

Current limits

Known gaps, stated plainly so they do not surprise you late.

select has no React Native primitive; its options render as a list.
Inline onclick handlers become entries in the actions prop.
Cool.css translation covers layout, type, buttons, cards, and inputs—gradients, blur, and CSS animation have no StyleSheet equivalent.
The navigator is a stack; tabs and modals mean bringing your own.