@expo/ui 56.0.8 → 56.0.10

package/src/universal/Picker/Picker.tsx

@@ -0,0 +1,52 @@
+import type { ComponentProps } from 'react';
+import { StyleSheet, unstable_createElement, type ViewProps } from 'react-native';
+
+import { extractPickerItems } from './PickerItem';
+import type { PickerItemValue, PickerProps } from './types';
+
+const Select = (props: Omit<ComponentProps<'select'>, 'style'> & { style?: ViewProps['style'] }) =>
+  unstable_createElement('select', props);
+
+/**
+ * A single-selection input.
+ * Declare options via `<Picker.Item label value />` children.
+ */
+export function Picker<T extends PickerItemValue>({
+  selectedValue,
+  onValueChange,
+  enabled = true,
+  children,
+  testID,
+}: PickerProps<T>) {
+  const items = extractPickerItems<T>(children);
+
+  return (
+    <Select
+      disabled={!enabled}
+      value={String(selectedValue)}
+      onChange={(e) => {
+        const index = e.target.selectedIndex;
+        const item = items[index];
+        if (item) onValueChange(item.value);
+      }}
+      style={styles.select}
+      data-testid={testID}>
+      {items.map((item) => (
+        <option key={String(item.value)} value={String(item.value)}>
+          {item.label}
+        </option>
+      ))}
+    </Select>
+  );
+}
+
+const styles = StyleSheet.create({
+  select: {
+    fontFamily:
+      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    fontSize: 14,
+    margin: 0,
+  },
+});
+
+export * from './types';

package/src/universal/Picker/PickerItem.tsx

@@ -0,0 +1,27 @@
+import { Children, isValidElement, type ReactElement, type ReactNode } from 'react';
+
+import type { ExtractedPickerItem, PickerItemProps, PickerItemValue } from './types';
+
+/**
+ * Data-only option marker for [`Picker`](#picker).
+ * Used via the compound API: `<Picker.Item label="…" value={…} />`.
+ */
+export function PickerItem<T extends PickerItemValue>(_props: PickerItemProps<T>): null {
+  return null;
+}
+
+// Walk `<Picker>` children and extract each `<Picker.Item>`'s props.
+// Non-`PickerItem` children are ignored.
+export function extractPickerItems<T extends PickerItemValue>(
+  children: ReactNode
+): ExtractedPickerItem<T>[] {
+  return Children.toArray(children)
+    .filter(
+      (child): child is ReactElement<PickerItemProps<T>> =>
+        isValidElement(child) && child.type === PickerItem
+    )
+    .map((child) => ({
+      label: child.props.label,
+      value: child.props.value,
+    }));
+}

package/src/universal/Picker/index.ts

@@ -0,0 +1,11 @@
+import { Picker as PickerBase } from './Picker';
+import { PickerItem } from './PickerItem';
+import type { PickerItemProps, PickerItemValue } from './types';
+
+const Picker = PickerBase as typeof PickerBase & {
+  Item: <T extends PickerItemValue>(props: PickerItemProps<T>) => null;
+};
+Picker.Item = PickerItem;
+
+export { Picker };
+export * from './types';

package/src/universal/Picker/types.ts

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react';
+
+/**
+ * The type of values a [`Picker.Item`](#pickeritem) can carry.
+ */
+export type PickerItemValue = string | number;
+
+/**
+ * Visual appearance of the picker.
+ *
+ * - `'menu'` — Compact button that opens a popup/dropdown on tap.
+ *   Cross-platform default.
+ * - `'wheel'` — Scrollable rotor UI that's always visible inline.
+ *   iOS only; on Android and web this falls back to the platform's default dropdown.
+ */
+export type PickerAppearance = 'wheel' | 'menu';
+
+/**
+ * Props for the [`Picker.Item`](#pickeritem) component.
+ * A data-only marker used to declare options inside a [`Picker`](#picker).
+ */
+export interface PickerItemProps<T extends PickerItemValue = PickerItemValue> {
+  /**
+   * Display text for this option.
+   */
+  label: string;
+
+  /**
+   * Value passed to `onValueChange` when this option is selected.
+   */
+  value: T;
+}
+
+/**
+ * Props for the [`Picker`](#picker) component, a single-selection input.
+ */
+export interface PickerProps<T extends PickerItemValue = PickerItemValue> {
+  /**
+   * The currently selected value.
+   * Must match the `value` of one of the `<Picker.Item>` children.
+   */
+  selectedValue: T;
+
+  /**
+   * Called when the user selects an option.
+   */
+  onValueChange: (value: T) => void;
+
+  /**
+   * Visual appearance of the picker.
+   * See [`PickerAppearance`](#pickerappearance).
+   * @default 'menu'
+   */
+  appearance?: PickerAppearance;
+
+  /**
+   * Whether the picker accepts input.
+   * @default true
+   */
+  enabled?: boolean;
+
+  /**
+   * `<Picker.Item>` children that declare the available options.
+   */
+  children?: ReactNode;
+
+  /**
+   * Identifier used to locate the component in end-to-end tests.
+   */
+  testID?: string;
+}
+
+/**
+ * Internal: extracted item data from `<Picker.Item>` children.
+ */
+export interface ExtractedPickerItem<T extends PickerItemValue = PickerItemValue> {
+  label: string;
+  value: T;
+}

