@appsent-co/react-native-watchos 0.1.0

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

@@ -0,0 +1,168 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `AsyncImage`. Two render shapes:
+///
+///   1. *Bare* (no phase children) — uses `AsyncImage(url:scale:)` and
+///      gets SwiftUI's default spinner + broken-image glyph at intrinsic
+///      image size.
+///   2. *Phase-driven* — when any of `AsyncImagePhaseEmpty`,
+///      `AsyncImagePhaseSuccess`, `AsyncImagePhaseFailure` is present as
+///      a direct child, we switch to the closure form
+///      `AsyncImage(url:scale:) { phase in … }`. The matching slot is
+///      rendered for each phase. Inside the `Success` subtree, the
+///      `AsyncImageImage` sentinel resolves to the loaded `Image` via
+///      `EnvironmentValues.rnwAsyncImagePhaseImage` — that's how we hand
+///      the SwiftUI Image value across the snapshot/closure boundary
+///      without breaking the React shadow tree's data flow.
+enum RNWAsyncImageView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("AsyncImage") { snapshot, _, bus in
+            guard let urlString = snapshot.props?.string("url"),
+                  let url = URL(string: urlString) else {
+                return AnyView(EmptyView())
+            }
+            let scale = snapshot.props?.cgFloat("scale") ?? 1.0
+
+            var emptyChild: RNWShadowNodeSnapshot?
+            var successChild: RNWShadowNodeSnapshot?
+            var failureChild: RNWShadowNodeSnapshot?
+            for child in snapshot.children {
+                switch child.viewName {
+                case "AsyncImagePhaseEmpty":   emptyChild = child
+                case "AsyncImagePhaseSuccess": successChild = child
+                case "AsyncImagePhaseFailure": failureChild = child
+                default: break
+                }
+            }
+
+            let hasPhaseChildren = emptyChild != nil
+                || successChild != nil
+                || failureChild != nil
+
+            if !hasPhaseChildren {
+                return AnyView(AsyncImage(url: url, scale: scale))
+            }
+
+            return AnyView(
+                AsyncImage(url: url, scale: scale) { phase in
+                    switch phase {
+                    case .empty:
+                        if let node = emptyChild {
+                            RNWNodeRenderer.render(node, bus: bus)
+                        } else {
+                            EmptyView()
+                        }
+                    case .success(let image):
+                        if let node = successChild {
+                            RNWNodeRenderer.render(node, bus: bus)
+                                .environment(\.rnwAsyncImagePhaseImage, image)
+                        } else {
+                            // No Success slot: fall back to the bare image so
+                            // the load isn't silently discarded.
+                            image
+                        }
+                    case .failure:
+                        if let node = failureChild {
+                            RNWNodeRenderer.render(node, bus: bus)
+                        } else {
+                            EmptyView()
+                        }
+                    @unknown default:
+                        EmptyView()
+                    }
+                }
+            )
+        }
+    }
+}
+
+/// Sentinel child of `<AsyncImage.Success>` — pulls the loaded SwiftUI
+/// `Image` out of the environment and applies image-only modifiers
+/// before erasing to `AnyView` (so subsequent generic modifiers flow
+/// through the standard outer pipeline). Outside a `Success` closure
+/// the environment value is `nil` and this renders nothing.
+enum RNWAsyncImageImageView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("AsyncImageImage") { snapshot, _, _ in
+            // Pre-filter to image-only modifier dicts so the bridge view
+            // doesn't have to do registry lookups in its body.
+            let imageMods: [[String: Any]] = snapshot.modifiers.compactMap { mod in
+                guard let dict = mod as? [String: Any],
+                      let type = dict["$type"] as? String,
+                      RNWImageModifierRegistry.shared.contains(type) else {
+                    return nil
+                }
+                return dict
+            }
+            return AnyView(RNWAsyncImageImageBridge(imageModifiers: imageMods))
+        }
+    }
+}
+
+/// Internal bridge that reads the loaded `Image` from the environment and
+/// applies image-only modifiers in source order. Exists so the registry
+/// builder (which can't be a `View`) can still participate in SwiftUI's
+/// per-render environment lookup.
+private struct RNWAsyncImageImageBridge: View {
+    @Environment(\.rnwAsyncImagePhaseImage) private var loaded
+    let imageModifiers: [[String: Any]]
+
+    var body: some View {
+        if let loaded {
+            styled(loaded)
+        } else {
+            EmptyView()
+        }
+    }
+
+    private func styled(_ image: Image) -> Image {
+        imageModifiers.reduce(image) { acc, dict in
+            RNWImageModifierRegistry.shared.apply(dict, to: acc)
+        }
+    }
+}
+
+// MARK: - Empty slot leaves
+//
+// `AsyncImagePhaseEmpty/Success/Failure` are walked by the parent
+// `AsyncImage` builder, but they still need a builder entry so
+// `RNWNodeRenderer.render` produces a sensible value when called on
+// them directly (during the per-phase render). Each just renders its
+// children inline — the slot semantics live in the parent.
+
+enum RNWAsyncImagePhaseEmptyView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("AsyncImagePhaseEmpty") { _, children, _ in AnyView(children) }
+    }
+}
+
+enum RNWAsyncImagePhaseSuccessView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("AsyncImagePhaseSuccess") { _, children, _ in AnyView(children) }
+    }
+}
+
+enum RNWAsyncImagePhaseFailureView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("AsyncImagePhaseFailure") { _, children, _ in AnyView(children) }
+    }
+}
+
+// MARK: - Environment plumbing for the loaded Image
+
+private struct RNWAsyncImagePhaseImageKey: EnvironmentKey {
+    static let defaultValue: Image? = nil
+}
+
+extension EnvironmentValues {
+    fileprivate var rnwAsyncImagePhaseImage: Image? {
+        get { self[RNWAsyncImagePhaseImageKey.self] }
+        set { self[RNWAsyncImagePhaseImageKey.self] = newValue }
+    }
+}

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

