@appsent-co/react-native-watchos 0.1.0

package/src/components/AngularGradient.tsx

@@ -0,0 +1,15 @@
+import { createNativeView } from '../createNativeView';
+import type { UnitPoint } from './LinearGradient';
+
+interface AngularGradientBaseProps {
+  colors: string[];
+  center: UnitPoint;
+}
+
+/// Either a single `angle` (full-circle sweep ending at that angle) or
+/// a `startAngle` + `endAngle` pair (partial sweep). Both in degrees.
+export type AngularGradientProps = AngularGradientBaseProps &
+  ({ angle: number } | { startAngle: number; endAngle: number });
+
+export const AngularGradient =
+  createNativeView<AngularGradientProps>('AngularGradient');

package/src/components/AsyncImage.tsx

@@ -0,0 +1,82 @@
+import { createElement, type FC, type ReactNode } from 'react';
+
+import type { CommonProps } from '../types';
+import { useModifiers } from '../useModifiers';
+
+export interface AsyncImageProps {
+  /// Absolute URL of the image to load. Invalid URLs render nothing.
+  url: string;
+  /// Pixel scale of the image (defaults to `1`). Use `2` / `3` if the
+  /// remote asset is intended for @2x / @3x displays.
+  scale?: number;
+}
+
+interface PhaseSlotProps extends CommonProps {
+  children?: ReactNode;
+}
+
+/// Sentinel child of `<AsyncImage>` — contents render during the
+/// `.empty` phase (request in flight, no image yet). Maps to the
+/// equivalent branch of SwiftUI's `AsyncImagePhase`.
+const Empty: FC<PhaseSlotProps> = (props) =>
+  createElement('AsyncImagePhaseEmpty', props);
+Empty.displayName = 'AsyncImage.Empty';
+
+/// Sentinel child of `<AsyncImage>` — contents render during the
+/// `.success(image)` phase. Place an `<AsyncImage.Image />` inside to
+/// position the loaded image; surrounding views (text, overlays) render
+/// alongside it.
+const Success: FC<PhaseSlotProps> = (props) =>
+  createElement('AsyncImagePhaseSuccess', props);
+Success.displayName = 'AsyncImage.Success';
+
+/// Sentinel child of `<AsyncImage>` — contents render during the
+/// `.failure(error)` phase. The error itself is not exposed to JS in v1;
+/// use this slot for a static fallback (icon, retry hint, …).
+const Failure: FC<PhaseSlotProps> = (props) =>
+  createElement('AsyncImagePhaseFailure', props);
+Failure.displayName = 'AsyncImage.Failure';
+
+/// Placeholder for the loaded SwiftUI `Image` value, valid only inside
+/// `<AsyncImage.Success>`. Image-only modifiers (`resizable()`,
+/// `aspectRatio({ contentMode })`, …) apply here so they preserve the
+/// `Image → Image` chain, the way SwiftUI's `{ image in image.resizable() }`
+/// closure does. Generic modifiers (`frame`, `padding`, …) should usually
+/// go on the parent `<AsyncImage>` so they also size the empty/failure
+/// states.
+const LoadedImage: FC<CommonProps> = (props) =>
+  createElement('AsyncImageImage', props);
+LoadedImage.displayName = 'AsyncImage.Image';
+
+const AsyncImageFn: FC<AsyncImageProps & CommonProps & { children?: ReactNode }> = (
+  props
+) => {
+  const { modifiers, children } = useModifiers(props.modifiers, props.children);
+  return createElement('AsyncImage', { ...props, modifiers, children });
+};
+AsyncImageFn.displayName = 'AsyncImage';
+
+/// SwiftUI `AsyncImage`. With no children, behaves like the bare
+/// `AsyncImage(url:scale:)` initializer (intrinsic size, system spinner
+/// + broken-image glyph). Provide `<AsyncImage.Empty>`,
+/// `<AsyncImage.Success>` and/or `<AsyncImage.Failure>` slots to take
+/// the per-phase closure form. Inside `Success`, mark where the loaded
+/// image goes with `<AsyncImage.Image />`.
+///
+/// ```tsx
+/// <AsyncImage url={url} modifiers={[frame({ width: 40, height: 40 })]}>
+///   <AsyncImage.Empty><ProgressView /></AsyncImage.Empty>
+///   <AsyncImage.Success>
+///     <AsyncImage.Image
+///       modifiers={[resizable(), aspectRatio({ contentMode: 'fit' })]}
+///     />
+///   </AsyncImage.Success>
+///   <AsyncImage.Failure><Image systemName="photo" /></AsyncImage.Failure>
+/// </AsyncImage>
+/// ```
+export const AsyncImage = Object.assign(AsyncImageFn, {
+  Empty,
+  Success,
+  Failure,
+  Image: LoadedImage,
+});

