@hzblj/kara-components 0.14.0 → 0.14.2

package/lib/module/atoms/segmented-control/segmented-control.ios.js

@@ -1,13 +1,21 @@
 "use strict";
 
+import { RNHostView } from '@expo/ui/swift-ui';
 import { SegmentedControl as NativeSegmentedControl } from '@hzblj/kara-native/swift-ui';
 import { useAppTheme } from '@hzblj/kara-theme';
 import { useCallback, useMemo } from 'react';
+import { useInsideHost } from "../../host-context.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const MATCH_HEIGHT_ONLY = {
+  horizontal: false,
+  vertical: true
+};
+
 /**
  * kara's own `UISegmentedControl`, with the pill in the accent and white text on it — the system control tints only the
  * pill, and SwiftUI's segmented picker not even that. A plain `UIView` in React Native layout: it needs no host, takes
- * the width it is given and UIKit's height. UIKit plays the control's own feedback.
+ * the width it is given and UIKit's height. Inside a `Screen` or `Island` it is carried into that host by `RNHostView`
+ * (see `useInsideHost`), the host's width and its own height. UIKit plays the control's own feedback.
  */
 export const SegmentedControl = ({
   disabled = false,
@@ -17,6 +25,7 @@ export const SegmentedControl = ({
   values
 }) => {
   const theme = useAppTheme();
+  const insideHost = useInsideHost();
   const face = theme.typography.footnoteMedium;
 
   // The native control speaks in values; a segment's is its index, so two labels may read the same.
@@ -28,7 +37,7 @@ export const SegmentedControl = ({
     const index = Number(value);
     onChange?.(index, values[index] ?? '');
   }, [onChange, values]);
-  return /*#__PURE__*/_jsx(NativeSegmentedControl, {
+  const control = /*#__PURE__*/_jsx(NativeSegmentedControl, {
     activePillColor: theme.color('fill.accent.primary'),
     activeTextColor: theme.color('content.on.accent'),
     disabled: disabled,
@@ -40,5 +49,9 @@ export const SegmentedControl = ({
     selectedValue: String(selectedIndex),
     testID: testID
   });
+  return insideHost ? /*#__PURE__*/_jsx(RNHostView, {
+    matchContents: MATCH_HEIGHT_ONLY,
+    children: control
+  }) : control;
 };
 //# sourceMappingURL=segmented-control.ios.js.map

package/lib/module/atoms/segmented-control/segmented-control.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["SegmentedControl","NativeSegmentedControl","useAppTheme","useCallback","useMemo","jsx","_jsx","disabled","onChange","selectedIndex","testID","values","theme","face","typography","footnoteMedium","options","map","label","index","value","String","onValueChange","Number","activePillColor","color","activeTextColor","fontFamily","fontSize","inactiveTextColor","selectedValue"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.ios.tsx"],"mappings":";;AAAA,SAAQA,gBAAgB,IAAIC,sBAAsB,QAAO,6BAA6B;AACtF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI1C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMN,gBAA2C,GAAGA,CAAC;EAC1DO,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,aAAa;EACbC,MAAM;EACNC;AACqB,CAAC,KAAK;EAC3B,MAAMC,KAAK,GAAGV,WAAW,CAAC,CAAC;EAC3B,MAAMW,IAAI,GAAGD,KAAK,CAACE,UAAU,CAACC,cAAc;;EAE5C;EACA,MAAMC,OAAO,GAAGZ,OAAO,CAAC,MAAMO,MAAM,CAACM,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,MAAM;IAACD,KAAK;IAAEE,KAAK,EAAEC,MAAM,CAACF,KAAK;EAAC,CAAC,CAAC,CAAC,EAAE,CAACR,MAAM,CAAC,CAAC;EAEtG,MAAMW,aAAa,GAAGnB,WAAW,CAC9BiB,KAAa,IAAK;IACjB,MAAMD,KAAK,GAAGI,MAAM,CAACH,KAAK,CAAC;IAC3BZ,QAAQ,GAAGW,KAAK,EAAER,MAAM,CAACQ,KAAK,CAAC,IAAI,EAAE,CAAC;EACxC,CAAC,EACD,CAACX,QAAQ,EAAEG,MAAM,CACnB,CAAC;EAED,oBACEL,IAAA,CAACL,sBAAsB;IACrBuB,eAAe,EAAEZ,KAAK,CAACa,KAAK,CAAC,qBAAqB,CAAE;IACpDC,eAAe,EAAEd,KAAK,CAACa,KAAK,CAAC,mBAAmB,CAAE;IAClDlB,QAAQ,EAAEA,QAAS;IACnBoB,UAAU,EAAEd,IAAI,CAACc,UAAW;IAC5BC,QAAQ,EAAEf,IAAI,CAACe,QAAS;IACxBC,iBAAiB,EAAEjB,KAAK,CAACa,KAAK,CAAC,iBAAiB,CAAE;IAClDH,aAAa,EAAEA,aAAc;IAC7BN,OAAO,EAAEA,OAAQ;IACjBc,aAAa,EAAET,MAAM,CAACZ,aAAa,CAAE;IACrCC,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["RNHostView","SegmentedControl","NativeSegmentedControl","useAppTheme","useCallback","useMemo","useInsideHost","jsx","_jsx","MATCH_HEIGHT_ONLY","horizontal","vertical","disabled","onChange","selectedIndex","testID","values","theme","insideHost","face","typography","footnoteMedium","options","map","label","index","value","String","onValueChange","Number","control","activePillColor","color","activeTextColor","fontFamily","fontSize","inactiveTextColor","selectedValue","matchContents","children"],"sourceRoot":"../../../../src","sources":["atoms/segmented-control/segmented-control.ios.tsx"],"mappings":";;AAAA,SAAQA,UAAU,QAAO,mBAAmB;AAC5C,SAAQC,gBAAgB,IAAIC,sBAAsB,QAAO,6BAA6B;AACtF,SAAQC,WAAW,QAAO,mBAAmB;AAC7C,SAAQC,WAAW,EAAEC,OAAO,QAAO,OAAO;AAE1C,SAAQC,aAAa,QAAO,uBAAoB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGhD,MAAMC,iBAAiB,GAAG;EAACC,UAAU,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAI,CAAC;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMV,gBAA2C,GAAGA,CAAC;EAC1DW,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,aAAa;EACbC,MAAM;EACNC;AACqB,CAAC,KAAK;EAC3B,MAAMC,KAAK,GAAGd,WAAW,CAAC,CAAC;EAC3B,MAAMe,UAAU,GAAGZ,aAAa,CAAC,CAAC;EAClC,MAAMa,IAAI,GAAGF,KAAK,CAACG,UAAU,CAACC,cAAc;;EAE5C;EACA,MAAMC,OAAO,GAAGjB,OAAO,CAAC,MAAMW,MAAM,CAACO,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,MAAM;IAACD,KAAK;IAAEE,KAAK,EAAEC,MAAM,CAACF,KAAK;EAAC,CAAC,CAAC,CAAC,EAAE,CAACT,MAAM,CAAC,CAAC;EAEtG,MAAMY,aAAa,GAAGxB,WAAW,CAC9BsB,KAAa,IAAK;IACjB,MAAMD,KAAK,GAAGI,MAAM,CAACH,KAAK,CAAC;IAC3Bb,QAAQ,GAAGY,KAAK,EAAET,MAAM,CAACS,KAAK,CAAC,IAAI,EAAE,CAAC;EACxC,CAAC,EACD,CAACZ,QAAQ,EAAEG,MAAM,CACnB,CAAC;EAED,MAAMc,OAAO,gBACXtB,IAAA,CAACN,sBAAsB;IACrB6B,eAAe,EAAEd,KAAK,CAACe,KAAK,CAAC,qBAAqB,CAAE;IACpDC,eAAe,EAAEhB,KAAK,CAACe,KAAK,CAAC,mBAAmB,CAAE;IAClDpB,QAAQ,EAAEA,QAAS;IACnBsB,UAAU,EAAEf,IAAI,CAACe,UAAW;IAC5BC,QAAQ,EAAEhB,IAAI,CAACgB,QAAS;IACxBC,iBAAiB,EAAEnB,KAAK,CAACe,KAAK,CAAC,iBAAiB,CAAE;IAClDJ,aAAa,EAAEA,aAAc;IAC7BN,OAAO,EAAEA,OAAQ;IACjBe,aAAa,EAAEV,MAAM,CAACb,aAAa,CAAE;IACrCC,MAAM,EAAEA;EAAO,CAChB,CACF;EAED,OAAOG,UAAU,gBAAGV,IAAA,CAACR,UAAU;IAACsC,aAAa,EAAE7B,iBAAkB;IAAA8B,QAAA,EAAET;EAAO,CAAa,CAAC,GAAGA,OAAO;AACpG,CAAC","ignoreList":[]}

package/lib/module/host-context.js

@@ -9,6 +9,14 @@ export const HostBoundary = ({
   value: true,
   children: children
 });
+
+/**
+ * Whether this renders inside a `Screen` or `Island` already. An atom that brings its own host renders straight into
+ * that one instead: on Android a host nested in another is a real view beside the outer host's own `ComposeView`, and
+ * the outer host (a horizontal `LinearLayout`) measures its `ComposeView` in the width the nested one leaves over,
+ * which for a full-width nested host is none.
+ */
+export const useInsideHost = () => useContext(HostContext);
 export const useHostGuard = atom => {
   const insideHost = useContext(HostContext);
   if (__DEV__ && !insideHost) {

package/lib/module/host-context.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContext","jsx","_jsx","HostContext","HostBoundary","children","Provider","value","useHostGuard","atom","insideHost","__DEV__","console","warn"],"sourceRoot":"../../src","sources":["host-context.tsx"],"mappings":";;AAAA,SAAQA,aAAa,EAAkBC,UAAU,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/D,MAAMC,WAAW,gBAAGJ,aAAa,CAAC,KAAK,CAAC;AAExC,OAAO,MAAMK,YAAY,GAAGA,CAAC;EAACC;AAA+B,CAAC,kBAC5DH,IAAA,CAACC,WAAW,CAACG,QAAQ;EAACC,KAAK;EAAAF,QAAA,EAAEA;AAAQ,CAAuB,CAC7D;AAED,OAAO,MAAMG,YAAY,GAAIC,IAAY,IAAK;EAC5C,MAAMC,UAAU,GAAGV,UAAU,CAACG,WAAW,CAAC;EAE1C,IAAIQ,OAAO,IAAI,CAACD,UAAU,EAAE;IAC1BE,OAAO,CAACC,IAAI,CACV,cAAcJ,IAAI,mGACpB,CAAC;EACH;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["createContext","useContext","jsx","_jsx","HostContext","HostBoundary","children","Provider","value","useInsideHost","useHostGuard","atom","insideHost","__DEV__","console","warn"],"sourceRoot":"../../src","sources":["host-context.tsx"],"mappings":";;AAAA,SAAQA,aAAa,EAAkBC,UAAU,QAAO,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE/D,MAAMC,WAAW,gBAAGJ,aAAa,CAAC,KAAK,CAAC;AAExC,OAAO,MAAMK,YAAY,GAAGA,CAAC;EAACC;AAA+B,CAAC,kBAC5DH,IAAA,CAACC,WAAW,CAACG,QAAQ;EAACC,KAAK;EAAAF,QAAA,EAAEA;AAAQ,CAAuB,CAC7D;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,aAAa,GAAGA,CAAA,KAAMR,UAAU,CAACG,WAAW,CAAC;AAE1D,OAAO,MAAMM,YAAY,GAAIC,IAAY,IAAK;EAC5C,MAAMC,UAAU,GAAGX,UAAU,CAACG,WAAW,CAAC;EAE1C,IAAIS,OAAO,IAAI,CAACD,UAAU,EAAE;IAC1BE,OAAO,CAACC,IAAI,CACV,cAAcJ,IAAI,mGACpB,CAAC;EACH;AACF,CAAC","ignoreList":[]}

package/lib/typescript/atoms/activity-indicator/activity-indicator.ios.d.ts

@@ -1,3 +1,6 @@
 import type { ActivityIndicatorComponent } from './activity-indicator.types';
-/** React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. */
+/**
+ * React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. Inside a `Screen` or `Island` it is
+ * carried into that host by `RNHostView`, sized to the spinner (see `useInsideHost`).
+ */
 export declare const ActivityIndicator: ActivityIndicatorComponent;

package/lib/typescript/atoms/activity-indicator/activity-indicator.types.d.ts

@@ -4,7 +4,8 @@ export type ActivityIndicatorSize = 'large' | 'small';
 /**
  * That something is loading, for as long as it takes: UIKit's spinner on iOS, Material 3's expressive
  * `LoadingIndicator` on Android, its shapes morphing as it turns. A React Native view on iOS and a host of its own on
- * Android, so it renders anywhere. For how far along something is, use `Progress`.
+ * Android, so it renders anywhere; inside a `Screen` or `Island` it joins that host, beside other native views. For how
+ * far along something is, use `Progress`.
  */
 export type ActivityIndicatorProps = {
     /** What is loading, for VoiceOver and TalkBack: "Loading photos". Unset, the platform's own word ("In progress"). */

package/lib/typescript/atoms/date-picker/date-picker.ios.d.ts

@@ -3,6 +3,7 @@ import type { DatePickerComponent } from './date-picker.types';
  * The system's compact date picker: the value in a pill, and a tap on it opens the calendar popover UIKit owns. Its own
  * host, sized to the pill on both axes — a host that took the width it was given would lay the pill out against the
  * far edge of it, or past its container's — so it drops into a row the way a `Text` does. The label is the caller's,
- * beside it; the calendar is in the accent.
+ * beside it; the calendar is in the accent. Inside a `Screen` or `Island` it renders into that host instead (see
+ * `useInsideHost`).
  */
 export declare const DatePicker: DatePickerComponent;

package/lib/typescript/atoms/date-picker/date-picker.types.d.ts

@@ -3,7 +3,7 @@ export type DatePickerMode = 'date' | 'datetime' | 'time';
 /**
  * A date or time picker: SwiftUI's compact `DatePicker` on iOS, a field that opens Material's picker dialog on a tap
  * on Android. The React Native tier: it brings its own host and sizes itself to the value, so it sits in a row beside
- * its label like a `Text`.
+ * its label like a `Text`. Inside a `Screen` or `Island` it joins that host instead, beside a native `Text` label.
  */
 export type DatePickerProps = {
     /** The latest date that can be picked. Android ignores it in `time` mode. */

package/lib/typescript/atoms/picker/picker.ios.d.ts

@@ -1,2 +1,7 @@
 import type { PickerComponent } from './picker.types';
+/**
+ * A SwiftUI wheel. On its own it is `@expo/ui`'s community picker, which brings a host of its own. Inside a `Screen` or
+ * `Island` it is the same wheel rendered into that host instead (see `useInsideHost`): a host nested in the island's
+ * stack is given no height there, and the wheel spills over the views around it.
+ */
 export declare const Picker: PickerComponent;

package/lib/typescript/atoms/picker/picker.types.d.ts

@@ -8,7 +8,8 @@ export type PickerOption = {
 };
 /**
  * A single choice from a list: a SwiftUI wheel picker on iOS, Material's exposed dropdown on Android. It brings its
- * own host, so it renders outside `Screen` and `Island` as well.
+ * own host, so it renders outside `Screen` and `Island` as well. Inside one it renders into that host instead, so it
+ * can share a stack with other native views.
  */
 export type PickerProps = {
     /** Stops the user changing the selection, and dims the picker. */
@@ -17,7 +18,10 @@ export type PickerProps = {
     onValueChange?: (value: string) => void;
     /** The choices, in order. */
     options: PickerOption[];
-    /** Android: the dropdown field's test tag. iOS: `@expo/ui`'s wheel picker drops it. */
+    /**
+     * Android: the dropdown field's test tag. iOS: the wheel's, inside a `Screen` or `Island` only; on its own,
+     * `@expo/ui`'s wheel picker drops it.
+     */
     testID?: string;
     /** The selected option's `value`. Controlled: pass back what `onValueChange` reports. */
     value: string;

package/lib/typescript/atoms/segmented-control/segmented-control.ios.d.ts

@@ -2,6 +2,7 @@ import type { SegmentedControlComponent } from './segmented-control.types';
 /**
  * kara's own `UISegmentedControl`, with the pill in the accent and white text on it — the system control tints only the
  * pill, and SwiftUI's segmented picker not even that. A plain `UIView` in React Native layout: it needs no host, takes
- * the width it is given and UIKit's height. UIKit plays the control's own feedback.
+ * the width it is given and UIKit's height. Inside a `Screen` or `Island` it is carried into that host by `RNHostView`
+ * (see `useInsideHost`), the host's width and its own height. UIKit plays the control's own feedback.
  */
 export declare const SegmentedControl: SegmentedControlComponent;

package/lib/typescript/atoms/segmented-control/segmented-control.types.d.ts

@@ -2,7 +2,8 @@ import type { ReactNode } from 'react';
 /**
  * A row of mutually exclusive segments, the selected one in the accent: kara's own `UISegmentedControl` on iOS,
  * Material's single-choice segmented buttons on Android. It needs no `Screen` or `Island`: iOS is a plain view, Android
- * brings its own host. It takes the width it is given; the height is the platform's.
+ * brings its own host. Inside one it joins that host, so it can share a stack with other native views. It takes the
+ * width it is given; the height is the platform's.
  */
 export type SegmentedControlProps = {
     /** Stops the user changing the segment, and dims the control. */

package/lib/typescript/host-context.d.ts

@@ -2,4 +2,11 @@ import { type ReactNode } from 'react';
 export declare const HostBoundary: ({ children }: {
     children: ReactNode;
 }) => import("react").JSX.Element;
+/**
+ * Whether this renders inside a `Screen` or `Island` already. An atom that brings its own host renders straight into
+ * that one instead: on Android a host nested in another is a real view beside the outer host's own `ComposeView`, and
+ * the outer host (a horizontal `LinearLayout`) measures its `ComposeView` in the width the nested one leaves over,
+ * which for a full-width nested host is none.
+ */
+export declare const useInsideHost: () => boolean;
 export declare const useHostGuard: (atom: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -61,9 +61,9 @@
   "dependencies": {
     "@hzblj/expo-native-icons": "^0.1.0",
     "@hzblj/expo-rich-haptics": "^0.1.0",
-    "@hzblj/kara-native": "^0.14.0",
-    "@hzblj/kara-sx": "^0.14.0",
-    "@hzblj/kara-theme": "^0.14.0",
+    "@hzblj/kara-native": "^0.14.2",
+    "@hzblj/kara-sx": "^0.14.2",
+    "@hzblj/kara-theme": "^0.14.2",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/atoms/activity-indicator/activity-indicator.android.tsx

@@ -1,10 +1,11 @@
 import {Host, LoadingIndicator} from '@expo/ui/jetpack-compose'
-import {fillMaxSize, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
+import {fillMaxSize, size as sizeModifier, testID as testIdModifier} from '@expo/ui/jetpack-compose/modifiers'
 import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 import {StyleSheet} from 'react-native'
 
+import {useInsideHost} from '../../host-context'
 import type {ActivityIndicatorComponent, ActivityIndicatorProps} from './activity-indicator.types'
 
 /** Material's 48dp for a screen; half of it in a row, about where React Native's small spinner sat. */
@@ -15,7 +16,8 @@ const styles = StyleSheet.create({
 
 /**
  * Material 3's expressive `LoadingIndicator` in a host of its own, sized here rather than measured, so it renders
- * anywhere and takes its place in the first frame.
+ * anywhere and takes its place in the first frame. Inside a `Screen` or `Island` it renders into that host instead (see
+ * `useInsideHost`), the same size.
  */
 export const ActivityIndicator: ActivityIndicatorComponent = ({
   accessibilityLabel,
@@ -24,15 +26,26 @@ export const ActivityIndicator: ActivityIndicatorComponent = ({
   testID,
 }: ActivityIndicatorProps) => {
   const theme = useAppTheme()
+  const insideHost = useInsideHost()
   const accessibilityModifiers = useAccessibilityModifiers({accessibilityLabel})
   const modifiers = useMemo(
-    () => [fillMaxSize(), ...(testID ? [testIdModifier(testID)] : []), ...accessibilityModifiers],
-    [accessibilityModifiers, testID]
+    () => [
+      insideHost ? sizeModifier(styles[size].width, styles[size].height) : fillMaxSize(),
+      ...(testID ? [testIdModifier(testID)] : []),
+      ...accessibilityModifiers,
+    ],
+    [accessibilityModifiers, insideHost, size, testID]
   )
 
+  const indicator = <LoadingIndicator color={theme.color(color)} modifiers={modifiers} />
+
+  if (insideHost) {
+    return indicator
+  }
+
   return (
     <Host colorScheme={theme.dark ? 'dark' : 'light'} seedColor={theme.materialSeed} style={styles[size]}>
-      <LoadingIndicator color={theme.color(color)} modifiers={modifiers} />
+      {indicator}
     </Host>
   )
 }

package/src/atoms/activity-indicator/activity-indicator.ios.tsx

@@ -1,9 +1,14 @@
+import {RNHostView} from '@expo/ui/swift-ui'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {ActivityIndicator as RNActivityIndicator} from 'react-native'
 
+import {useInsideHost} from '../../host-context'
 import type {ActivityIndicatorComponent, ActivityIndicatorProps} from './activity-indicator.types'
 
-/** React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. */
+/**
+ * React Native's spinner, which on iOS is UIKit's own `UIActivityIndicatorView`. Inside a `Screen` or `Island` it is
+ * carried into that host by `RNHostView`, sized to the spinner (see `useInsideHost`).
+ */
 export const ActivityIndicator: ActivityIndicatorComponent = ({
   accessibilityLabel,
   color = 'fill.accent.primary',
@@ -11,8 +16,9 @@ export const ActivityIndicator: ActivityIndicatorComponent = ({
   testID,
 }: ActivityIndicatorProps) => {
   const theme = useAppTheme()
+  const insideHost = useInsideHost()
 
-  return (
+  const spinner = (
     <RNActivityIndicator
       accessibilityLabel={accessibilityLabel}
       color={theme.color(color)}
@@ -20,4 +26,6 @@ export const ActivityIndicator: ActivityIndicatorComponent = ({
       testID={testID}
     />
   )
+
+  return insideHost ? <RNHostView matchContents>{spinner}</RNHostView> : spinner
 }

package/src/atoms/activity-indicator/activity-indicator.types.ts

@@ -6,7 +6,8 @@ export type ActivityIndicatorSize = 'large' | 'small'
 /**
  * That something is loading, for as long as it takes: UIKit's spinner on iOS, Material 3's expressive
  * `LoadingIndicator` on Android, its shapes morphing as it turns. A React Native view on iOS and a host of its own on
- * Android, so it renders anywhere. For how far along something is, use `Progress`.
+ * Android, so it renders anywhere; inside a `Screen` or `Island` it joins that host, beside other native views. For how
+ * far along something is, use `Progress`.
  */
 export type ActivityIndicatorProps = {
   /** What is loading, for VoiceOver and TalkBack: "Loading photos". Unset, the platform's own word ("In progress"). */

package/src/atoms/date-picker/date-picker.android.tsx

@@ -1,7 +1,10 @@
 import {DateTimePicker} from '@expo/ui/community/datetime-picker'
+import {RNHostView} from '@expo/ui/jetpack-compose'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useCallback, useState} from 'react'
 
+import {useInsideHost} from '../../host-context'
+import {Box} from '../box'
 import {Pressable} from '../pressable'
 import {RnText} from '../rn-text'
 import type {DatePickerComponent, DatePickerMode, DatePickerProps} from './date-picker.types'
@@ -21,6 +24,8 @@ const formatted = (value: Date, mode: DatePickerMode): string => {
 /**
  * The value as a field that opens Material's date picker dialog on a tap. Android's picker *is* a dialog — mounted, it
  * opens — so it is mounted only while open, and unmounted on confirm or dismiss, as the component asks its caller to.
+ * Both are React Native views; inside a `Screen` or `Island` `RNHostView` carries them into that host, sized to the
+ * field (see `useInsideHost`).
  */
 export const DatePicker: DatePickerComponent = ({
   max,
@@ -31,6 +36,7 @@ export const DatePicker: DatePickerComponent = ({
   value,
 }: DatePickerProps) => {
   const theme = useAppTheme()
+  const insideHost = useInsideHost()
   const [open, setOpen] = useState(false)
 
   const show = useCallback(() => setOpen(true), [])
@@ -44,7 +50,7 @@ export const DatePicker: DatePickerComponent = ({
     [onValueChange]
   )
 
-  return (
+  const field = (
     <>
       <Pressable
         alignSelf="flex-start"
@@ -71,4 +77,12 @@ export const DatePicker: DatePickerComponent = ({
       ) : null}
     </>
   )
+
+  return insideHost ? (
+    <RNHostView matchContents>
+      <Box>{field}</Box>
+    </RNHostView>
+  ) : (
+    field
+  )
 }

package/src/atoms/date-picker/date-picker.ios.tsx

@@ -3,6 +3,7 @@ import {datePickerStyle, labelsHidden, tint} from '@expo/ui/swift-ui/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
+import {useInsideHost} from '../../host-context'
 import type {DatePickerComponent, DatePickerMode, DatePickerProps} from './date-picker.types'
 
 const COMPONENTS = {
@@ -15,7 +16,8 @@ const COMPONENTS = {
  * The system's compact date picker: the value in a pill, and a tap on it opens the calendar popover UIKit owns. Its own
  * host, sized to the pill on both axes — a host that took the width it was given would lay the pill out against the
  * far edge of it, or past its container's — so it drops into a row the way a `Text` does. The label is the caller's,
- * beside it; the calendar is in the accent.
+ * beside it; the calendar is in the accent. Inside a `Screen` or `Island` it renders into that host instead (see
+ * `useInsideHost`).
  */
 export const DatePicker: DatePickerComponent = ({
   max,
@@ -26,22 +28,31 @@ export const DatePicker: DatePickerComponent = ({
   value,
 }: DatePickerProps) => {
   const theme = useAppTheme()
+  const insideHost = useInsideHost()
 
   const modifiers = useMemo(
     () => [datePickerStyle('compact'), labelsHidden(), tint(theme.color('fill.accent.primary'))],
     [theme]
   )
 
+  const picker = (
+    <SwiftUIDatePicker
+      displayedComponents={[...COMPONENTS[mode]]}
+      modifiers={modifiers}
+      onDateChange={onValueChange}
+      range={min || max ? {end: max, start: min} : undefined}
+      selection={value}
+      testID={testID}
+    />
+  )
+
+  if (insideHost) {
+    return picker
+  }
+
   return (
     <Host colorScheme={theme.dark ? 'dark' : 'light'} matchContents>
-      <SwiftUIDatePicker
-        displayedComponents={[...COMPONENTS[mode]]}
-        modifiers={modifiers}
-        onDateChange={onValueChange}
-        range={min || max ? {end: max, start: min} : undefined}
-        selection={value}
-        testID={testID}
-      />
+      {picker}
     </Host>
   )
 }

package/src/atoms/date-picker/date-picker.types.ts

@@ -5,7 +5,7 @@ export type DatePickerMode = 'date' | 'datetime' | 'time'
 /**
  * A date or time picker: SwiftUI's compact `DatePicker` on iOS, a field that opens Material's picker dialog on a tap
  * on Android. The React Native tier: it brings its own host and sizes itself to the value, so it sits in a row beside
- * its label like a `Text`.
+ * its label like a `Text`. Inside a `Screen` or `Island` it joins that host instead, beside a native `Text` label.
  */
 export type DatePickerProps = {
   /** The latest date that can be picked. Android ignores it in `time` mode. */

package/src/atoms/picker/picker.android.tsx

@@ -12,7 +12,7 @@ import {useAppTheme} from '@hzblj/kara-theme'
 import {useEffect, useMemo, useState} from 'react'
 
 import {Glyph} from '../../glyph'
-import {HostBoundary} from '../../host-context'
+import {HostBoundary, useInsideHost} from '../../host-context'
 import type {PickerComponent, PickerProps} from './picker.types'
 
 const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
@@ -20,9 +20,12 @@ const MATCH_HEIGHT_ONLY = {horizontal: false, vertical: true}
 /**
  * Material's exposed dropdown: a read-only outlined field the width of its container, opening a menu of the options
  * under it. Its own host, themed like an `Island`, so it drops into React Native layout like the iOS picker does.
+ * Inside a `Screen` or `Island` it renders into that host instead (see `useInsideHost`): a host of its own there
+ * would leave the outer one no width, and the native views beside it would disappear.
  */
 export const Picker: PickerComponent = ({disabled = false, onValueChange, options, testID, value}: PickerProps) => {
   const theme = useAppTheme()
+  const insideHost = useInsideHost()
   const [expanded, setExpanded] = useState(false)
   const selectedLabel = options.find(option => option.value === value)?.label ?? ''
   const label = useNativeState(selectedLabel)
@@ -37,52 +40,58 @@ export const Picker: PickerComponent = ({disabled = false, onValueChange, option
     label.set(selectedLabel)
   }, [label, selectedLabel])
 
-  return (
-    <Host colorScheme={theme.dark ? 'dark' : 'light'} matchContents={MATCH_HEIGHT_ONLY} seedColor={theme.materialSeed}>
-      <HostBoundary>
-        <ExposedDropdownMenuBox expanded={expanded} onExpandedChange={disabled ? undefined : setExpanded}>
-          <OutlinedTextField
-            enabled={!disabled}
-            modifiers={fieldModifiers}
-            readOnly
-            singleLine
-            textStyle={{
-              color: theme.colorString('content.primary'),
-              fontFamily: theme.typography.body.fontFamily,
-              fontWeight: theme.typography.body.fontWeight,
+  const menu = (
+    <ExposedDropdownMenuBox expanded={expanded} onExpandedChange={disabled ? undefined : setExpanded}>
+      <OutlinedTextField
+        enabled={!disabled}
+        modifiers={fieldModifiers}
+        readOnly
+        singleLine
+        textStyle={{
+          color: theme.colorString('content.primary'),
+          fontFamily: theme.typography.body.fontFamily,
+          fontWeight: theme.typography.body.fontWeight,
+        }}
+        value={label}
+      >
+        <OutlinedTextField.TrailingIcon>
+          <Glyph color="content.secondary" name="chevronDown" size="s20" />
+        </OutlinedTextField.TrailingIcon>
+      </OutlinedTextField>
+      <ExposedDropdownMenu
+        containerColor={theme.color('surface.primary')}
+        expanded={expanded}
+        onDismissRequest={() => setExpanded(false)}
+      >
+        {options.map(option => (
+          <DropdownMenuItem
+            key={option.value}
+            onClick={() => {
+              setExpanded(false)
+              onValueChange?.(option.value)
             }}
-            value={label}
           >
-            <OutlinedTextField.TrailingIcon>
-              <Glyph color="content.secondary" name="chevronDown" size="s20" />
-            </OutlinedTextField.TrailingIcon>
-          </OutlinedTextField>
-          <ExposedDropdownMenu
-            containerColor={theme.color('surface.primary')}
-            expanded={expanded}
-            onDismissRequest={() => setExpanded(false)}
-          >
-            {options.map(option => (
-              <DropdownMenuItem
-                key={option.value}
-                onClick={() => {
-                  setExpanded(false)
-                  onValueChange?.(option.value)
-                }}
+            <DropdownMenuItem.Text>
+              <ComposeText
+                color={theme.colorString(option.value === value ? 'content.accent' : 'content.primary')}
+                style={theme.typography.body}
               >
-                <DropdownMenuItem.Text>
-                  <ComposeText
-                    color={theme.colorString(option.value === value ? 'content.accent' : 'content.primary')}
-                    style={theme.typography.body}
-                  >
-                    {option.label}
-                  </ComposeText>
-                </DropdownMenuItem.Text>
-              </DropdownMenuItem>
-            ))}
-          </ExposedDropdownMenu>
-        </ExposedDropdownMenuBox>
-      </HostBoundary>
+                {option.label}
+              </ComposeText>
+            </DropdownMenuItem.Text>
+          </DropdownMenuItem>
+        ))}
+      </ExposedDropdownMenu>
+    </ExposedDropdownMenuBox>
+  )
+
+  if (insideHost) {
+    return menu
+  }
+
+  return (
+    <Host colorScheme={theme.dark ? 'dark' : 'light'} matchContents={MATCH_HEIGHT_ONLY} seedColor={theme.materialSeed}>
+      <HostBoundary>{menu}</HostBoundary>
     </Host>
   )
 }

package/src/atoms/picker/picker.ios.tsx

@@ -1,23 +1,44 @@
 import {Picker as NativePicker} from '@expo/ui/community/picker'
+import {Picker as SwiftUIPicker, Text as SwiftUIText} from '@expo/ui/swift-ui'
+import {disabled as disabledModifier, foregroundStyle, pickerStyle, tag} from '@expo/ui/swift-ui/modifiers'
 import {useAppTheme} from '@hzblj/kara-theme'
-import {useCallback} from 'react'
+import {useCallback, useMemo} from 'react'
 
+import {useInsideHost} from '../../host-context'
 import type {PickerComponent, PickerProps} from './picker.types'
 
+/**
+ * A SwiftUI wheel. On its own it is `@expo/ui`'s community picker, which brings a host of its own. Inside a `Screen` or
+ * `Island` it is the same wheel rendered into that host instead (see `useInsideHost`): a host nested in the island's
+ * stack is given no height there, and the wheel spills over the views around it.
+ */
 export const Picker: PickerComponent = ({disabled = false, onValueChange, options, testID, value}: PickerProps) => {
   const theme = useAppTheme()
+  const insideHost = useInsideHost()
+  const color = theme.colorString('content.primary')
 
   const onChange = useCallback((next: string | number | null) => onValueChange?.(String(next)), [onValueChange])
+  const wheelModifiers = useMemo(
+    () => [pickerStyle('wheel'), ...(disabled ? [disabledModifier(true)] : [])],
+    [disabled]
+  )
+
+  if (insideHost) {
+    return (
+      <SwiftUIPicker modifiers={wheelModifiers} onSelectionChange={onChange} selection={value} testID={testID}>
+        {options.map(option => (
+          <SwiftUIText key={option.value} modifiers={[tag(option.value), foregroundStyle(color)]}>
+            {option.label}
+          </SwiftUIText>
+        ))}
+      </SwiftUIPicker>
+    )
+  }
 
   return (
     <NativePicker enabled={!disabled} onValueChange={onChange} selectedValue={value} testID={testID}>
       {options.map(option => (
-        <NativePicker.Item
-          color={theme.colorString('content.primary')}
-          key={option.value}
-          label={option.label}
-          value={option.value}
-        />
+        <NativePicker.Item color={color} key={option.value} label={option.label} value={option.value} />
       ))}
     </NativePicker>
   )

package/src/atoms/picker/picker.types.ts

@@ -10,7 +10,8 @@ export type PickerOption = {
 
 /**
  * A single choice from a list: a SwiftUI wheel picker on iOS, Material's exposed dropdown on Android. It brings its
- * own host, so it renders outside `Screen` and `Island` as well.
+ * own host, so it renders outside `Screen` and `Island` as well. Inside one it renders into that host instead, so it
+ * can share a stack with other native views.
  */
 export type PickerProps = {
   /** Stops the user changing the selection, and dims the picker. */
@@ -19,7 +20,10 @@ export type PickerProps = {
   onValueChange?: (value: string) => void
   /** The choices, in order. */
   options: PickerOption[]
-  /** Android: the dropdown field's test tag. iOS: `@expo/ui`'s wheel picker drops it. */
+  /**
+   * Android: the dropdown field's test tag. iOS: the wheel's, inside a `Screen` or `Island` only; on its own,
+   * `@expo/ui`'s wheel picker drops it.
+   */
   testID?: string
   /** The selected option's `value`. Controlled: pass back what `onValueChange` reports. */
   value: string