package/src/universal/RNHostView/index.android.tsx

@@ -0,0 +1,33 @@
+import { RNHostView as ComposeRNHostView } from '@expo/ui/jetpack-compose';
+
+import { transformToModifiers } from '../transformStyle';
+import type { RNHostViewProps } from './types';
+
+/**
+ * Hosts React Native views inside Jetpack Compose views.
+ */
+export function RNHostView({
+  children,
+  matchContents,
+  style,
+  onAppear,
+  onDisappear,
+  disabled,
+  hidden,
+  testID,
+  modifiers: extraModifiers,
+}: RNHostViewProps) {
+  const modifiers = transformToModifiers(
+    style,
+    { onAppear, onDisappear, disabled, hidden, testID },
+    extraModifiers
+  );
+
+  return (
+    <ComposeRNHostView matchContents={matchContents} modifiers={modifiers}>
+      {children}
+    </ComposeRNHostView>
+  );
+}
+
+export * from './types';

package/src/universal/RNHostView/index.ios.tsx

@@ -0,0 +1,12 @@
+import { RNHostView as SwiftUIRNHostView } from '@expo/ui/swift-ui';
+
+import type { RNHostViewProps } from './types';
+
+/**
+ * Hosts React Native views inside SwiftUI views.
+ */
+export function RNHostView({ children, matchContents }: RNHostViewProps) {
+  return <SwiftUIRNHostView matchContents={matchContents}>{children}</SwiftUIRNHostView>;
+}
+
+export * from './types';

package/src/universal/RNHostView/index.tsx

@@ -0,0 +1,39 @@
+import { StyleSheet, View } from 'react-native';
+
+import type { RNHostViewProps } from './types';
+import { useUniversalLifecycle } from '../hooks';
+
+const styles = StyleSheet.create({
+  fillParent: { width: '100%', height: '100%' },
+  matchContents: { width: 'fit-content', height: 'fit-content' },
+  hidden: { display: 'none' },
+});
+
+/**
+ * Hosts React Native views inside Jetpack Compose or SwiftUI views.
+ */
+export function RNHostView({
+  children,
+  style,
+  onAppear,
+  onDisappear,
+  hidden = false,
+  testID,
+  matchContents = false,
+}: RNHostViewProps) {
+  useUniversalLifecycle(onAppear, onDisappear);
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        matchContents ? styles.matchContents : styles.fillParent,
+        style,
+        hidden && styles.hidden,
+      ]}>
+      {children}
+    </View>
+  );
+}
+
+export * from './types';

package/src/universal/RNHostView/types.ts

@@ -0,0 +1,25 @@
+import type { ReactElement } from 'react';
+
+import type { UniversalBaseProps } from '../types';
+
+/**
+ * Props for the [`RNHostView`](#rnhostview) component.
+ */
+export interface RNHostViewProps extends UniversalBaseProps {
+  /**
+   * When `true`, the host updates its size in the native view tree to match
+   * the children's size. When `false`, the host uses the size of the parent
+   * native view.
+   *
+   * Can only be set once on mount; changing it remounts the component.
+   * @default false
+   * @platform android
+   * @platform ios
+   */
+  matchContents?: boolean;
+
+  /**
+   * The React Native view to host.
+   */
+  children: ReactElement;
+}

package/src/universal/Switch/index.tsx

@@ -1,4 +1,4 @@
-import { Switch as RNSwitch, View, Text, StyleSheet } from 'react-native';
+import { Switch as RNSwitch, View, Text, StyleSheet, useColorScheme } from 'react-native';
 
 import type { SwitchProps } from './types';
 