package/src/components/Button.tsx

@@ -0,0 +1,25 @@
+import { createElement } from 'react';
+
+import type { CommonProps } from '../types';
+import { useEventHandler } from '../useEventHandler';
+import { useModifiers } from '../useModifiers';
+
+export interface ButtonProps extends CommonProps {
+  /// Fires on tap. Children become the label of the SwiftUI button.
+  onPress?: () => void;
+}
+
+/// SwiftUI `Button`. Children become the label content (typically a
+/// `<Text>` but any view works — Image + Text for an icon-with-caption,
+/// HStack of multiple children, etc.).
+export function Button(props: ButtonProps) {
+  const { onPress, ...rest } = props;
+  const onPressId = useEventHandler<void>(onPress);
+  const { modifiers, children } = useModifiers(rest.modifiers, rest.children);
+  return createElement('Button', {
+    ...rest,
+    onPress: onPressId,
+    modifiers,
+    children,
+  });
+}

package/src/components/Capsule.tsx

@@ -0,0 +1,3 @@
+import { createNativeView } from '../createNativeView';
+
+export const Capsule = createNativeView<object>('Capsule');

package/src/components/Circle.tsx

@@ -0,0 +1,3 @@
+import { createNativeView } from '../createNativeView';
+
+export const Circle = createNativeView<object>('Circle');

package/src/components/Color.tsx

@@ -0,0 +1,57 @@
+import { createElement, type FC } from 'react';
+
+import type { CommonProps } from '../types';
+import { useModifiers } from '../useModifiers';
+
+export interface ColorProps {
+  /// Named SwiftUI color (`'red'`, `'primary'`, …) or hex string
+  /// (`'#ff0044'` / `'#ff0044aa'`). Takes precedence over RGB props.
+  name?: string;
+  /// sRGB red component, 0..1. Used when `name` is unset.
+  red?: number;
+  /// sRGB green component, 0..1. Used when `name` is unset.
+  green?: number;
+  /// sRGB blue component, 0..1. Used when `name` is unset.
+  blue?: number;
+  /// Multiplies the resolved color's alpha. Defaults to 1.
+  opacity?: number;
+}
+
+const ColorFn: FC<ColorProps & CommonProps> = (props) => {
+  const { modifiers, children } = useModifiers(props.modifiers, props.children);
+  return createElement('Color', { ...props, modifiers, children });
+};
+ColorFn.displayName = 'Color';
+
+const named = (name: string): FC<CommonProps> => {
+  const C: FC<CommonProps> = (props) =>
+    createElement('Color', { ...props, name });
+  C.displayName = `Color.${name}`;
+  return C;
+};
+
+/// SwiftUI `Color` as a `View` — fills its frame with the resolved color.
+/// Use the namespaced helpers (`Color.red`, `Color.primary`, …) for
+/// stock colors, or pass `name` / `red`+`green`+`blue` to the bare
+/// component for custom values.
+export const Color = Object.assign(ColorFn, {
+  red: named('red'),
+  blue: named('blue'),
+  green: named('green'),
+  yellow: named('yellow'),
+  orange: named('orange'),
+  purple: named('purple'),
+  pink: named('pink'),
+  white: named('white'),
+  black: named('black'),
+  gray: named('gray'),
+  brown: named('brown'),
+  mint: named('mint'),
+  cyan: named('cyan'),
+  indigo: named('indigo'),
+  teal: named('teal'),
+  primary: named('primary'),
+  secondary: named('secondary'),
+  accent: named('accent'),
+  clear: named('clear'),
+});

package/src/components/ContentUnavailableView.tsx

