@appsent-co/react-native-watchos 0.1.0

package/apple/Sources/ReactNativeWatchOS/Views/ScrollViewView.swift

@@ -0,0 +1,25 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWScrollViewView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("ScrollView") { snapshot, children, _ in
+            let axes = parseAxes(snapshot.props?.string("axes"))
+            let showsIndicators = snapshot.props?.bool("showsIndicators") ?? true
+            return AnyView(
+                ScrollView(axes, showsIndicators: showsIndicators) {
+                    children
+                }
+            )
+        }
+    }
+
+    private static func parseAxes(_ s: String?) -> Axis.Set {
+        switch s {
+        case "horizontal": return .horizontal
+        case "both":       return [.horizontal, .vertical]
+        default:           return .vertical
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/SectionFooterView.swift

@@ -0,0 +1,15 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// Sentinel view consumed by `Section` — its presence as a direct child of
+/// `<Section>` routes its contents into SwiftUI's `footer:` slot. When
+/// rendered outside a `Section` (misuse), falls back to rendering its
+/// children inline so the tree still produces something visible.
+enum RNWSectionFooterView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("SectionFooter") { _, children, _ in
+            AnyView(children)
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/SectionHeaderView.swift

@@ -0,0 +1,15 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// Sentinel view consumed by `Section` — its presence as a direct child of
+/// `<Section>` routes its contents into SwiftUI's `header:` slot. When
+/// rendered outside a `Section` (misuse), falls back to rendering its
+/// children inline so the tree still produces something visible.
+enum RNWSectionHeaderView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("SectionHeader") { _, children, _ in
+            AnyView(children)
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/SectionView.swift

@@ -0,0 +1,45 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `Section`. Walks `snapshot.children` directly (instead of using
+/// the pre-materialized `children: AnyView`) so it can route a child with
+/// `viewName == "SectionHeader"` into the SwiftUI `header:` slot and one
+/// with `viewName == "SectionFooter"` into `footer:`. Everything else
+/// becomes a row in the section body. Either sentinel may be omitted.
+enum RNWSectionView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Section") { snapshot, _, bus in
+            var headerView: AnyView?
+            var footerView: AnyView?
+            var rows: [RNWShadowNodeSnapshot] = []
+            for child in snapshot.viewChildren {
+                switch child.viewName {
+                case "SectionHeader":
+                    headerView = RNWNodeRenderer.render(child, bus: bus)
+                case "SectionFooter":
+                    footerView = RNWNodeRenderer.render(child, bus: bus)
+                default:
+                    rows.append(child)
+                }
+            }
+
+            let rowsView = AnyView(
+                ForEach(rows, id: \.tag) { row in
+                    RNWNodeRenderer.render(row, bus: bus)
+                }
+            )
+
+            switch (headerView, footerView) {
+            case let (.some(h), .some(f)):
+                return AnyView(Section { rowsView } header: { h } footer: { f })
+            case let (.some(h), .none):
+                return AnyView(Section { rowsView } header: { h })
+            case let (.none, .some(f)):
+                return AnyView(Section { rowsView } footer: { f })
+            case (.none, .none):
+                return AnyView(Section { rowsView })
+            }
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/SecureFieldView.swift

@@ -0,0 +1,49 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `SecureField`. Same optimistic-binding pattern as `TextField`
+/// — local `@State` mirror, fires JS `onChange` on edits, converges via
+/// `.onChange(of:)` when JS pushes an authoritative value. The masking
+/// (dots instead of glyphs) is SwiftUI's responsibility.
+enum RNWSecureFieldView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("SecureField") { snapshot, _, bus in
+            AnyView(SecureFieldImpl(snapshot: snapshot, bus: bus))
+        }
+    }
+}
+
+private struct SecureFieldImpl: View {
+    let snapshot: RNWShadowNodeSnapshot
+    let bus: RNWEventBus
+
+    @State private var localText: String
+
+    init(snapshot: RNWShadowNodeSnapshot, bus: RNWEventBus) {
+        self.snapshot = snapshot
+        self.bus = bus
+        _localText = State(initialValue: snapshot.props?.string("value") ?? "")
+    }
+
+    var body: some View {
+        let remote = snapshot.props?.string("value") ?? ""
+        let placeholder = snapshot.props?.string("placeholder") ?? ""
+        let handlerId = snapshot.eventHandlers["onChange"]?.intValue
+
+        return SecureField(placeholder, text: Binding(
+            get: { localText },
+            set: { newValue in
+                localText = newValue
+                if let handlerId {
+                    bus.fire(handlerId, payload: newValue)
+                }
+            }
+        ))
+        .onChange(of: remote) { newRemote in
+            if newRemote != localText {
+                localText = newRemote
+            }
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/ShareLinkView.swift

@@ -0,0 +1,27 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `ShareLink`. Constrained to `String` items for now — URLs and
+/// plain text both round-trip as Strings. A `title` prop is a shortcut for
+/// the `ShareLink("title", item: ...)` initializer; otherwise children
+/// render as the label.
+enum RNWShareLinkView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("ShareLink") { snapshot, children, _ in
+            guard let item = snapshot.props?.string("item") else {
+                return AnyView(EmptyView())
+            }
+            let subject = snapshot.props?.string("subject").map(Text.init)
+            let message = snapshot.props?.string("message").map(Text.init)
+            if let title = snapshot.props?.string("title") {
+                return AnyView(ShareLink(title, item: item, subject: subject, message: message))
+            }
+            return AnyView(
+                ShareLink(item: item, subject: subject, message: message) {
+                    children
+                }
+            )
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/SliderView.swift

@@ -0,0 +1,60 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `Slider`. Same optimistic-binding pattern as `Toggle` — local
+/// `@State` mirrors the snapshot's `value`, gets updated immediately on
+/// drag, fires the JS `onChange` callback with the new value, and
+/// converges to the next snapshot via `.onChange(of:)`.
+enum RNWSliderView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Slider") { snapshot, _, bus in
+            AnyView(SliderImpl(snapshot: snapshot, bus: bus))
+        }
+    }
+}
+
+private struct SliderImpl: View {
+    let snapshot: RNWShadowNodeSnapshot
+    let bus: RNWEventBus
+
+    @State private var localValue: Double
+
+    init(snapshot: RNWShadowNodeSnapshot, bus: RNWEventBus) {
+        self.snapshot = snapshot
+        self.bus = bus
+        _localValue = State(
+            initialValue: snapshot.props?.double("value") ?? 0)
+    }
+
+    var body: some View {
+        let remote = snapshot.props?.double("value") ?? 0
+        let min  = snapshot.props?.double("min")  ?? 0
+        let max  = snapshot.props?.double("max")  ?? 1
+        let step = snapshot.props?.double("step")
+        let handlerId = snapshot.eventHandlers["onChange"]?.intValue
+
+        let binding = Binding<Double>(
+            get: { localValue },
+            set: { newValue in
+                localValue = newValue
+                if let handlerId {
+                    bus.fire(handlerId, payload: newValue)
+                }
+            }
+        )
+
+        return Group {
+            if let step {
+                Slider(value: binding, in: min...max, step: step)
+            } else {
+                Slider(value: binding, in: min...max)
+            }
+        }
+        .onChange(of: remote) { newRemote in
+            if newRemote != localValue {
+                localValue = newRemote
+            }
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/SpacerView.swift

@@ -0,0 +1,13 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWSpacerView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Spacer") { snapshot, _, _ in
+            // Optional minimum length. Default is the system spacing.
+            let minLength = snapshot.props?.cgFloat("minLength")
+            return AnyView(Spacer(minLength: minLength))
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/StepperView.swift

@@ -0,0 +1,61 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `Stepper`. Same optimistic-binding pattern as `Slider` and
+/// `Toggle` — local `@State` mirrors the snapshot's `value`, gets bumped
+/// immediately on tap, fires the JS `onChange` callback with the new
+/// value, and converges to the next snapshot via `.onChange(of:)`.
+enum RNWStepperView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Stepper") { snapshot, _, bus in
+            AnyView(StepperImpl(snapshot: snapshot, bus: bus))
+        }
+    }
+}
+
+private struct StepperImpl: View {
+    let snapshot: RNWShadowNodeSnapshot
+    let bus: RNWEventBus
+
+    @State private var localValue: Double
+
+    init(snapshot: RNWShadowNodeSnapshot, bus: RNWEventBus) {
+        self.snapshot = snapshot
+        self.bus = bus
+        _localValue = State(
+            initialValue: snapshot.props?.double("value") ?? 0)
+    }
+
+    var body: some View {
+        let remote = snapshot.props?.double("value") ?? 0
+        let label = snapshot.props?.string("label") ?? ""
+        let minimum = snapshot.props?.double("minimum")
+        let maximum = snapshot.props?.double("maximum")
+        let step = snapshot.props?.double("step") ?? 1
+        let handlerId = snapshot.eventHandlers["onChange"]?.intValue
+
+        let binding = Binding<Double>(
+            get: { localValue },
+            set: { newValue in
+                localValue = newValue
+                if let handlerId {
+                    bus.fire(handlerId, payload: newValue)
+                }
+            }
+        )
+
+        return Group {
+            if let minimum, let maximum {
+                Stepper(label, value: binding, in: minimum...maximum, step: step)
+            } else {
+                Stepper(label, value: binding, step: step)
+            }
+        }
+        .onChange(of: remote) { newRemote in
+            if newRemote != localValue {
+                localValue = newRemote
+            }
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/TabViewView.swift

@@ -0,0 +1,88 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `TabView`. JS controls selection via a string `tabTag` prop on
+/// each child (any child can declare it — most apps wrap each tab in a
+/// `VStack` with `tabTag="rooms"` / `tabTag="schedule"`). Selection is
+/// optimistically bound locally so the page transitions immediately when
+/// the user swipes, then converges to the next JS snapshot.
+///
+/// Children are iterated directly off `snapshot.children` (not the
+/// pre-materialized `children: AnyView`) so we can apply `.tag(...)` per
+/// child — SwiftUI's selection binding matches against those tags.
+enum RNWTabViewView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("TabView") { snapshot, _, bus in
+            AnyView(TabViewImpl(snapshot: snapshot, bus: bus))
+        }
+    }
+
+    fileprivate static func resolveTag(
+        for child: RNWShadowNodeSnapshot,
+        fallbackIndex: Int
+    ) -> String {
+        child.props?.string("tabTag") ?? String(fallbackIndex)
+    }
+}
+
+private struct TabViewImpl: View {
+    let snapshot: RNWShadowNodeSnapshot
+    let bus: RNWEventBus
+
+    @State private var localSelection: String
+
+    init(snapshot: RNWShadowNodeSnapshot, bus: RNWEventBus) {
+        self.snapshot = snapshot
+        self.bus = bus
+        // Initial selection: prop > first child's resolved tag > empty.
+        let initial: String
+        if let s = snapshot.props?.string("selection") {
+            initial = s
+        } else if let first = snapshot.viewChildren.first {
+            initial = RNWTabViewView.resolveTag(for: first, fallbackIndex: 0)
+        } else {
+            initial = ""
+        }
+        _localSelection = State(initialValue: initial)
+    }
+
+    var body: some View {
+        let remote = snapshot.props?.string("selection")
+        let style = snapshot.props?.string("style")
+        let handlerId = snapshot.eventHandlers["onSelectionChange"]?.intValue
+
+        let binding = Binding<String>(
+            get: { localSelection },
+            set: { newValue in
+                localSelection = newValue
+                if let handlerId {
+                    bus.fire(handlerId, payload: newValue)
+                }
+            }
+        )
+
+        let children = snapshot.viewChildren
+        let tabView = TabView(selection: binding) {
+            ForEach(Array(children.enumerated()), id: \.element.tag) { idx, child in
+                RNWNodeRenderer.render(child, bus: bus)
+                    .tag(RNWTabViewView.resolveTag(for: child, fallbackIndex: idx))
+            }
+        }
+
+        return Group {
+            switch style {
+            case "automatic":
+                tabView.tabViewStyle(.automatic)
+            default:
+                // watchOS default — `.page`. Also handles style == "page".
+                tabView.tabViewStyle(.page)
+            }
+        }
+        .onChange(of: remote) { newRemote in
+            if let v = newRemote, v != localSelection {
+                localSelection = v
+            }
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/TextFieldView.swift

@@ -0,0 +1,50 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `TextField`. Same optimistic-binding pattern as `Toggle` — a
+/// local `@State` mirror updates instantly while the user types, fires
+/// the JS `onChange` callback with the new text, and converges to the
+/// next snapshot via `.onChange(of:)` when JS pushes an authoritative
+/// value.
+enum RNWTextFieldView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("TextField") { snapshot, _, bus in
+            AnyView(TextFieldImpl(snapshot: snapshot, bus: bus))
+        }
+    }
+}
+
+private struct TextFieldImpl: View {
+    let snapshot: RNWShadowNodeSnapshot
+    let bus: RNWEventBus
+
+    @State private var localText: String
+
+    init(snapshot: RNWShadowNodeSnapshot, bus: RNWEventBus) {
+        self.snapshot = snapshot
+        self.bus = bus
+        _localText = State(initialValue: snapshot.props?.string("value") ?? "")
+    }
+
+    var body: some View {
+        let remote = snapshot.props?.string("value") ?? ""
+        let placeholder = snapshot.props?.string("placeholder") ?? ""
+        let handlerId = snapshot.eventHandlers["onChange"]?.intValue
+
+        return TextField(placeholder, text: Binding(
+            get: { localText },
+            set: { newValue in
+                localText = newValue
+                if let handlerId {
+                    bus.fire(handlerId, payload: newValue)
+                }
+            }
+        ))
+        .onChange(of: remote) { newRemote in
+            if newRemote != localText {
+                localText = newRemote
+            }
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/TextView.swift

@@ -0,0 +1,37 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `Text` registration. Concatenates direct rawText children
+/// (one per JSX string literal) into a single styled `Text`. Any
+/// text-only modifiers are applied here to preserve the `Text → Text`
+/// overload chain; generic modifiers (`.padding`, `.background`,
+/// `.foregroundColor`, `.font`) flow through the renderer's reduce.
+enum RNWTextView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Text") { snapshot, _, _ in
+            var text = Text(joinRawTextChildren(of: snapshot))
+
+            for mod in snapshot.modifiers {
+                guard let dict = mod as? [String: Any],
+                      let type = dict["$type"] as? String,
+                      RNWTextModifierRegistry.shared.contains(type) else {
+                    continue
+                }
+                text = RNWTextModifierRegistry.shared.apply(dict, to: text)
+            }
+
+            return AnyView(text)
+        }
+    }
+
+    private static func joinRawTextChildren(
+        of snapshot: RNWShadowNodeSnapshot
+    ) -> String {
+        var out = ""
+        for child in snapshot.children where child.kind == .rawText {
+            if let s = child.text { out.append(s) }
+        }
+        return out
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/TimelineViewView.swift

@@ -0,0 +1,42 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWTimelineViewView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("TimelineView") { snapshot, children, _ in
+            guard
+                let schedule = snapshot.props?["schedule"] as? [String: Any],
+                let kind = schedule.string("kind")
+            else {
+                return AnyView(children)
+            }
+
+            // TODO: TimelineView's content closure receives a `Context` with
+            // the current tick date; we don't bridge it back to JS yet
+            // because that would require rebuilding the children subtree
+            // on every tick. Wire this once we have a per-tick prop path.
+            switch kind {
+            case "everyMinute":
+                return AnyView(TimelineView(.everyMinute) { _ in children })
+            case "periodic":
+                let by = schedule.double("by") ?? 1
+                let from = schedule.double("from").map { Date(timeIntervalSince1970: $0 / 1000) } ?? .now
+                return AnyView(TimelineView(.periodic(from: from, by: by)) { _ in children })
+            case "animation":
+                let minimumInterval = schedule.double("minimumInterval")
+                let paused = schedule.bool("paused") ?? false
+                return AnyView(
+                    TimelineView(.animation(minimumInterval: minimumInterval, paused: paused)) { _ in children }
+                )
+            case "explicit":
+                let dates = (schedule["dates"] as? [NSNumber] ?? []).map {
+                    Date(timeIntervalSince1970: $0.doubleValue / 1000)
+                }
+                return AnyView(TimelineView(.explicit(dates)) { _ in children })
+            default:
+                return AnyView(children)
+            }
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/ToggleView.swift

@@ -0,0 +1,58 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `Toggle`. The on/off state is bound bidirectionally: the JS
+/// side owns the source of truth via `value`, but we hold a local
+/// `@State` mirror so the toggle animates instantly when the user taps
+/// — without waiting for the JS round-trip. The next snapshot from JS
+/// converges the local state via `.onChange`.
+enum RNWToggleView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Toggle") { snapshot, children, bus in
+            AnyView(ToggleImpl(snapshot: snapshot, children: children, bus: bus))
+        }
+    }
+}
+
+/// Concrete SwiftUI view — needed so we can hang `@State` off it.
+/// `.id(node.tag)` in `RNWNodeRenderer` keeps this struct's identity
+/// stable across re-renders, which is what makes `@State` persist.
+private struct ToggleImpl: View {
+    let snapshot: RNWShadowNodeSnapshot
+    let children: AnyView
+    let bus: RNWEventBus
+
+    @State private var localValue: Bool
+
+    init(snapshot: RNWShadowNodeSnapshot, children: AnyView, bus: RNWEventBus) {
+        self.snapshot = snapshot
+        self.children = children
+        self.bus = bus
+        let initial = snapshot.props?.bool("value") ?? false
+        _localValue = State(initialValue: initial)
+    }
+
+    var body: some View {
+        let remote = snapshot.props?.bool("value") ?? false
+        let handlerId = snapshot.eventHandlers["onChange"]?.intValue
+
+        return Toggle(isOn: Binding(
+            get: { localValue },
+            set: { newValue in
+                localValue = newValue
+                if let handlerId {
+                    bus.fire(handlerId, payload: newValue)
+                }
+            }
+        )) {
+            children
+        }
+        .onChange(of: remote) { newRemote in
+            // JS pushed an authoritative value — converge.
+            if newRemote != localValue {
+                localValue = newRemote
+            }
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/VStackView.swift

@@ -0,0 +1,25 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWVStackView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("VStack") { snapshot, children, _ in
+            let alignment = parseAlignment(snapshot.props?.string("alignment"))
+            let spacing = snapshot.props?.cgFloat("spacing")
+            return AnyView(
+                VStack(alignment: alignment, spacing: spacing) {
+                    children
+                }
+            )
+        }
+    }
+
+    private static func parseAlignment(_ s: String?) -> HorizontalAlignment {
+        switch s {
+        case "leading":  return .leading
+        case "trailing": return .trailing
+        default:         return .center
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/ViewThatFitsView.swift

@@ -0,0 +1,20 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWViewThatFitsView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("ViewThatFits") { snapshot, children, _ in
+            let axes = parseAxes(snapshot.props?.string("axes"))
+            return AnyView(ViewThatFits(in: axes) { children })
+        }
+    }
+
+    private static func parseAxes(_ s: String?) -> Axis.Set {
+        switch s {
+        case "horizontal": return .horizontal
+        case "vertical":   return .vertical
+        default:           return [.horizontal, .vertical]
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Views/ZStackView.swift

@@ -0,0 +1,30 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWZStackView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("ZStack") { snapshot, children, _ in
+            let alignment = parseAlignment(snapshot.props?.string("alignment"))
+            return AnyView(
+                ZStack(alignment: alignment) {
+                    children
+                }
+            )
+        }
+    }
+
+    private static func parseAlignment(_ s: String?) -> Alignment {
+        switch s {
+        case "leading":         return .leading
+        case "trailing":        return .trailing
+        case "top":             return .top
+        case "bottom":          return .bottom
+        case "topLeading":      return .topLeading
+        case "topTrailing":     return .topTrailing
+        case "bottomLeading":   return .bottomLeading
+        case "bottomTrailing":  return .bottomTrailing
+        default:                return .center
+        }
+    }
+}