@appsent-co/react-native-watchos 0.1.0

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

@@ -0,0 +1,13 @@
+import SwiftUI
+
+/// SwiftUI `.allowsHitTesting(_:)`. When `false`, taps/gestures pass through
+/// to whatever is behind the view. Defaults to `true` when the param is
+/// missing or malformed.
+enum RNWAllowsHitTestingModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("allowsHitTesting") { view, params, _ in
+            AnyView(view.allowsHitTesting(params.bool("value") ?? true))
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+import SwiftUI
+
+/// SwiftUI `.allowsTightening(_:)`. Lets the view compress inter-character
+/// spacing to fit text before truncating. Registered in the generic
+/// registry. Defaults to `true` when the value is absent.
+enum RNWAllowsTighteningModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("allowsTightening") { view, params, _ in
+            AnyView(view.allowsTightening(params.bool("value") ?? true))
+        }
+    }
+}

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

@@ -0,0 +1,63 @@
+import SwiftUI
+
+/// SwiftUI `.animation(_:value:)`. The animation curve replays whenever
+/// `value` changes between renders — JS passes a stable hashable key
+/// (number / string / bool) and bumps it when an animation should fire.
+///
+/// `type` selects the curve; `duration` overrides the default duration
+/// for curves that accept one. `type: "none"` passes `nil` to disable
+/// animation for this segment (matches SwiftUI's nil-animation semantics).
+enum RNWAnimationModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("animation") { view, params, _ in
+            let type = params.string("type") ?? "default"
+            let duration = params.double("duration")
+            let valueKey = AnimationValueKey(raw: params["value"])
+            let animation = makeAnimation(type: type, duration: duration)
+            return AnyView(view.animation(animation, value: valueKey))
+        }
+    }
+
+    private static func makeAnimation(
+        type: String, duration: Double?
+    ) -> Animation? {
+        switch type {
+        case "none":
+            return nil
+        case "easeIn":
+            return duration.map { .easeIn(duration: $0) } ?? .easeIn
+        case "easeOut":
+            return duration.map { .easeOut(duration: $0) } ?? .easeOut
+        case "easeInOut":
+            return duration.map { .easeInOut(duration: $0) } ?? .easeInOut
+        case "linear":
+            return duration.map { .linear(duration: $0) } ?? .linear
+        case "spring":
+            return .spring()
+        default:
+            return .default
+        }
+    }
+}
+
+/// Stable Hashable wrapping any JS-side `value`. SwiftUI compares this
+/// across renders to decide whether to fire the animation. We coerce
+/// the raw bridged value into a single string — exact bool/int parity
+/// doesn't matter, only that the same input always hashes the same way.
+private struct AnimationValueKey: Hashable {
+    let key: String
+
+    init(raw: Any?) {
+        switch raw {
+        case .none:
+            key = ""
+        case let s as String:
+            key = "s:" + s
+        case let n as NSNumber:
+            key = "n:" + n.stringValue
+        case let other?:
+            key = "x:" + String(describing: other)
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+import SwiftUI
+
+/// SwiftUI `.antialiased(_:)` — Image-only. Turns on edge smoothing
+/// when the image is drawn rotated, scaled, or otherwise off-grid.
+enum RNWAntialiasedModifier {
+    @MainActor
+    static func register(into r: RNWImageModifierRegistry) {
+        r.register("antialiased") { image, params in
+            image.antialiased(params.bool("value") ?? true)
+        }
+    }
+}

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

@@ -0,0 +1,21 @@
+import SwiftUI
+
+/// SwiftUI `.aspectRatio(_:contentMode:)`. Generic — works on Image,
+/// containers, anything with intrinsic or stretchable dimensions.
+enum RNWAspectRatioModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("aspectRatio") { view, params, _ in
+            let mode = parseContentMode(params.string("contentMode"))
+            if let ratio = params.double("ratio") {
+                return AnyView(view.aspectRatio(ratio, contentMode: mode))
+            }
+            // No ratio → use the source's intrinsic ratio.
+            return AnyView(view.aspectRatio(contentMode: mode))
+        }
+    }
+
+    private static func parseContentMode(_ s: String?) -> ContentMode {
+        s == "fill" ? .fill : .fit
+    }
+}

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

@@ -0,0 +1,14 @@
+import SwiftUI
+
+/// SwiftUI `.autocorrectionDisabled(_:)`. Disables (or re-enables)
+/// autocorrection for text entry. The `value` param defaults to `true`
+/// (i.e. disabled) when absent, matching SwiftUI's no-arg overload.
+enum RNWAutocorrectionDisabledModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("autocorrectionDisabled") { view, params, _ in
+            let value = params.bool("value") ?? true
+            return AnyView(view.autocorrectionDisabled(value))
+        }
+    }
+}

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