@@ -0,0 +1,47 @@
+import { createElement, type FC, type ReactNode } from 'react';
+
+import type { CommonProps } from '../types';
+import { useModifiers } from '../useModifiers';
+
+export interface ContentUnavailableViewProps {
+  variant?: 'default' | 'search';
+  searchText?: string;
+}
+
+interface SlotProps extends CommonProps {
+  children?: ReactNode;
+}
+
+/// Sentinel child — routes into SwiftUI's `label:` slot.
+const Label: FC<SlotProps> = (props) =>
+  createElement('ContentUnavailableLabel', props);
+Label.displayName = 'ContentUnavailableView.Label';
+
+/// Sentinel child — routes into SwiftUI's `description:` slot.
+const Description: FC<SlotProps> = (props) =>
+  createElement('ContentUnavailableDescription', props);
+Description.displayName = 'ContentUnavailableView.Description';
+
+/// Sentinel child — routes into SwiftUI's `actions:` slot.
+const Actions: FC<SlotProps> = (props) =>
+  createElement('ContentUnavailableActions', props);
+Actions.displayName = 'ContentUnavailableView.Actions';
+
+const ContentUnavailableViewFn: FC<ContentUnavailableViewProps & CommonProps> = (
+  props
+) => {
+  const { modifiers, children } = useModifiers(props.modifiers, props.children);
+  return createElement('ContentUnavailableView', { ...props, modifiers, children });
+};
+ContentUnavailableViewFn.displayName = 'ContentUnavailableView';
+
+/// SwiftUI `ContentUnavailableView` (watchOS 10+). Default form takes
+/// `<ContentUnavailableView.Label>` / `.Description` / `.Actions` as
+/// children. Pass `variant="search"` (with optional `searchText`) to use
+/// the system-provided empty-search-results preset; children are ignored
+/// in that mode.
+export const ContentUnavailableView = Object.assign(ContentUnavailableViewFn, {
+  Label,
+  Description,
+  Actions,
+});

package/src/components/DatePicker.tsx

@@ -0,0 +1,40 @@
+import { createElement } from 'react';
+
+import type { CommonProps } from '../types';
+import { useEventHandler } from '../useEventHandler';
+import { useModifiers } from '../useModifiers';
+
+/// Which calendar fields the picker exposes. Defaults to `'dateAndTime'`.
+export type DatePickerComponents = 'date' | 'hourAndMinute' | 'dateAndTime';
+
+export interface DatePickerProps extends CommonProps {
+  /// Visible label.
+  label: string;
+  /// Current selection as an ISO-8601 string. Controlled — JS owns the
+  /// truth; the native side mirrors it locally for instant feedback.
+  selection: string;
+  /// Which calendar fields to show. Defaults to `'dateAndTime'`.
+  displayedComponents?: DatePickerComponents;
+  /// Optional inclusive lower bound (ISO-8601). Only enforced when both
+  /// `minimum` and `maximum` are supplied.
+  minimum?: string;
+  /// Optional inclusive upper bound (ISO-8601). Only enforced when both
+  /// `minimum` and `maximum` are supplied.
+  maximum?: string;
+  /// Fires when the user picks a new date, with the new ISO-8601 string.
+  onSelectionChange?: (iso: string) => void;
+}
+
+/// SwiftUI `DatePicker`. Dates cross the bridge as ISO-8601 strings
+/// because JSON has no native `Date` type.
+export function DatePicker(props: DatePickerProps) {
+  const { onSelectionChange, ...rest } = props;
+  const onSelectionChangeId = useEventHandler<string>(onSelectionChange);
+  const { modifiers, children } = useModifiers(rest.modifiers, rest.children);
+  return createElement('DatePicker', {
+    ...rest,
+    onSelectionChange: onSelectionChangeId,
+    modifiers,
+    children,
+  });
+}

package/src/components/Divider.tsx

@@ -0,0 +1,3 @@
+import { createNativeView } from '../createNativeView';
+
+export const Divider = createNativeView<Record<string, never>>('Divider');

package/src/components/Ellipse.tsx

@@ -0,0 +1,3 @@
+import { createNativeView } from '../createNativeView';
+
+export const Ellipse = createNativeView<object>('Ellipse');

package/src/components/EmptyView.tsx

@@ -0,0 +1,3 @@
+import { createNativeView } from '../createNativeView';
+
+export const EmptyView = createNativeView<object>('EmptyView');

package/src/components/Form.tsx

@@ -0,0 +1,8 @@
+import { createNativeView } from '../createNativeView';
+
+export interface FormProps {}
+
+/// SwiftUI `Form`. Container for settings/data-entry screens. Children
+/// render as grouped, scrolling rows — typically wrap them in `<Section>`
+/// with `<Toggle>` / `<Slider>` / text controls inside.
+export const Form = createNativeView<FormProps>('Form');

package/src/components/Gauge.tsx