@@ -12,16 +12,21 @@ const styles = StyleSheet.create({
   disabled: {
     opacity: 0.5,
   },
+  darkText: {
+    color: '#fff',
+  },
 });
 
 /**
  * A toggle control that switches between on and off states.
  */
 export function Switch({ value, onValueChange, label, disabled = false, testID }: SwitchProps) {
+  const isDark = useColorScheme() === 'dark';
+
   if (label) {
     return (
       <View style={[styles.view, disabled && styles.disabled]}>
-        <Text>{label}</Text>
+        <Text style={isDark && styles.darkText}>{label}</Text>
         <RNSwitch value={value} onValueChange={onValueChange} disabled={disabled} testID={testID} />
       </View>
     );

package/src/universal/TextInput/index.tsx

@@ -1,9 +1,13 @@
 import { useImperativeHandle, useRef } from 'react';
-import { TextInput as RNTextInput } from 'react-native';
+import { TextInput as RNTextInput, StyleSheet, useColorScheme } from 'react-native';
 
 import { useNativeState } from '../State';
 import type { TextInputProps } from './types';
 
+const styles = StyleSheet.create({
+  darkInput: { color: '#fff' },
+});
+
 export function TextInput({
   ref,
   value,
@@ -41,6 +45,7 @@ export function TextInput({
   onSelectionChange,
   selectTextOnFocus,
 }: TextInputProps) {
+  const isDark = useColorScheme() === 'dark';
   const initialFallbackRef = useRef(defaultValue ?? '');
   const fallback = useNativeState<string>(initialFallbackRef.current);
   const state = value ?? fallback;
@@ -93,7 +98,12 @@ export function TextInput({
       returnKeyType={returnKeyType}
       enterKeyHint={enterKeyHint}
       cursorColor={cursorColor}
-      style={[style, textStyle, textAlign && textAlign !== 'auto' ? { textAlign } : null]}
+      style={[
+        isDark && styles.darkInput,
+        style,
+        textStyle,
+        textAlign && textAlign !== 'auto' ? { textAlign } : null,
+      ]}
       onSubmitEditing={onSubmitEditing ? (e) => onSubmitEditing(e.nativeEvent.text) : undefined}
       onFocus={onFocus ? () => onFocus() : undefined}
       onBlur={onBlur ? () => onBlur() : undefined}

package/src/universal/index.ts

@@ -8,8 +8,13 @@ export * from './Switch';
 export * from './Slider';
 export * from './Checkbox';
 export * from './BottomSheet';
+export * from './Collapsible';
 export * from './FieldGroup';
 export * from './Icon';
+export * from './List';
+export * from './ListItem';
+export * from './Picker';
+export * from './RNHostView';
 export * from './Spacer';
 export * from './State';
 export { TextInput, type TextInputProps, type TextInputRef } from './TextInput';

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8-sources.jar.md5

@@ -1 +0,0 @@
-7f944d9b9a5ef111622ffba70c2e3dce

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8-sources.jar.sha1

@@ -1 +0,0 @@
-fed75afc6bc0231fa3cf65ec40bfbbbec4ee7203

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8-sources.jar.sha256

@@ -1 +0,0 @@
-23ba3e9f955c4fbbc30d2d18e007b303692c56ab229f64092e2a21417c7b6fb3

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8-sources.jar.sha512

@@ -1 +0,0 @@
-8e7857cfe9376c2a4fdda8902bdaa2c516b53b38366623f8b474f2dc518b39d7988490e8ef011302ec9443d0e60823ba61dadc4b2a2a836e0c576ee81ab817c8

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.aar.md5

@@ -1 +0,0 @@
-7d65df12a162b1158d8d3b62582b8ce9

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.aar.sha1

@@ -1 +0,0 @@
-2d7e475d6bf490db454783e814b6d7bdf3a3656a

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.aar.sha256

@@ -1 +0,0 @@
-16d55d07ff8c3287a906b606ab76bf0e2757895d0cf7777a97588daed1804943

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.aar.sha512

@@ -1 +0,0 @@
-8111a057a0454d1b10993b2fa75487a3c81d9a991aea915c827f4be17e240bac8114a7e3f7d4403302f97f68e255a52d3348f1cc83529dcba5bcb31b67295542

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.module.md5

@@ -1 +0,0 @@
-2ed0dabca454aed6a93eaaf5149b9688

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.module.sha1

@@ -1 +0,0 @@
-03025ed3157b46b01ba571a909f21eac4feb3a7e

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.module.sha256

@@ -1 +0,0 @@
-ab31c528b625bc59841826409dd7bb7cdbc0d5f409ff8dcb190880cec1c1d986

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.module.sha512

@@ -1 +0,0 @@
-e559c715dcb00aa217865d1b2633bc4f317bfef47174d2ee9234d17e31869732a44099f5c73d66d93218315e30a1a1249f1198f21b41c1adf25381cbc64b31f1

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.pom.md5

@@ -1 +0,0 @@
-67b190dc510cd26d89740fe8532bc2ba

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.pom.sha1

@@ -1 +0,0 @@
-a8b115099ec51743ae12b97d7b21cc1d3f91f8ae

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.pom.sha256

@@ -1 +0,0 @@
-bb1b7c427fd33b05ff5660ecd4d87f5c8c657c22196d808b5c5cb7d5cad63ce2

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.8/expo.modules.ui-56.0.8.pom.sha512

@@ -1 +0,0 @@
-1014f718571005419a686ac582920962ece0cbca9e308306868688a483a99935ce2f34ad1f08130f08dc36decf7787e3886bf79848d9409818fd1398d4ec4c17

package/src/community/bottom-sheet/CLAUDE.md

@@ -1,55 +0,0 @@
-# `@expo/ui/community/bottom-sheet`
-
-Drop-in replacement for `@gorhom/bottom-sheet` using native platform bottom sheets.
-
-## Architecture
-
-```
-index.tsx              Barrel exports, BottomSheetModal wrapper, BottomSheetView (flex stripping)
-context.tsx            Shared BottomSheetContext (methods) + BottomSheetInternalContext (fitToContents)
-types.ts               gorhom-compatible type definitions with @remarks TSDoc
-BottomSheet.ios.tsx    SwiftUI .sheet() + presentationDetents
-BottomSheet.android.tsx Material3 ModalBottomSheet + expand()/partialExpand()
-BottomSheet.tsx        vaul drawer (web default)
-```
-
-### Platform implementations
-
-- **iOS**: Wraps `swift-ui/BottomSheet` + `Group` (presentation modifiers) + `RNHostView`. Two-state pattern (`isMounted`/`isPresented`) for animated close — `isPresented→false` triggers native dismiss animation, then `onIsPresentedChange` fires to unmount. When `fitToContents` is active, `presentationDetents` modifier is skipped so native `fitToContents` measures content height.
-
-- **Android**: Wraps `jetpack-compose/ModalBottomSheet` + `RNHostView`. Native module exposes `hide()`, `expand()`, `partialExpand()` on `ModalBottomSheetView`. Only 2 snap states: partial (~50%) and expanded. `snapToIndex(0)` calls `partialExpand()`, `snapToIndex(lastIndex)` calls `expand()`. Uses `isOpenRef` to avoid stale closures in the stable `methods` object.
-
-- **Web**: Uses [vaul](https://github.com/emilkowalski/vaul) (Radix Dialog-based drawer). Controlled via `open` prop — always mounted, vaul handles open/close animation. Snap point heights controlled via CSS `height` + `transition` on the content div (vaul's own snap system doesn't work well with controlled `open`). `fitToContents` always true on web — `BottomSheetView` strips `flex` styles so vaul measures content naturally.
-
-### Native bridge pattern
-
-Each native platform follows: `Host matchContents` → native sheet → `RNHostView` → `View` → children.
-- `Host`: bridges React Native → native (SwiftUI/Compose)
-- `RNHostView`: bridges native → React Native (embeds RN views inside native sheet)
-- `matchContents`: when `fitToContents`, RNHostView reports natural content height instead of filling available space
-
-### Callback refs pattern
-
-All three platforms use `useRef` for `onChange`/`onClose`/`onDismiss` callbacks to keep `useMemo`/`useCallback` closures stable. Without this, parent re-renders (from callback invocations) would recreate the `methods` object, destabilizing context consumers and causing native view re-renders. The `fireCloseCallbacks` helper deduplicates close logic.
-
-## BottomSheet vs BottomSheetModal
-
-`BottomSheet` defaults `index={0}` (open on mount). `BottomSheetModal` is a wrapper in `index.tsx` that forces `index={-1}` (closed) and overrides `present()` to open at the target snap index. Both share the same platform component underneath.
-
-TypeScript declaration merging (`const BottomSheet` + `type BottomSheet`) allows `useRef<BottomSheet>` and `useRef<BottomSheetModal>` to resolve to `BottomSheetMethods` without a separate type import.
-
-## BottomSheetView flex stripping
-
-When `fitToContents` is active (no snap points), `BottomSheetView` strips `flex`/`flexGrow`/`flexShrink`/`flexBasis` from its style via `BottomSheetInternalContext`. This is needed because gorhom examples always use `<BottomSheetView style={{ flex: 1 }}>`, but `flex: 1` reports zero intrinsic height — breaking native `fitToContents` measurement which needs the content's natural height.
-
-## What's NOT supported
-
-- `BottomSheetBackdrop`, `BottomSheetHandle`, `BottomSheetFooter` (not exported — native/vaul handles these)
-- `animatedIndex` / `animatedPosition` shared values
-- Custom handle/backdrop/background component rendering (only show/hide control)
-- `BottomSheetVirtualizedList`, `BottomSheetFlashList`, `BottomSheetDraggableView`
-- Combining `enableDynamicSizing` with explicit `snapPoints` (native iOS `fitToContents` and `presentationDetents` are mutually exclusive)
-
-## TSDoc convention
-
-Every prop that differs from `@gorhom/bottom-sheet` behavior has a `@remarks` tag. No-op props include: "This prop is accepted for API compatibility but has no effect."