@@ -0,0 +1,26 @@
+import SwiftUI
+
+/// SwiftUI `.background(...)`. Two forms, picked by which param is present:
+///   - `content` slot → `.background(alignment:content:)` with arbitrary
+///     modifier-content view(s) drawn behind the view (resolved via
+///     `ctx.content`).
+///   - `color` string → `.background(_:)` with a flat color, resolved by
+///     `RNWColorParser` so named SwiftUI colors (`primary`, `accent`) adapt
+///     to dark mode automatically.
+/// Returns the view unchanged when neither resolves.
+enum RNWBackgroundModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("background") { view, params, ctx in
+            if let body = ctx.content(params.string("content")) {
+                let alignment = RNWAlignmentParser.alignment(params.string("alignment"))
+                return AnyView(view.background(alignment: alignment) { body })
+            }
+            guard let colorString = params.string("color"),
+                  let color = RNWColorParser.parse(colorString) else {
+                return view
+            }
+            return AnyView(view.background(color))
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+import SwiftUI
+
+/// SwiftUI `.backgroundExtensionEffect()` — watchOS 26 "Liquid Glass".
+/// Extends the view's content beneath adjacent Liquid Glass surfaces
+/// (mirrored/blurred) so the glass samples the underlying color. Takes no
+/// parameters.
+///
+/// Gated to watchOS 26+ — returns the view unchanged on older OS.
+enum RNWBackgroundExtensionEffectModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("backgroundExtensionEffect") { view, _, _ in
+            guard #available(watchOS 26.0, *) else { return view }
+            return AnyView(view.backgroundExtensionEffect())
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+import SwiftUI
+
+/// SwiftUI `.backgroundStyle(_:)` (watchOS 9+). Sets the default style for
+/// the backgrounds of views within this view. Resolves the `style` string
+/// through the shared `RNWShapeStyleParser`; leaves the view unchanged when
+/// unrecognized.
+enum RNWBackgroundStyleModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("backgroundStyle") { view, params, _ in
+            guard let style = RNWShapeStyleParser.parse(params.string("style")) else {
+                return view
+            }
+            return AnyView(view.backgroundStyle(style))
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+import SwiftUI
+
+/// SwiftUI `.baselineOffset(_:)`. Shifts text vertically relative to its
+/// baseline, in points (positive raises, negative lowers). Registered in
+/// the generic registry. Defaults to `0` when absent.
+enum RNWBaselineOffsetModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("baselineOffset") { view, params, _ in
+            AnyView(view.baselineOffset(params.cgFloat("value") ?? 0))
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+import SwiftUI
+
+/// SwiftUI `.blendMode(_:)`. Maps the JS `mode` string to a SwiftUI
+/// `BlendMode`. Unknown / missing values fall back to `.normal`.
+enum RNWBlendModeModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("blendMode") { view, params, _ in
+            AnyView(view.blendMode(parse(params.string("mode"))))
+        }
+    }
+
+    private static func parse(_ s: String?) -> BlendMode {
+        switch s {
+        case "multiply":    return .multiply
+        case "screen":      return .screen
+        case "overlay":     return .overlay
+        case "darken":      return .darken
+        case "lighten":     return .lighten
+        case "colorDodge":  return .colorDodge
+        case "colorBurn":   return .colorBurn
+        case "softLight":   return .softLight
+        case "hardLight":   return .hardLight
+        case "difference":  return .difference
+        case "exclusion":   return .exclusion
+        case "hue":         return .hue
+        case "saturation":  return .saturation
+        case "color":       return .color
+        case "luminosity":  return .luminosity
+        case "plusDarker":  return .plusDarker
+        case "plusLighter": return .plusLighter
+        default:            return .normal
+        }
+    }
+}

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

@@ -0,0 +1,14 @@
+import SwiftUI
+
+/// SwiftUI `.blur(radius:opaque:)`. Applies a Gaussian blur to the view.
+enum RNWBlurModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("blur") { view, params, _ in
+            AnyView(view.blur(
+                radius: params.cgFloat("radius") ?? 0,
+                opaque: params.bool("opaque") ?? false
+            ))
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+import SwiftUI
+
+/// SwiftUI `.bold(_:)`. Applies a bold font weight to text within the
+/// view. Defaults to active when `value` is omitted.
+enum RNWBoldModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("bold") { view, params, _ in
+            AnyView(view.bold(params.bool("value") ?? true))
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+import SwiftUI
+
+/// SwiftUI `.border(_:width:)`. Draws a border of `color` (resolved by
+/// `RNWColorParser`) and `width` (default `1`) around the view's edges.
+/// Leaves the view unchanged when the color string is unrecognized.
+enum RNWBorderModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("border") { view, params, _ in
+            guard let colorString = params.string("color"),
+                  let color = RNWColorParser.parse(colorString) else {
+                return view
+            }
+            let width = params.cgFloat("width") ?? 1
+            return AnyView(view.border(color, width: width))
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+import SwiftUI
+
+/// SwiftUI `.brightness(_:)`. Adds `value` to each color component;
+/// `0` leaves the view unchanged.
+enum RNWBrightnessModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("brightness") { view, params, _ in
+            AnyView(view.brightness(params.double("value") ?? 0))
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+import SwiftUI
+
+/// SwiftUI `.buttonBorderShape(_:)`. Sets the shape a button uses to draw its
+/// border (most visible with `.bordered`-family button styles).
+///
+/// `.capsule` / `.roundedRectangle` are available from watchOS 8; `.circle`
+/// requires watchOS 10, so it falls back to `.automatic` on older systems.
+enum RNWButtonBorderShapeModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("buttonBorderShape") { view, params, _ in
+            switch params.string("shape") {
+            case "capsule":
+                return AnyView(view.buttonBorderShape(.capsule))
+            case "roundedRectangle":
+                return AnyView(view.buttonBorderShape(.roundedRectangle))
+            case "circle":
+                if #available(watchOS 10.0, *) {
+                    return AnyView(view.buttonBorderShape(.circle))
+                }
+                return AnyView(view.buttonBorderShape(.automatic))
+            default:
+                return AnyView(view.buttonBorderShape(.automatic))
+            }
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+import SwiftUI
+
+/// SwiftUI `.buttonRepeatBehavior(_:)`. Controls whether descendant buttons
+/// fire their action repeatedly while held down.
+///
+/// Requires watchOS 10; on earlier systems the view is returned unchanged.
+enum RNWButtonRepeatBehaviorModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("buttonRepeatBehavior") { view, params, _ in
+            guard #available(watchOS 10.0, *) else { return view }
+            switch params.string("behavior") {
+            case "enabled":  return AnyView(view.buttonRepeatBehavior(.enabled))
+            case "disabled": return AnyView(view.buttonRepeatBehavior(.disabled))
+            default:         return AnyView(view.buttonRepeatBehavior(.automatic))
+            }
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+import SwiftUI
+
+/// SwiftUI `.buttonSizing(_:)` — controls whether a button hugs its title
+/// (`.fitted`) or expands to fill available width (`.flexible`).
+///
+/// LIMITATION: `.buttonSizing(_:)` (and the `ButtonSizing` type) is only
+/// available on watchOS 26+ SDKs, newer than this package's build floor
+/// (watchOS 9). Referencing the symbol — even behind `#available` — would fail
+/// to compile on the supported build SDKs, so this is a documented no-op: the
+/// view is returned unchanged. There is no stable equivalent on watchOS 9.
+/// Registering the `$type` keeps dispatch consistent and lets the no-op be
+/// swapped for a real implementation once the SDK floor is raised.
+enum RNWButtonSizingModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("buttonSizing") { view, _, _ in view }
+    }
+}

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

@@ -0,0 +1,23 @@
+import SwiftUI
+
+/// SwiftUI `.buttonStyle(_:)`. Maps the `style` string to a primitive
+/// button style. Unknown values fall back to `.automatic`.
+enum RNWButtonStyleModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("buttonStyle") { view, params, _ in
+            switch params.string("style") {
+            case "bordered":
+                return AnyView(view.buttonStyle(.bordered))
+            case "borderedProminent":
+                return AnyView(view.buttonStyle(.borderedProminent))
+            case "borderless":
+                return AnyView(view.buttonStyle(.borderless))
+            case "plain":
+                return AnyView(view.buttonStyle(.plain))
+            default:
+                return AnyView(view.buttonStyle(.automatic))
+            }
+        }
+    }
+}

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

@@ -0,0 +1,26 @@
+import SwiftUI
+
+/// SwiftUI `.clipShape(_:)`. Clips the view to one of a fixed set of shapes.
+/// `roundedRectangle` reads `cornerRadius` (default `0`). Each branch calls
+/// `.clipShape` with the concrete shape type, avoiding `AnyShape` so the
+/// minimum deployment target stays unconstrained.
+enum RNWClipShapeModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("clipShape") { view, params, _ in
+            switch params.string("shape") {
+            case "circle":
+                return AnyView(view.clipShape(Circle()))
+            case "capsule":
+                return AnyView(view.clipShape(Capsule()))
+            case "ellipse":
+                return AnyView(view.clipShape(Ellipse()))
+            case "roundedRectangle":
+                let radius = params.cgFloat("cornerRadius") ?? 0
+                return AnyView(view.clipShape(RoundedRectangle(cornerRadius: radius)))
+            default:
+                return AnyView(view.clipShape(Rectangle()))
+            }
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+import SwiftUI
+
+/// SwiftUI `.clipped()`. Clips the view to its bounding frame.
+enum RNWClippedModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("clipped") { view, _, _ in
+            AnyView(view.clipped())
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+import SwiftUI
+
+/// SwiftUI `.colorInvert()`. Inverts every color in the view.
+enum RNWColorInvertModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("colorInvert") { view, _, _ in
+            AnyView(view.colorInvert())
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+import SwiftUI
+
+/// SwiftUI `.colorMultiply(_:)`. Multiplies the view's colors by the
+/// parsed color. Falls through unchanged when the color string is
+/// missing or unrecognized.
+enum RNWColorMultiplyModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("colorMultiply") { view, params, _ in
+            guard let colorString = params.string("color"),
+                  let color = RNWColorParser.parse(colorString) else {
+                return view
+            }
+            return AnyView(view.colorMultiply(color))
+        }
+    }
+}

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

@@ -0,0 +1,21 @@
+import SwiftUI
+
+/// SwiftUI `.colorScheme(_:)`. Forces the subtree to render in the given
+/// `ColorScheme`, overriding the inherited system appearance.
+enum RNWColorSchemeModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("colorScheme") { view, params, _ in
+            guard let scheme = parse(params.string("value")) else { return view }
+            return AnyView(view.colorScheme(scheme))
+        }
+    }
+
+    static func parse(_ s: String?) -> ColorScheme? {
+        switch s {
+        case "light": return .light
+        case "dark":  return .dark
+        default:      return nil
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+import SwiftUI
+
+/// SwiftUI `.compositingGroup()`. Composites descendants as one layer
+/// before effects (opacity, blend modes) apply.
+enum RNWCompositingGroupModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("compositingGroup") { view, _, _ in
+            AnyView(view.compositingGroup())
+        }
+    }
+}

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

@@ -0,0 +1,91 @@
+import SwiftUI
+
+/// SwiftUI `.confirmationDialog(_:isPresented:titleVisibility:actions:message:)`.
+/// Presents an action-sheet-style dialog titled `title` when `isPresented`
+/// is true; the `actions` slot supplies the buttons and the optional
+/// `message` slot the descriptive body. `titleVisibility` is parsed via the
+/// shared `RNWVisibilityParser` (automatic/visible/hidden). 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 dialog and fires the handler
+/// with the new value, then converges to the next JS snapshot via
+/// `.onChange(of:)`.
+enum RNWConfirmationDialogModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("confirmationDialog") { view, params, ctx in
+            let actions = ctx.content(params.string("actions"))
+            let message = ctx.content(params.string("message"))
+            return AnyView(view.modifier(RNWConfirmationDialogViewModifier(
+                title: params.string("title") ?? "",
+                remotePresented: params.bool("isPresented") ?? false,
+                titleVisibility: RNWVisibilityParser.parse(params.string("titleVisibility")),
+                handlerId: params.int("handler"),
+                bus: ctx.bus,
+                actionsBody: actions,
+                messageBody: message
+            )))
+        }
+    }
+}
+
+private struct RNWConfirmationDialogViewModifier: ViewModifier {
+    let title: String
+    let remotePresented: Bool
+    let titleVisibility: Visibility
+    let handlerId: Int?
+    let bus: RNWEventBus
+    let actionsBody: AnyView?
+    let messageBody: AnyView?
+
+    @State private var localPresented: Bool
+
+    init(
+        title: String,
+        remotePresented: Bool,
+        titleVisibility: Visibility,
+        handlerId: Int?,
+        bus: RNWEventBus,
+        actionsBody: AnyView?,
+        messageBody: AnyView?
+    ) {
+        self.title = title
+        self.remotePresented = remotePresented
+        self.titleVisibility = titleVisibility
+        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
+            .confirmationDialog(
+                title,
+                isPresented: binding,
+                titleVisibility: titleVisibility
+            ) {
+                actionsBody ?? AnyView(EmptyView())
+            } message: {
+                messageBody ?? AnyView(EmptyView())
+            }
+            .onChange(of: remotePresented) { newRemote in
+                if newRemote != localPresented {
+                    localPresented = newRemote
+                }
+            }
+    }
+}

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

@@ -0,0 +1,34 @@
+import SwiftUI
+
+/// SwiftUI `.containerBackground(_:for:)` / `.containerBackground(for:){…}`.
+/// Sets the background of an enclosing container (navigation stack by
+/// default). When a `content` slot is supplied it is used as the background
+/// view; otherwise the `style` string is resolved via `RNWShapeStyleParser`.
+/// Requires watchOS 10+; on watchOS 9 the view is returned unchanged.
+enum RNWContainerBackgroundModifier {
+    @MainActor
+    static func register(into r: RNWModifierRegistry) {
+        r.register("containerBackground") { view, params, ctx in
+            guard #available(watchOS 10.0, *) else { return view }
+            let placement = parsePlacement(params.string("container"))
+
+            // A `content` view slot takes precedence over a shape `style`.
+            if let body = ctx.content(params.string("content")) {
+                return AnyView(view.containerBackground(for: placement) { body })
+            }
+            if let style = RNWShapeStyleParser.parse(params.string("style")) {
+                return AnyView(view.containerBackground(style, for: placement))
+            }
+            return view
+        }
+    }
+
+    @available(watchOS 10.0, *)
+    private static func parsePlacement(_ s: String?) -> ContainerBackgroundPlacement {
+        switch s {
+        case "tabView": return .tabView
+        // `.widget` is WidgetKit-only (not in the watchOS SwiftUI SDK).
+        default:        return .navigation
+        }
+    }
+}