API

Modules

An nsh app imports everything it uses from a small set of modules. They are all native: the reactive graph, the renderer and every module are implemented in Rust inside the runtime, and the bundler keeps import ... from "nsh/..." as imports instead of copying code into your bundle. Your bundle only holds your own code.

import { mount, signal } from "nsh";
import { createNativeValue } from "nsh/animated";
import { windowSize } from "nsh/device";
import { Button, SafeAreaView } from "nsh/ui/mobile";

#Two layers

  • nsh and nsh/<module> are the primitives and the environment: reactivity, lists, canvas, animation, gestures, device information. Every UI set builds on them.
  • nsh/ui/<set> is a whole UI for one form factor. Today that is nsh/ui/mobile: navigation, modals, the status bar, system dialogs and components such as Button and TextField (see Components).

There is no catch-all module: each API lives in exactly one place. Platform-only APIs live in nsh/ios and nsh/android; both can be imported on every platform, so one bundle runs everywhere (their calls do nothing elsewhere, and isAvailable tells you which platform you are on).

Types are generated from the runtime: nsh init, nsh build, nsh dev and nsh trace write .nsh/types next to your app, so the TypeScript declarations always match the runtime you build with (see Project structure).

#All modules

ModuleExportsPage
nshsignal, computed, effect, batch, untracked, cleanup, context, split, mount; the types of elements, styles, events and JSX (YNode, ViewStyle, …)nsh
nsh/animatedcreateNativeValue, NativeValue, NativeNode, Animated, Easing, LayoutAnimationnsh/animated
nsh/listList (virtualized, recycling list)nsh/list
nsh/canvasCanvas, Path2D, CanvasRenderingContext2D, CanvasGradientnsh/canvas
nsh/devicewindowSize, colorScheme, fontScale, Platform, PixelRatio, I18nManagernsh/device
nsh/gesturePanRespondernsh/gesture
nsh/imageImage.getSize, Image.prefetchnsh/image
nsh/nativenativeComponent (components the embedding app registers)nsh/native
nsh/accessibilityAccessibilityInfo, screenReaderEnabled, reduceMotionnsh/accessibility
nsh/iosisAvailable, InputAccessoryViewnsh/ios
nsh/androidisAvailable, Toast, BackHandler, setStatusBarBackgroundColornsh/android
nsh/webviewWebViewnsh/webview
nsh/videoVideonsh/video
nsh/ui/mobileNavigation (createNavigator, Stack, Screen, Modal), SafeAreaView, StatusBar, Alert, ActionSheet, Keyboard, Button, TextField, …Components
Globalsfetch, URL, TextEncoder, Blob, FormData, AbortController, timers, console, requestAnimationFrame, … (no import)Web APIs

Reference pages that are not modules:

PageCovers
Style referenceEvery style key, its type and meaning
Tailwind referenceThe Tailwind utilities and variants class accepts

#Host elements

Lowercase JSX tags such as <view>, <text>, <image>, <scroll> and <input> are not imported: they are built into the JSX compiler. Their props are documented under Elements.