@appsent-co/react-native-watchos 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Appsent
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,94 @@
+![@appsent-co/react-native-watchos](https://github.com/appsent-co/react-native-watchos/blob/main/docs/static/header.png?raw=true)
+
+Build watchOS apps with React, rendered as native SwiftUI. React
+runs in Hermes on the watch and drives a SwiftUI view tree via JSI — no
+WebViews, no canvas, no compromises.
+
+> ⚠️ Pre-release. The renderer, JS runtime, Fast Refresh, and Watch
+> Connectivity bridge are working end-to-end, but APIs may still change
+> and the non-Expo path is not documented yet.
+
+## Quick start (Expo)
+
+```sh
+npx expo install @appsent-co/react-native-watchos @bacons/apple-targets
+npx react-native-watchos init
+```
+
+`init` runs Evan Bacon's `create-target watch`, drops a working
+[`ContentView.swift`](./plugin/templates/ContentView.swift) into
+`targets/<name>/`, scaffolds [`index.watchos.tsx`](./plugin/templates/index.watchos.tsx),
+and patches your `app.json` to register the
+[`@appsent-co/react-native-watchos`](./plugin/src/index.js) config plugin after
+`@bacons/apple-targets`.
+
+Add the Metro helper to your [`metro.config.js`](./example/metro.config.js)
+so Metro resolves `*.watchos.{ts,tsx,js,jsx}` for `?platform=watchos`
+requests:
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+const { withWatchosMetro } = require('@appsent-co/react-native-watchos/metro-config');
+
+module.exports = withWatchosMetro(getDefaultConfig(__dirname));
+```
+
+Then prebuild and run:
+
+```sh
+npx expo prebuild -p ios --clean
+npx expo run:ios
+```
+
+## Pure React Native (non-Expo)
+
+Guide in progress. The Swift Package, Metro helper, and renderer all
+work without Expo — the missing piece is a non-Expo equivalent of the
+watch-target generation and Release bundle build phase that the config
+plugin currently handles for you.
+
+## Features
+
+**Renderer** — React 19 rendering to native SwiftUI, with support for
+most of the SwiftUI API: layout containers, lists, forms, navigation,
+controls, media, shapes, gradients, and watch-specific modifiers like
+digital crown rotation and sensory feedback. See
+[`src/components/`](./src/components/) and
+[`src/modifiers/`](./src/modifiers/) for the full surface.
+
+**JS runtime** — Hermes embedded on watchOS via JSI, with `console.*`,
+timers, `fetch` / `XMLHttpRequest`, and `WebSocket` installed.
+
+**TurboModules** — Create native modules in Swift / Obj-C++ and call
+them from JS with full codegen support.
+
+**Watch Connectivity** — Bidirectional messaging, user-info / app
+context sync, reachability and activation state, binary payloads —
+exposed from [`src/watchConnectivity/`](./src/watchConnectivity/).
+
+**Dev experience** — Metro `?platform=watchos` resolution via
+`withWatchosMetro`, Fast Refresh over WebSocket, shake-to-reload
+(~2.3g), on-device error toast, and `console.*` forwarded to the Metro
+terminal.
+
+**Expo plugin** — Wires the Swift Package into your watch target, runs
+autolinking with a customizable watchOS deployment target, installs the
+Release bundle build phase (`expo export:embed --platform watchos`),
+and runs codegen for the WatchConnectivity spec.
+
+## Customizing the watch target
+
+Icons, display name, Info.plist entries, capabilities, deployment
+target — anything about the watch target itself is governed by
+`expo-target.config.{json,js}` from
+[`@bacons/apple-targets`](https://github.com/EvanBacon/expo-apple-targets).
+This package only owns the runtime side.
+
+## Example
+
+A working example app lives in [`example/`](./example/README.md) — a
+component gallery, a task-tracking app (Sweepy), and a Pokédex demo.
+
+## License
+
+MIT

package/RNWatchConnectivity.podspec

@@ -0,0 +1,77 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'RNWatchConnectivity'
+  s.version        = package['version']
+  s.summary        = 'React Native bridge for Apple WatchConnectivity (WCSession).'
+  s.description    = <<~DESC
+    Exposes Apple's WatchConnectivity (WCSession) framework to JavaScript
+    on both the iOS host app and its paired watchOS app. Same TurboModule,
+    same JS API, autolinked on both platforms.
+  DESC
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.source         = { :git => package['repository']['url'], :tag => "v#{s.version}" }
+
+  # Both platforms are declared:
+  #   * `:ios`     — picked up by standard RN autolinking via
+  #                  `react-native config`, compiles into the host app.
+  #   * `:watchos` — picked up by this package's `use_watchos_modules!`
+  #                  (cocoapods/autolink.rb), compiles into the watch
+  #                  target. Same sources, two consumers.
+  s.platforms      = { :ios => '15.0', :watchos => '9.0' }
+
+  s.source_files   = [
+    'apple/Sources/WatchConnectivity/RNWWatchConnectivity.mm',
+    'apple/Sources/WatchConnectivity/RNWWatchConnectivity.h',
+  ]
+  s.public_header_files = [
+    'apple/Sources/WatchConnectivity/RNWWatchConnectivity.h',
+  ]
+
+  # WatchConnectivity is a system framework available on both platforms.
+  s.frameworks     = 'WatchConnectivity'
+
+  # iOS slice deps. Each scoped to `:ios` so `pod install` doesn't try
+  # to apply them to the watch target (most of these are iOS-only — the
+  # watch slice gets the equivalent symbols from the prebuilt
+  # ReactNativeWatchOSCxx xcframework instead).
+  #
+  # - React-Core: RCTBridgeModule, RCTEventEmitter
+  # - ReactCommon/turbomodule/core: <ReactCommon/RCTTurboModule.h>
+  # - ReactCodegen: <NativeWatchConnectivitySpecJSI> + the spec header
+  s.ios.dependency 'React-Core'
+  s.ios.dependency 'ReactCommon/turbomodule/core'
+  s.ios.dependency 'ReactCodegen'
+
+  s.pod_target_xcconfig = {
+    'CLANG_CXX_LANGUAGE_STANDARD' => 'c++20',
+    'GCC_PREPROCESSOR_DEFINITIONS' => '$(inherited) RCT_NEW_ARCH_ENABLED=1',
+  }
+
+  # Watch slice imports `<ReactNativeWatchOSCxx/...>` headers from the
+  # prebuilt xcframework (whose headers aren't picked up automatically
+  # by CocoaPods since the xcframework is consumed via SPM). It also
+  # imports `RNWatchConnectivitySpec.h` from the watchOS codegen output
+  # written by `withWatchTurboModuleCodegen`.
+  #
+  # `${PODS_TARGET_SRCROOT}` resolves to this pod's source root —
+  # i.e. the package root since the podspec lives there. From there:
+  #   * xcframework headers: `build/xcframework/.../Headers`
+  #   * generated codegen:   relative to PODS_ROOT (consumer's ios/Pods),
+  #                          so we walk up to ios/build/generated.
+  s.watchos.pod_target_xcconfig = {
+    'CLANG_CXX_LANGUAGE_STANDARD' => 'c++20',
+    'GCC_PREPROCESSOR_DEFINITIONS' => '$(inherited) RCT_NEW_ARCH_ENABLED=1',
+    'HEADER_SEARCH_PATHS' => '$(inherited) ' \
+      '"${PODS_TARGET_SRCROOT}/build/xcframework/ReactNativeWatchOSCxx.xcframework/watchos-arm64/Headers" ' \
+      '"${PODS_TARGET_SRCROOT}/build/xcframework/ReactNativeWatchOSCxx.xcframework/watchos-arm64-simulator/Headers" ' \
+      '"${PODS_ROOT}/../build/generated/watchos-codegen-libs/RNWatchConnectivitySpec" ' \
+      '"${PODS_ROOT}/../build/generated/watchos-codegen-libs/RNWatchConnectivitySpec/RNWatchConnectivitySpec"',
+  }
+
+  s.compiler_flags = '-fobjc-arc-exceptions'
+end

package/app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./plugin/src');

package/apple/Package.swift

@@ -0,0 +1,49 @@
+// swift-tools-version:5.9
+//
+// @appsent-co/react-native-watchos — local Swift Package consumed by the WatchApp target.
+//
+// Two binary targets:
+//   - Hermes (dynamic framework) — the JS engine; embedded into the consumer
+//     app by SPM.
+//   - ReactNativeWatchOSCxx (static library + headers) — the ObjC++ host that
+//     owns the jsi::Runtime and installs `console`.
+//
+// Run scripts/build-xcframework.sh from the repo root once before resolving
+// this package so both XCFrameworks exist on disk under ../build/xcframework.
+
+import PackageDescription
+
+let package = Package(
+    name: "ReactNativeWatchOS",
+    platforms: [
+        .iOS(.v15),
+        .watchOS(.v9),
+    ],
+    products: [
+        .library(
+            name: "ReactNativeWatchOS",
+            targets: ["ReactNativeWatchOS"]
+        ),
+    ],
+    targets: [
+        .binaryTarget(
+            name: "Hermes",
+            path: "../build/xcframework/Hermes.xcframework"
+        ),
+        .binaryTarget(
+            name: "ReactNativeWatchOSCxx",
+            path: "../build/xcframework/ReactNativeWatchOSCxx.xcframework"
+        ),
+        .target(
+            name: "ReactNativeWatchOS",
+            dependencies: ["ReactNativeWatchOSCxx", "Hermes"],
+            path: "Sources/ReactNativeWatchOS",
+            linkerSettings: [
+                // ReactNativeWatchOSCxx is a static archive that includes JSI
+                // (C++) — consumer must link libc++ explicitly. Swift target
+                // alone wouldn't pull it in.
+                .linkedLibrary("c++"),
+            ]
+        ),
+    ]
+)

package/apple/Sources/ReactNativeWatchOS/DevSupport/ErrorToast.swift

@@ -0,0 +1,22 @@
+import SwiftUI
+
+/// Dismissable bottom banner. Just signals "go look" — the real error
+/// is in Metro's terminal.
+struct RNWErrorToast: View {
+    let onDismiss: () -> Void
+
+    var body: some View {
+        Button(action: onDismiss) {
+            Text("Error: check metro for logs")
+                .font(.system(size: 10))
+                .foregroundStyle(.white)
+                .padding(.horizontal, 8)
+                .padding(.vertical, 4)
+                .frame(maxWidth: .infinity)
+                .background(.red.opacity(0.85), in: Capsule())
+        }
+        .buttonStyle(.plain)
+        .padding(.horizontal, 4)
+        .padding(.bottom, 4)
+    }
+}

package/apple/Sources/ReactNativeWatchOS/DevSupport/ShakeDetector.swift

@@ -0,0 +1,42 @@
+#if DEBUG
+import CoreMotion
+import Foundation
+
+/// Bumps `shakeCount` on each detected shake. Counter (not Bool) so
+/// consecutive shakes always notify. DEBUG-only; host app must declare
+/// `NSMotionUsageDescription`.
+@MainActor
+final class ShakeDetector: ObservableObject {
+    @Published var shakeCount: Int = 0
+
+    private let motionManager = CMMotionManager()
+    private var lastShakeAt: Date = .distantPast
+
+    /// ~1g at rest; a wrist flick peaks ~2.3-3g. Lower fires on arm
+    /// swings; higher misses real shakes.
+    private let triggerG: Double = 2.3
+
+    /// Suppress refires while the same shake rings out.
+    private let debounce: TimeInterval = 0.6
+
+    func start() {
+        guard motionManager.isAccelerometerAvailable,
+              !motionManager.isAccelerometerActive else { return }
+        motionManager.accelerometerUpdateInterval = 1.0 / 30.0
+        motionManager.startAccelerometerUpdates(to: .main) { [weak self] data, _ in
+            guard let self, let data else { return }
+            let a = data.acceleration
+            let mag = sqrt(a.x * a.x + a.y * a.y + a.z * a.z)
+            guard mag > self.triggerG else { return }
+            let now = Date()
+            guard now.timeIntervalSince(self.lastShakeAt) > self.debounce else { return }
+            self.lastShakeAt = now
+            self.shakeCount += 1
+        }
+    }
+
+    deinit {
+        motionManager.stopAccelerometerUpdates()
+    }
+}
+#endif

package/apple/Sources/ReactNativeWatchOS/EventBus.swift

@@ -0,0 +1,20 @@
+import Foundation
+
+/// Bridge for Swift → JS event dispatch. View builders capture an
+/// `RNWEventBus` and invoke `fire(_:payload:)` from SwiftUI action
+/// closures (`Button { bus.fire(id) }`, `Toggle(isOn: binding)`, …).
+/// The injected dispatch closure is responsible for the main → JS-queue
+/// hop; the bus itself is thread-agnostic.
+public final class RNWEventBus: @unchecked Sendable {
+    private let dispatch: (Int, Any?) -> Void
+
+    public init(dispatch: @escaping (Int, Any?) -> Void) {
+        self.dispatch = dispatch
+    }
+
+    public func fire(_ handlerId: Int, payload: Any? = nil) {
+        dispatch(handlerId, payload)
+    }
+
+    public static let noop = RNWEventBus(dispatch: { _, _ in })
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AccessibilityAction.swift

@@ -0,0 +1,20 @@
+import SwiftUI
+
+/// SwiftUI `.accessibilityAction(_:_:)`. Registers a handler for a built-in
+/// accessibility action. `kind` selects the action (`default`/`escape`/
+/// `magicTap`), defaulting to `.default`; the handler fires the JS callback.
+enum RNWAccessibilityActionModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("accessibilityAction") { view, params, ctx in
+            let kind: AccessibilityActionKind
+            switch params.string("kind") {
+            case "escape":   kind = .escape
+            case "magicTap": kind = .magicTap
+            default:         kind = .default
+            }
+            let handler = params.int("handler")
+            return AnyView(view.accessibilityAction(kind) { ctx.fire(handler) })
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AccessibilityActions.swift

@@ -0,0 +1,17 @@
+import SwiftUI
+
+/// SwiftUI `.accessibilityActions(_:)` (watchOS 10+). Declares a set of
+/// custom accessibility actions from the content slot. On watchOS 9 the
+/// view is returned unchanged.
+enum RNWAccessibilityActionsModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("accessibilityActions") { view, params, ctx in
+            guard let body = ctx.content(params.string("content")) else { return view }
+            if #available(watchOS 10.0, *) {
+                return AnyView(view.accessibilityActions { body })
+            }
+            return view
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AccessibilityAddTraits.swift

@@ -0,0 +1,48 @@
+import SwiftUI
+
+/// Maps JS trait name(s) to a combined `AccessibilityTraits`. Owned by this
+/// unit (kept here rather than in foundation parsers) and shared with
+/// `RNWAccessibilityRemoveTraitsModifier`. Accepts a single string or an
+/// array of strings; unknown names are skipped.
+enum RNWAccessibilityTraitsParser {
+    static func parse(_ value: Any?) -> AccessibilityTraits {
+        var traits = AccessibilityTraits()
+        if let s = value as? String {
+            traits.insert(single(s))
+        } else if let arr = value as? [Any] {
+            for item in arr {
+                if let s = item as? String { traits.insert(single(s)) }
+            }
+        }
+        return traits
+    }
+
+    private static func single(_ s: String) -> AccessibilityTraits {
+        switch s {
+        case "isButton":               return .isButton
+        case "isHeader":               return .isHeader
+        case "isImage":                return .isImage
+        case "isLink":                 return .isLink
+        case "isSelected":             return .isSelected
+        case "isSummaryElement":       return .isSummaryElement
+        case "startsMediaSession":     return .startsMediaSession
+        case "updatesFrequently":      return .updatesFrequently
+        case "playsSound":             return .playsSound
+        case "allowsDirectInteraction": return .allowsDirectInteraction
+        default:                       return []
+        }
+    }
+}
+
+/// SwiftUI `.accessibilityAddTraits(_:)`. Adds one or more traits describing
+/// the view's behaviour. `traits` is a single name or an array combined into
+/// one `AccessibilityTraits`.
+enum RNWAccessibilityAddTraitsModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("accessibilityAddTraits") { view, params, _ in
+            let traits = RNWAccessibilityTraitsParser.parse(params["traits"])
+            return AnyView(view.accessibilityAddTraits(traits))
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AccessibilityElement.swift

@@ -0,0 +1,19 @@
+import SwiftUI
+
+/// SwiftUI `.accessibilityElement(children:)`. Creates an accessibility
+/// element for the view, controlling how its children participate.
+/// `children` maps to `AccessibilityChildBehavior`; defaults to `.ignore`.
+enum RNWAccessibilityElementModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("accessibilityElement") { view, params, _ in
+            let behavior: AccessibilityChildBehavior
+            switch params.string("children") {
+            case "combine": behavior = .combine
+            case "contain": behavior = .contain
+            default:        behavior = .ignore
+            }
+            return AnyView(view.accessibilityElement(children: behavior))
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AccessibilityHidden.swift

@@ -0,0 +1,13 @@
+import SwiftUI
+
+/// SwiftUI `.accessibilityHidden(_:)`. When `true` (the default when the
+/// param is absent), hides the view and its children from assistive
+/// technologies.
+enum RNWAccessibilityHiddenModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("accessibilityHidden") { view, params, _ in
+            AnyView(view.accessibilityHidden(params.bool("value") ?? true))
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AccessibilityHint.swift

@@ -0,0 +1,12 @@
+import SwiftUI
+
+/// SwiftUI `.accessibilityHint(_:)`. Describes the outcome of the view's
+/// action; read by VoiceOver after the label.
+enum RNWAccessibilityHintModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("accessibilityHint") { view, params, _ in
+            AnyView(view.accessibilityHint(Text(params.string("hint") ?? "")))
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AccessibilityIdentifier.swift

@@ -0,0 +1,12 @@
+import SwiftUI
+
+/// SwiftUI `.accessibilityIdentifier(_:)`. Sets a non-localized identifier
+/// used by UI tests; not spoken by VoiceOver.
+enum RNWAccessibilityIdentifierModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("accessibilityIdentifier") { view, params, _ in
+            AnyView(view.accessibilityIdentifier(params.string("identifier") ?? ""))
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AccessibilityLabel.swift

@@ -0,0 +1,12 @@
+import SwiftUI
+
+/// SwiftUI `.accessibilityLabel(_:)`. Overrides the label VoiceOver reads to
+/// identify the view.
+enum RNWAccessibilityLabelModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("accessibilityLabel") { view, params, _ in
+            AnyView(view.accessibilityLabel(Text(params.string("label") ?? "")))
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AccessibilityRemoveTraits.swift

@@ -0,0 +1,14 @@
+import SwiftUI
+
+/// SwiftUI `.accessibilityRemoveTraits(_:)`. Removes one or more traits.
+/// `traits` is a single name or an array combined into one
+/// `AccessibilityTraits` (see `RNWAccessibilityTraitsParser`).
+enum RNWAccessibilityRemoveTraitsModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("accessibilityRemoveTraits") { view, params, _ in
+            let traits = RNWAccessibilityTraitsParser.parse(params["traits"])
+            return AnyView(view.accessibilityRemoveTraits(traits))
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AccessibilityValue.swift

@@ -0,0 +1,12 @@
+import SwiftUI
+
+/// SwiftUI `.accessibilityValue(_:)`. Sets the spoken value of the view
+/// (e.g. a control's current reading) for assistive technologies.
+enum RNWAccessibilityValueModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("accessibilityValue") { view, params, _ in
+            AnyView(view.accessibilityValue(Text(params.string("value") ?? "")))
+        }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/Alert.swift

@@ -0,0 +1,81 @@
+import SwiftUI
+
+/// SwiftUI `.alert(_:isPresented:actions:message:)`. Presents an alert
+/// titled `title` when `isPresented` is true; the `actions` slot supplies
+/// the buttons and the optional `message` slot the descriptive body.
+/// This alert API is available on watchOS 9.0+ (the deployment target).
+///
+/// The presentation flag is bound bidirectionally with the same optimistic
+/// pattern as `ToggleView`: a local `@State` mirror flips instantly when an
+/// action button or the system dismisses the alert and fires the handler
+/// with the new value, then converges to the next JS snapshot via
+/// `.onChange(of:)`.
+enum RNWAlertModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("alert") { view, params, ctx in
+            let actions = ctx.content(params.string("actions"))
+            let message = ctx.content(params.string("message"))
+            return AnyView(view.modifier(RNWAlertViewModifier(
+                title: params.string("title") ?? "",
+                remotePresented: params.bool("isPresented") ?? false,
+                handlerId: params.int("handler"),
+                bus: ctx.bus,
+                actionsBody: actions,
+                messageBody: message
+            )))
+        }
+    }
+}
+
+private struct RNWAlertViewModifier: ViewModifier {
+    let title: String
+    let remotePresented: Bool
+    let handlerId: Int?
+    let bus: RNWEventBus
+    let actionsBody: AnyView?
+    let messageBody: AnyView?
+
+    @State private var localPresented: Bool
+
+    init(
+        title: String,
+        remotePresented: Bool,
+        handlerId: Int?,
+        bus: RNWEventBus,
+        actionsBody: AnyView?,
+        messageBody: AnyView?
+    ) {
+        self.title = title
+        self.remotePresented = remotePresented
+        self.handlerId = handlerId
+        self.bus = bus
+        self.actionsBody = actionsBody
+        self.messageBody = messageBody
+        _localPresented = State(initialValue: remotePresented)
+    }
+
+    func body(content: Content) -> some View {
+        let binding = Binding<Bool>(
+            get: { localPresented },
+            set: { newValue in
+                localPresented = newValue
+                if let handlerId {
+                    bus.fire(handlerId, payload: newValue)
+                }
+            }
+        )
+
+        return content
+            .alert(title, isPresented: binding) {
+                actionsBody ?? AnyView(EmptyView())
+            } message: {
+                messageBody ?? AnyView(EmptyView())
+            }
+            .onChange(of: remotePresented) { newRemote in
+                if newRemote != localPresented {
+                    localPresented = newRemote
+                }
+            }
+    }
+}

package/apple/Sources/ReactNativeWatchOS/Modifiers/AlignmentGuide.swift

@@ -0,0 +1,53 @@
+import SwiftUI
+
+/// SwiftUI `.alignmentGuide(_:computeValue:)`.
+///
+/// LIMITED: the real API takes an arbitrary `(ViewDimensions) -> CGFloat`
+/// closure, which can't cross the JS bridge. This implements a simplified
+/// form: a named `guide` plus a numeric `offset`, where `computeValue`
+/// returns the guide's default value (`dimension[guide]`) plus the offset.
+/// Custom guides and dimension-relative math are not expressible here.
+enum RNWAlignmentGuideModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("alignmentGuide") { view, params, _ in
+            let offset = params.cgFloat("offset") ?? 0
+            switch params.string("guide") {
+            case "leading":
+                return AnyView(view.alignmentGuide(.leading) {
+                    $0[.leading] + offset
+                })
+            case "trailing":
+                return AnyView(view.alignmentGuide(.trailing) {
+                    $0[.trailing] + offset
+                })
+            case "centerHorizontal":
+                return AnyView(view.alignmentGuide(HorizontalAlignment.center) {
+                    $0[HorizontalAlignment.center] + offset
+                })
+            case "top":
+                return AnyView(view.alignmentGuide(.top) {
+                    $0[.top] + offset
+                })
+            case "bottom":
+                return AnyView(view.alignmentGuide(.bottom) {
+                    $0[.bottom] + offset
+                })
+            case "centerVertical":
+                return AnyView(view.alignmentGuide(VerticalAlignment.center) {
+                    $0[VerticalAlignment.center] + offset
+                })
+            case "firstTextBaseline":
+                return AnyView(view.alignmentGuide(.firstTextBaseline) {
+                    $0[.firstTextBaseline] + offset
+                })
+            case "lastTextBaseline":
+                return AnyView(view.alignmentGuide(.lastTextBaseline) {
+                    $0[.lastTextBaseline] + offset
+                })
+            default:
+                return view
+            }
+        }
+    }
+}