@@ -0,0 +1,21 @@
+import { createNativeView } from '../createNativeView';
+
+export interface GaugeProps {
+  /// Current value. Values outside `minimum`...`maximum` are clamped by
+  /// SwiftUI.
+  value: number;
+  /// Lower bound of `value`. Defaults to 0.
+  minimum?: number;
+  /// Upper bound of `value`. Defaults to 1.
+  maximum?: number;
+  /// Caption rendered alongside the gauge.
+  label?: string;
+  /// Secondary caption for the current value (e.g. `"60%"`, `"120 bpm"`).
+  currentValueLabel?: string;
+}
+
+/// SwiftUI `Gauge` (watchOS 7+). Stateless display of a `value` within a
+/// numeric range. `label` and `currentValueLabel` are flat string props
+/// rather than children — watchOS gauges treat them as captions, not
+/// arbitrary content trees.
+export const Gauge = createNativeView<GaugeProps>('Gauge');

package/src/components/GeometryReader.tsx

@@ -0,0 +1,3 @@
+import { createNativeView } from '../createNativeView';
+
+export const GeometryReader = createNativeView<object>('GeometryReader');

package/src/components/Grid.tsx

@@ -0,0 +1,21 @@
+import { createNativeView } from '../createNativeView';
+
+export interface GridProps {
+  /// Alignment of each cell within its grid position. Defaults to `'center'`.
+  alignment?:
+    | 'leading'
+    | 'trailing'
+    | 'center'
+    | 'top'
+    | 'bottom'
+    | 'topLeading'
+    | 'topTrailing'
+    | 'bottomLeading'
+    | 'bottomTrailing';
+  /// Horizontal distance between columns. Defaults to the system spacing.
+  horizontalSpacing?: number;
+  /// Vertical distance between rows. Defaults to the system spacing.
+  verticalSpacing?: number;
+}
+
+export const Grid = createNativeView<GridProps>('Grid');

package/src/components/GridRow.tsx

@@ -0,0 +1,9 @@
+import { createNativeView } from '../createNativeView';
+
+export interface GridRowProps {
+  /// Vertical alignment of cells within this row. Defaults to the
+  /// surrounding `Grid`'s alignment.
+  alignment?: 'top' | 'center' | 'bottom' | 'firstTextBaseline' | 'lastTextBaseline';
+}
+
+export const GridRow = createNativeView<GridRowProps>('GridRow');

package/src/components/Group.tsx

@@ -0,0 +1,5 @@
+import { createNativeView } from '../createNativeView';
+
+export type GroupProps = object;
+
+export const Group = createNativeView<GroupProps>('Group');

package/src/components/HStack.tsx

@@ -0,0 +1,15 @@
+import { createNativeView } from '../createNativeView';
+
+export interface HStackProps {
+  /// Vertical alignment of children. Defaults to `'center'`.
+  alignment?:
+    | 'top'
+    | 'center'
+    | 'bottom'
+    | 'firstTextBaseline'
+    | 'lastTextBaseline';
+  /// Distance between children. Defaults to the system spacing.
+  spacing?: number;
+}
+
+export const HStack = createNativeView<HStackProps>('HStack');

package/src/components/Image.tsx

@@ -0,0 +1,10 @@
+import { createNativeView } from '../createNativeView';
+
+export interface ImageProps {
+  /// SF Symbol name (e.g. `'heart.fill'`, `'arrow.clockwise'`). The only
+  /// supported source for now — asset-catalog and remote images come
+  /// later.
+  systemName: string;
+}
+
+export const Image = createNativeView<ImageProps>('Image');

package/src/components/Label.tsx

@@ -0,0 +1,13 @@
+import { createNativeView } from '../createNativeView';
+
+export interface LabelProps {
+  /// Text shown next to the icon.
+  title: string;
+  /// SF Symbol name (e.g. `'star.fill'`, `'gearshape.fill'`). Mirrors
+  /// `Image`'s `systemName` — SF Symbols are the only icon source for now.
+  systemImage: string;
+}
+
+/// SwiftUI `Label`. Pairs a `title` with an SF Symbol icon — the canonical
+/// "icon + text" row used in lists, toolbars, and navigation links.
+export const Label = createNativeView<LabelProps>('Label');

package/src/components/LabeledContent.tsx

