Core concepts

The entry point

Every app calls start(App) once from its entry file:

import { start } from "@wrst/core";
import App from "./App.tsx";
 
start(App);

Components

A component is a plain function that returns a UI tree. Use the Component type:

import { Component, VerticalView, Text } from "@wrst/core";
 
const Greeting: Component = () => (
  <VerticalView>
    <Text style={{ color: "#fff" }}>Hello, watch</Text>
  </VerticalView>
);

State - useState

State is reactive: updating it re-renders the parts of the tree that depend on it.

import { useState, Button, Text } from "@wrst/core";
 
const [count, setCount] = useState(0);
// setCount(count + 1) updates the UI

Effects - useEffect

Run side effects (timers, fetches, subscriptions) with useEffect, returning an optional cleanup function:

import { useEffect, useState } from "@wrst/core";
 
const [now, setNow] = useState(Date.now());
 
useEffect(() => {
  const id = setInterval(() => setNow(Date.now()), 1000);
  return () => clearInterval(id);
}, []);

Navigation

Move between screens with the navigation API:

import { createNavigation, navigate, goBack, useNavigation } from "@wrst/core";

• createNavigation(...) - define your screens
• navigate(...) - go to a screen
• goBack() - pop the current screen
• useNavigation() - read the current navigation state

Global state

Share state across the tree without prop-drilling:

import { createAppState, getAppState, setAppState } from "@wrst/core";

Theme

Centralize colors, spacing, and typography as plain JS tokens:

import { createTheme, defaultTheme } from "@wrst/core";

Built-in runtime

These are available globally - no import needed, like in a browser:

• fetch - HTTP requests
• localStorage - key/value persistence
• setTimeout / setInterval (and their clear*)
• console

And these are imports:

• Device - a descriptor of the current device (import { Device } from 'wrst')
• Motion sensors - subscribeSensor, useSensor, Sensors
• Runtime permissions - requestPermission, getPermissionStatus
• Native modules - callNativeModule, useNativeModule, … (call host-registered native capabilities)