watchos-patterns

watchOS Platform Patterns

Digital Crown Input

The Digital Crown is the primary input for value adjustment on Apple Watch.

// Basic rotation binding
@State private var crownValue: Double = 0

ScrollView {
    content
}
.digitalCrownRotation($crownValue)

// Bounded rotation with haptics
@State private var volume: Double = 50

VolumeView(level: volume)
    .digitalCrownRotation(
        $volume,
        from: 0,
        through: 100,
        by: 1,
        sensitivity: .medium,
        isContinuous: false,
        isHapticFeedbackEnabled: true
    )

Crown Sensitivity

• .low — large physical rotation per unit (precise adjustment)
• .medium — balanced (default for most use cases)
• .high — small physical rotation per unit (fast scrolling)

Focus for Crown

Only the focused view receives Crown events:

@FocusState private var crownFocused: Bool

VStack {
    MetricView(value: crownValue)
}
.digitalCrownRotation($crownValue)
.focusable()
.focused($crownFocused)
.onAppear { crownFocused = true }

Always On Display

watchOS apps should support Always On Display when the wrist is lowered.

@Environment(\.isLuminanceReduced) var isLuminanceReduced

var body: some View {
    VStack {
        if isLuminanceReduced {
            // Simplified, dim view — reduce updates and brightness
            Text(Date.now, style: .time)
                .font(AppTheme.Fonts.title)
        } else {
            // Full interactive view
            DetailedContentView()
        }
    }
}

Always On Display Rules

• Check \.isLuminanceReduced to detect Always On state
• Reduce visual complexity: hide animations, secondary info, and interactive elements
• Use TimelineView(.everyMinute) for clock-like updates in reduced mode
• Avoid bright colors — use dimmer variants in reduced luminance
• Stop all timers and animations when isLuminanceReduced == true

TimelineView(.everyMinute) { context in
    if isLuminanceReduced {
        Text(context.date, style: .time)
    } else {
        LiveActivityView()
    }
}