@@ -0,0 +1,39 @@
+import { createElement, type FC, type ReactNode } from 'react';
+
+import type { CommonProps } from '../types';
+import { useModifiers } from '../useModifiers';
+
+export interface LabeledContentProps {}
+
+interface LabeledContentLabelProps extends CommonProps {
+  children?: ReactNode;
+}
+
+interface LabeledContentContentProps extends CommonProps {
+  children?: ReactNode;
+}
+
+/// Sentinel child of `<LabeledContent>` — routes into SwiftUI's `label:` slot.
+const Label: FC<LabeledContentLabelProps> = (props) =>
+  createElement('LabeledContentLabel', props);
+Label.displayName = 'LabeledContent.Label';
+
+/// Sentinel child of `<LabeledContent>` — routes into SwiftUI's `content:` slot.
+const Content: FC<LabeledContentContentProps> = (props) =>
+  createElement('LabeledContentContent', props);
+Content.displayName = 'LabeledContent.Content';
+
+const LabeledContentFn: FC<LabeledContentProps & CommonProps> = (props) => {
+  const { modifiers, children } = useModifiers(props.modifiers, props.children);
+  return createElement('LabeledContent', { ...props, modifiers, children });
+};
+LabeledContentFn.displayName = 'LabeledContent';
+
+/// SwiftUI `LabeledContent`. Pairs a label with a content view — typically
+/// used as a form row. Nest a `<LabeledContent.Label>` and a
+/// `<LabeledContent.Content>` directly under it; bare children fall into
+/// the content slot.
+export const LabeledContent = Object.assign(LabeledContentFn, {
+  Label,
+  Content,
+});

package/src/components/LazyHGrid.tsx

@@ -0,0 +1,16 @@
+import { createNativeView } from '../createNativeView';
+import type { GridItem } from '../types/GridItem';
+
+export interface LazyHGridProps {
+  /// One `GridItem` per row. Number of entries = number of rows.
+  rows: GridItem[];
+  /// Vertical alignment of cells whose height is less than the row.
+  /// Defaults to `'center'`.
+  alignment?: 'top' | 'center' | 'bottom';
+  /// Horizontal distance between columns. Defaults to the system spacing.
+  spacing?: number;
+  /// Which `Section` children stay pinned while scrolling. Empty by default.
+  pinnedViews?: ('sectionHeaders' | 'sectionFooters')[];
+}
+
+export const LazyHGrid = createNativeView<LazyHGridProps>('LazyHGrid');

package/src/components/LazyHStack.tsx

@@ -0,0 +1,17 @@
+import { createNativeView } from '../createNativeView';
+
+export interface LazyHStackProps {
+  /// Vertical alignment of children. Defaults to `'center'`.
+  alignment?:
+    | 'top'
+    | 'center'
+    | 'bottom'
+    | 'firstTextBaseline'
+    | 'lastTextBaseline';
+  /// Distance between children. Defaults to the system spacing.
+  spacing?: number;
+  /// Which section subviews stay pinned while scrolling.
+  pinnedViews?: ('sectionHeaders' | 'sectionFooters')[];
+}
+
+export const LazyHStack = createNativeView<LazyHStackProps>('LazyHStack');

package/src/components/LazyVGrid.tsx

@@ -0,0 +1,16 @@
+import { createNativeView } from '../createNativeView';
+import type { GridItem } from '../types/GridItem';
+
+export interface LazyVGridProps {
+  /// One `GridItem` per column. Number of entries = number of columns.
+  columns: GridItem[];
+  /// Horizontal alignment of cells whose width is less than the column.
+  /// Defaults to `'center'`.
+  alignment?: 'leading' | 'center' | 'trailing';
+  /// Vertical distance between rows. Defaults to the system spacing.
+  spacing?: number;
+  /// Which `Section` children stay pinned while scrolling. Empty by default.
+  pinnedViews?: ('sectionHeaders' | 'sectionFooters')[];
+}
+
+export const LazyVGrid = createNativeView<LazyVGridProps>('LazyVGrid');

package/src/components/LazyVStack.tsx

@@ -0,0 +1,12 @@
+import { createNativeView } from '../createNativeView';
+
+export interface LazyVStackProps {
+  /// Horizontal alignment of children. Defaults to `'center'`.
+  alignment?: 'leading' | 'center' | 'trailing';
+  /// Distance between children. Defaults to the system spacing.
+  spacing?: number;
+  /// Which section subviews stay pinned while scrolling.
+  pinnedViews?: ('sectionHeaders' | 'sectionFooters')[];
+}
+
+export const LazyVStack = createNativeView<LazyVStackProps>('LazyVStack');