@@ -0,0 +1,23 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `Button`. JS passes the press handler as a numeric id in
+/// `eventHandlers["onPress"]`; we capture the event bus and fire that
+/// id when the user taps. Children become the button's label content.
+enum RNWButtonView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Button") { snapshot, children, bus in
+            let handlerId = snapshot.eventHandlers["onPress"]?.intValue
+            return AnyView(
+                Button {
+                    if let handlerId {
+                        bus.fire(handlerId)
+                    }
+                } label: {
+                    children
+                }
+            )
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWCapsuleView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Capsule") { _, _, _ in
+            AnyView(Capsule())
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWCircleView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Circle") { _, _, _ in
+            AnyView(Circle())
+        }
+    }
+}

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

@@ -0,0 +1,22 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWColorView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Color") { snapshot, _, _ in
+            let opacity = snapshot.props?.double("opacity") ?? 1
+
+            if let name = snapshot.props?.string("name"),
+               let parsed = RNWColorParser.parse(name) {
+                return AnyView(parsed.opacity(opacity))
+            }
+            if let r = snapshot.props?.double("red"),
+               let g = snapshot.props?.double("green"),
+               let b = snapshot.props?.double("blue") {
+                return AnyView(Color(.sRGB, red: r, green: g, blue: b, opacity: opacity))
+            }
+            return AnyView(Color.clear)
+        }
+    }
+}

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

@@ -0,0 +1,87 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `ContentUnavailableView` (watchOS 10+). Default variant walks
+/// `snapshot.children` for sentinel slots and routes them into the
+/// `label:` / `description:` / `actions:` closures (Section-style). The
+/// `search` variant uses the system-provided empty-search-results preset
+/// (`.search` or `.search(text:)`) and ignores children.
+///
+/// SwiftUI requires the `label:` closure to produce something, so an
+/// absent label slot falls back to an empty `Text` rather than EmptyView.
+enum RNWContentUnavailableView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("ContentUnavailableView") { snapshot, _, bus in
+            if #available(watchOS 10.0, *) {
+                let variant = snapshot.props?.string("variant") ?? "default"
+                if variant == "search" {
+                    if let text = snapshot.props?.string("searchText") {
+                        return AnyView(ContentUnavailableView.search(text: text))
+                    }
+                    return AnyView(ContentUnavailableView.search)
+                }
+
+                var labelView: AnyView?
+                var descriptionView: AnyView?
+                var actionsView: AnyView?
+                for child in snapshot.children {
+                    switch child.viewName {
+                    case "ContentUnavailableLabel":
+                        labelView = RNWNodeRenderer.render(child, bus: bus)
+                    case "ContentUnavailableDescription":
+                        descriptionView = RNWNodeRenderer.render(child, bus: bus)
+                    case "ContentUnavailableActions":
+                        actionsView = RNWNodeRenderer.render(child, bus: bus)
+                    default:
+                        break
+                    }
+                }
+
+                let label = labelView ?? AnyView(Text(""))
+                let description = descriptionView ?? AnyView(EmptyView())
+                let actions = actionsView ?? AnyView(EmptyView())
+                return AnyView(
+                    ContentUnavailableView {
+                        label
+                    } description: {
+                        description
+                    } actions: {
+                        actions
+                    }
+                )
+            }
+            return AnyView(EmptyView())
+        }
+    }
+}
+
+/// Sentinel — routed into `ContentUnavailableView`'s `label:` slot.
+enum RNWContentUnavailableLabelView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("ContentUnavailableLabel") { _, children, _ in
+            AnyView(children)
+        }
+    }
+}
+
+/// Sentinel — routed into `ContentUnavailableView`'s `description:` slot.
+enum RNWContentUnavailableDescriptionView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("ContentUnavailableDescription") { _, children, _ in
+            AnyView(children)
+        }
+    }
+}
+
+/// Sentinel — routed into `ContentUnavailableView`'s `actions:` slot.
+enum RNWContentUnavailableActionsView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("ContentUnavailableActions") { _, children, _ in
+            AnyView(children)
+        }
+    }
+}

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

