Skip to main content

Renderer overview

React 19 runs in Hermes on the watch and reconciles a tree of SwiftUI views via a custom host config. Each React element maps to a SwiftUI view registered in ViewRegistry, and each prop maps to a SwiftUI modifier via ModifierRegistry.

Everything ships from one entry point:

import {
  render,
  Text, VStack, HStack, Button,
  font, padding, foregroundColor,
} from '@appsent-co/react-native-watchos/renderer';

A minimal screen:

import {
  render,
  VStack,
  Text,
  Button,
} from '@appsent-co/react-native-watchos/renderer';

function App() {
  return (
    <VStack spacing={8}>
      <Text>Hello, watch.</Text>
      <Button onPress={() => console.log('tapped')}>
        <Text>Tap me</Text>
      </Button>
    </VStack>
  );
}

render(<App />);

Components by category​

  • Layout — VStack, HStack, ZStack, Spacer, ScrollView, lazy stacks, Grid.
  • Text & images — Text, Image, Label, AsyncImage.
  • Controls — Button, Toggle, Slider, Stepper, Picker, DatePicker, TextField, SecureField.
  • Lists & forms — List, Section, Form.

Navigation has its own section:

Styling​

  • Modifiers — composing SwiftUI modifiers via the modifiers prop.
  • Styling — colors, gradients, fonts.