package/src/components/LinearGradient.tsx

@@ -0,0 +1,23 @@
+import { createNativeView } from '../createNativeView';
+
+export type UnitPointName =
+  | 'top'
+  | 'bottom'
+  | 'leading'
+  | 'trailing'
+  | 'center'
+  | 'topLeading'
+  | 'topTrailing'
+  | 'bottomLeading'
+  | 'bottomTrailing';
+
+export type UnitPoint = UnitPointName | { x: number; y: number };
+
+export interface LinearGradientProps {
+  colors: string[];
+  startPoint: UnitPoint;
+  endPoint: UnitPoint;
+}
+
+export const LinearGradient =
+  createNativeView<LinearGradientProps>('LinearGradient');

package/src/components/Link.tsx

@@ -0,0 +1,8 @@
+import { createNativeView } from '../createNativeView';
+
+export interface LinkProps {
+  destination: string;
+  title?: string;
+}
+
+export const Link = createNativeView<LinkProps>('Link');

package/src/components/List.tsx

@@ -0,0 +1,14 @@
+import { createNativeView } from '../createNativeView';
+
+export interface ListProps {
+  /// watchOS list style. Defaults to `'automatic'` (SwiftUI picks per
+  /// context, typically `carousel` on watchOS). Use `'plain'` when rows
+  /// need exact heights — `carousel` scales rows as they scroll, which
+  /// fights `frame({ height })` on individual rows.
+  style?: 'plain' | 'carousel' | 'elliptical' | 'automatic';
+}
+
+/// SwiftUI `List`. Children render as rows. Group rows by wrapping a
+/// subset in `<Section>` (optionally with `<Section.Header>` /
+/// `<Section.Footer>` for header and footer content).
+export const List = createNativeView<ListProps>('List');

package/src/components/NavigationLink.tsx

@@ -0,0 +1,48 @@
+import { createElement, type FC, type ReactNode } from 'react';
+
+import type { CommonProps } from '../types';
+import { useModifiers } from '../useModifiers';
+
+export interface NavigationLinkProps {}
+
+interface NavigationLinkLabelProps extends CommonProps {
+  children?: ReactNode;
+}
+
+interface NavigationLinkDestinationProps extends CommonProps {
+  children?: ReactNode;
+}
+
+/// Sentinel child of `<NavigationLink>`. Its contents form the
+/// always-visible tap target (the row, in a `<List>`). Outside a
+/// `NavigationLink` it falls back to rendering its children inline.
+const Label: FC<NavigationLinkLabelProps> = (props) =>
+  createElement('NavigationLinkLabel', props);
+Label.displayName = 'NavigationLink.Label';
+
+/// Sentinel child of `<NavigationLink>` — its contents become the screen
+/// pushed onto the navigation stack when the label is tapped.
+const Destination: FC<NavigationLinkDestinationProps> = (props) =>
+  createElement('NavigationLinkDestination', props);
+Destination.displayName = 'NavigationLink.Destination';
+
+const NavigationLinkFn: FC<NavigationLinkProps & CommonProps> = (props) => {
+  const { modifiers, children } = useModifiers(props.modifiers, props.children);
+  return createElement('NavigationLink', { ...props, modifiers, children });
+};
+NavigationLinkFn.displayName = 'NavigationLink';
+
+/// SwiftUI `NavigationLink`. Place inside a `<NavigationStack>`. Nest a
+/// single `<NavigationLink.Label>` (the visible row) and a single
+/// `<NavigationLink.Destination>` (the pushed screen).
+///
+/// ```tsx
+/// <NavigationLink>
+///   <NavigationLink.Label><Text>Room A</Text></NavigationLink.Label>
+///   <NavigationLink.Destination><TasksScreen /></NavigationLink.Destination>
+/// </NavigationLink>
+/// ```
+export const NavigationLink = Object.assign(NavigationLinkFn, {
+  Label,
+  Destination,
+});

package/src/components/NavigationStack.tsx

@@ -0,0 +1,9 @@
+import { createNativeView } from '../createNativeView';
+
+export interface NavigationStackProps {}
+
+/// SwiftUI `NavigationStack`. Wrap a screen in this to enable push
+/// transitions via descendant `<NavigationLink>` elements. Back gesture
+/// and back button are provided by SwiftUI automatically on watchOS.
+export const NavigationStack =
+  createNativeView<NavigationStackProps>('NavigationStack');