@@ -0,0 +1,90 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `DatePicker`. Same optimistic-binding pattern as `Toggle` /
+/// `Slider`: JS owns the source of truth via `selection` (ISO-8601
+/// string), but a local `@State` mirror lets the wheel react instantly
+/// to user input without waiting for the JS round-trip. The next
+/// snapshot from JS converges the local state via `.onChange(of:)`.
+///
+/// JSON has no `Date` type, so dates cross the bridge as ISO-8601
+/// strings (parsed/serialized with `ISO8601DateFormatter`).
+enum RNWDatePickerView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("DatePicker") { snapshot, _, bus in
+            if #available(watchOS 10.0, *) {
+                return AnyView(DatePickerImpl(snapshot: snapshot, bus: bus))
+            } else {
+                return AnyView(EmptyView())
+            }
+        }
+    }
+}
+
+/// Shared formatter — `ISO8601DateFormatter` is thread-safe and
+/// allocating one per render would churn under heavy interaction.
+private let isoFormatter = ISO8601DateFormatter()
+
+private func parseISO(_ s: String?) -> Date? {
+    guard let s else { return nil }
+    return isoFormatter.date(from: s)
+}
+
+@available(watchOS 10.0, *)
+private struct DatePickerImpl: View {
+    let snapshot: RNWShadowNodeSnapshot
+    let bus: RNWEventBus
+
+    @State private var localDate: Date
+
+    init(snapshot: RNWShadowNodeSnapshot, bus: RNWEventBus) {
+        self.snapshot = snapshot
+        self.bus = bus
+        let initial = parseISO(snapshot.props?.string("selection")) ?? Date()
+        _localDate = State(initialValue: initial)
+    }
+
+    var body: some View {
+        let label = snapshot.props?.string("label") ?? ""
+        let remote = parseISO(snapshot.props?.string("selection")) ?? localDate
+        let components = parseComponents(snapshot.props?.string("displayedComponents"))
+        let minimum = parseISO(snapshot.props?.string("minimum"))
+        let maximum = parseISO(snapshot.props?.string("maximum"))
+        let handlerId = snapshot.eventHandlers["onSelectionChange"]?.intValue
+
+        let binding = Binding<Date>(
+            get: { localDate },
+            set: { newValue in
+                localDate = newValue
+                if let handlerId {
+                    bus.fire(handlerId, payload: isoFormatter.string(from: newValue))
+                }
+            }
+        )
+
+        return Group {
+            if let minimum, let maximum {
+                DatePicker(label, selection: binding, in: minimum...maximum, displayedComponents: components)
+            } else {
+                DatePicker(label, selection: binding, displayedComponents: components)
+            }
+        }
+        .onChange(of: remote) { newRemote in
+            if newRemote != localDate {
+                localDate = newRemote
+            }
+        }
+    }
+
+    private func parseComponents(_ raw: String?) -> DatePickerComponents {
+        switch raw {
+        case "date":
+            return .date
+        case "hourAndMinute":
+            return .hourAndMinute
+        default:
+            return [.date, .hourAndMinute]
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWDividerView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Divider") { _, _, _ in
+            AnyView(Divider())
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWEllipseView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Ellipse") { _, _, _ in
+            AnyView(Ellipse())
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWEmptyViewView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("EmptyView") { _, _, _ in
+            AnyView(EmptyView())
+        }
+    }
+}

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

@@ -0,0 +1,14 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `Form`. Container for settings/data-entry UI — children render
+/// as grouped, scrolling rows. Typically holds `Section`s with `Toggle`,
+/// `Slider`, and `TextField` controls.
+enum RNWFormView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Form") { _, children, _ in
+            AnyView(Form { children })
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `Gauge`. Stateless display view — reads `value` within
+/// `minimum`...`maximum` and renders the platform gauge. The `label`
+/// and optional `currentValueLabel` are flat string props (rather than
+/// nested label children) since watchOS gauges treat them as captions,
+/// not arbitrary content trees.
+enum RNWGaugeView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Gauge") { snapshot, _, _ in
+            let value = snapshot.props?.double("value") ?? 0
+            let minimum = snapshot.props?.double("minimum") ?? 0
+            let maximum = snapshot.props?.double("maximum") ?? 1
+            let label = snapshot.props?.string("label") ?? ""
+            let currentValueLabel = snapshot.props?.string("currentValueLabel")
+
+            if let currentValueLabel {
+                return AnyView(
+                    Gauge(value: value, in: minimum...maximum) {
+                        Text(label)
+                    } currentValueLabel: {
+                        Text(currentValueLabel)
+                    }
+                )
+            }
+            return AnyView(
+                Gauge(value: value, in: minimum...maximum) {
+                    Text(label)
+                }
+            )
+        }
+    }
+}

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

