Components

wrst components are imported from wrst and render to native widgets on each platform. Each component below shows what it maps to on Wear OS (Jetpack Compose) and Apple Watch (SwiftUI).

Layout & containers

View

A container that stacks its children on top of each other (overlay). The base building block for layouts and backgrounds.

VerticalView

Stacks its children top-to-bottom.

HorizontalView

Stacks its children left-to-right.

ScrollView (Vertical)

A vertically scrollable container for content taller than the screen.

ScalingScrollView (Vertical)

A scrollable container with the watch-style scaling effect, where items shrink toward the edges of the screen.

Content

Text

Displays text. Style it with color, textAlign, and the usual layout props.

Image

Displays an image. ImageResizeMode controls how it fits its frame.

Icon

Renders a built-in icon by name (see the IconName type for the available set).

Progress

Shows progress - determinate (with a value) or indeterminate (spinner).

List

Maps an array of data to nodes via a renderItem(item, index) function. It’s a data-to-UI helper, not a scroll container - wrap it in a ScrollView if the content can overflow.

Input

Button

A pressable container. Takes an onPress handler and renders its children as the label.

Touchable

Makes arbitrary content pressable, with onPress / onLongPress and an activeOpacity while held.

TextInput

Text entry. On Wear OS it opens the system remote-input screen; on Apple Watch it uses the native text field.

Toggle

An on/off switch with a label.

Slider

Pick a numeric value from a continuous (or stepped) range.

Stepper

Increment / decrement a numeric value with + and − controls.

Picker

Choose one option from a scrollable list of choices.

RadioGroup

Single choice from a set of options, shown as a labeled radio list.

Crown

Reacts to the watch’s rotating crown / bezel to drive a numeric value.

Styling

Pass a style object. Common props:

• width / height - a number, or "fill" to fill the parent
• backgroundColor, color - colors (hex like #fff or rgba(...))
• horizontalAlignment / verticalAlignment - e.g. "center"
• textAlign - text alignment
• padding and spacing props

<View
  style={{
    width: "fill",
    height: "fill",
    verticalAlignment: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
  }}
>
  <Text style={{ color: "#fff", textAlign: "center", width: "fill" }}>
    Centered
  </Text>
</View>