@@ -0,0 +1,14 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWGeometryReaderView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        // TODO: geometry events are not yet bridged to JS. A follow-up
+        // will surface `geo.size`/`geo.frame(in:)` via an
+        // `onGeometryChange` event on this view.
+        r.register("GeometryReader") { _, children, _ in
+            AnyView(GeometryReader { _ in children })
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWGridRowView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("GridRow") { snapshot, children, _ in
+            let alignment = parseAlignment(snapshot.props?.string("alignment"))
+            return AnyView(
+                GridRow(alignment: alignment) {
+                    children
+                }
+            )
+        }
+    }
+
+    private static func parseAlignment(_ s: String?) -> VerticalAlignment? {
+        switch s {
+        case "top":                return .top
+        case "center":             return .center
+        case "bottom":             return .bottom
+        case "firstTextBaseline":  return .firstTextBaseline
+        case "lastTextBaseline":   return .lastTextBaseline
+        default:                   return nil
+        }
+    }
+}

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

@@ -0,0 +1,37 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWGridView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Grid") { snapshot, children, _ in
+            let alignment = parseAlignment(snapshot.props?.string("alignment")) ?? .center
+            let horizontalSpacing = snapshot.props?.cgFloat("horizontalSpacing")
+            let verticalSpacing = snapshot.props?.cgFloat("verticalSpacing")
+            return AnyView(
+                Grid(
+                    alignment: alignment,
+                    horizontalSpacing: horizontalSpacing,
+                    verticalSpacing: verticalSpacing
+                ) {
+                    children
+                }
+            )
+        }
+    }
+
+    private static func parseAlignment(_ s: String?) -> Alignment? {
+        switch s {
+        case "leading":        return .leading
+        case "trailing":       return .trailing
+        case "center":         return .center
+        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 nil
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `Group` — a transparent wrapper that lets a JS author apply
+/// `modifiers={[…]}` to a logical set of siblings without introducing a
+/// stack (which would change layout). Use the pre-rendered `children`
+/// directly; `Group` simply forwards them.
+enum RNWGroupView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Group") { _, children, _ in
+            AnyView(Group { children })
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+enum RNWHStackView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("HStack") { snapshot, children, _ in
+            let alignment = parseAlignment(snapshot.props?.string("alignment"))
+            let spacing = snapshot.props?.cgFloat("spacing")
+            return AnyView(
+                HStack(alignment: alignment, spacing: spacing) {
+                    children
+                }
+            )
+        }
+    }
+
+    private static func parseAlignment(_ s: String?) -> VerticalAlignment {
+        switch s {
+        case "top":                return .top
+        case "bottom":             return .bottom
+        case "firstTextBaseline":  return .firstTextBaseline
+        case "lastTextBaseline":   return .lastTextBaseline
+        default:                   return .center
+        }
+    }
+}

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

@@ -0,0 +1,31 @@
+import SwiftUI
+import ReactNativeWatchOSCxx
+
+/// SwiftUI `Image`. Phase 8 scope is SF Symbols only — the watch-app
+/// asset catalog story is its own rabbit hole and isn't needed yet.
+///
+/// Image-only modifiers (`.resizable()`, …) are consumed up front via
+/// `RNWImageModifierRegistry` so they stay `Image → Image`; then the
+/// erased view flows through the generic modifier reduce.
+enum RNWImageView {
+    @MainActor
+    static func register(into r: RNWViewRegistry) {
+        r.register("Image") { snapshot, _, _ in
+            // SF Symbol name is the only source we support for now.
+            // Pass `name` if/when asset-catalog images come online.
+            let symbol = snapshot.props?.string("systemName") ?? ""
+            var image = Image(systemName: symbol)
+
+            for mod in snapshot.modifiers {
+                guard let dict = mod as? [String: Any],
+                      let type = dict["$type"] as? String,
+                      RNWImageModifierRegistry.shared.contains(type) else {
+                    continue
+                }
+                image = RNWImageModifierRegistry.shared.apply(dict, to: image)
+            }
+
+            return AnyView(image)
+        }
+    }
+}