@expo/ui 56.0.15 → 56.0.17

package/src/jetpack-compose/TextField/{index.tsx → shared.ts}

@@ -1,17 +1,13 @@
-import { requireNativeView } from 'expo';
-import type { Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import type { ColorValue } from 'react-native';
 
 import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
 import type { ModifierConfig, ViewEvent } from '../../types';
-import { parseJSXShape, type ShapeJSXElement, type ShapeRecordProps } from '../Shape';
-import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-// region Types
-
 /**
- * Can be used for imperatively focusing and setting text/selection on the `TextField` component.
+ * Can be used for imperatively focusing and setting text/selection on the
+ * `TextField`, `OutlinedTextField`, and `BasicTextField` components.
  */
 export type TextFieldRef = {
   setText: (newText: string) => Promise<void>;
@@ -76,56 +72,37 @@ export type TextFieldKeyboardActions = {
 };
 
 /**
- * Colors for `TextField` and `OutlinedTextField`.
- * Maps to `TextFieldColors` in Compose, shared by both variants.
+ * Text styling for a text field's content. Maps to Compose's `TextStyle`.
+ * Shared by `TextField`, `OutlinedTextField`, and `BasicTextField`.
  */
-export type TextFieldColors = {
-  focusedTextColor?: ColorValue;
-  unfocusedTextColor?: ColorValue;
-  disabledTextColor?: ColorValue;
-  errorTextColor?: ColorValue;
-  focusedContainerColor?: ColorValue;
-  unfocusedContainerColor?: ColorValue;
-  disabledContainerColor?: ColorValue;
-  errorContainerColor?: ColorValue;
-  cursorColor?: ColorValue;
-  errorCursorColor?: ColorValue;
-  focusedIndicatorColor?: ColorValue;
-  unfocusedIndicatorColor?: ColorValue;
-  disabledIndicatorColor?: ColorValue;
-  errorIndicatorColor?: ColorValue;
-  focusedLeadingIconColor?: ColorValue;
-  unfocusedLeadingIconColor?: ColorValue;
-  disabledLeadingIconColor?: ColorValue;
-  errorLeadingIconColor?: ColorValue;
-  focusedTrailingIconColor?: ColorValue;
-  unfocusedTrailingIconColor?: ColorValue;
-  disabledTrailingIconColor?: ColorValue;
-  errorTrailingIconColor?: ColorValue;
-  focusedLabelColor?: ColorValue;
-  unfocusedLabelColor?: ColorValue;
-  disabledLabelColor?: ColorValue;
-  errorLabelColor?: ColorValue;
-  focusedPlaceholderColor?: ColorValue;
-  unfocusedPlaceholderColor?: ColorValue;
-  disabledPlaceholderColor?: ColorValue;
-  errorPlaceholderColor?: ColorValue;
-  focusedSupportingTextColor?: ColorValue;
-  unfocusedSupportingTextColor?: ColorValue;
-  disabledSupportingTextColor?: ColorValue;
-  errorSupportingTextColor?: ColorValue;
-  focusedPrefixColor?: ColorValue;
-  unfocusedPrefixColor?: ColorValue;
-  disabledPrefixColor?: ColorValue;
-  errorPrefixColor?: ColorValue;
-  focusedSuffixColor?: ColorValue;
-  unfocusedSuffixColor?: ColorValue;
-  disabledSuffixColor?: ColorValue;
-  errorSuffixColor?: ColorValue;
+export type TextFieldTextStyle = {
+  textAlign?: 'left' | 'right' | 'center' | 'justify';
+  color?: ColorValue;
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?:
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | 'normal'
+    | 'bold';
+  lineHeight?: number;
+  letterSpacing?: number;
 };
 
-/** Shared props between `TextField` and `OutlinedTextField`. */
-type BaseTextFieldProps = {
+/**
+ * Props shared by every Compose text field variant — `TextField`,
+ * `OutlinedTextField`, and `BasicTextField`. The Material variants add their
+ * own decoration props (`isError`, `shape`, `colors`, slot children);
+ * `BasicTextField` adds `cursorColor`.
+ */
+export type CommonTextFieldProperties = {
   ref?: Ref<TextFieldRef>;
   /**
    * An observable state that holds the current text value. Create one with
@@ -140,8 +117,6 @@ type BaseTextFieldProps = {
   /** @default false */
   readOnly?: boolean;
   /** @default false */
-  isError?: boolean;
-  /** @default false */
   singleLine?: boolean;
   maxLines?: number;
   minLines?: number;
@@ -151,17 +126,6 @@ type BaseTextFieldProps = {
    */
   visualTransformation?: 'password' | 'none';
 
-  /**
-   * Selection-related colors. Maps to Compose's `TextSelectionColors` via
-   * `LocalTextSelectionColors`. `handleColor` controls the drag handles;
-   * `backgroundColor` is the highlighted-text background (typically the same
-   * tint at lower alpha so the underlying text stays readable).
-   */
-  textSelectionColors?: {
-    handleColor?: ColorValue;
-    backgroundColor?: ColorValue;
-  };
-
   /**
    * Observable state holding the current selection range. Create with
    * `useNativeState({ start: 0, end: 0 })`. The field writes user-driven
@@ -178,28 +142,21 @@ type BaseTextFieldProps = {
   onSelectionChange?: (selection: { start: number; end: number }) => void;
 
   /**
-   * Text styling for the field's content. Maps to Compose's `TextStyle`.
+   * Selection-related colors. Maps to Compose's `TextSelectionColors` via
+   * `LocalTextSelectionColors`. `handleColor` controls the drag handles (and
+   * the caret's drag handle); `backgroundColor` is the highlighted-text
+   * background (typically the same tint at lower alpha so the underlying text
+   * stays readable). Independent of `cursorColor`, which tints the caret line.
    */
-  textStyle?: {
-    textAlign?: 'left' | 'right' | 'center' | 'justify';
-    color?: ColorValue;
-    fontSize?: number;
-    fontFamily?: string;
-    fontWeight?:
-      | '100'
-      | '200'
-      | '300'
-      | '400'
-      | '500'
-      | '600'
-      | '700'
-      | '800'
-      | '900'
-      | 'normal'
-      | 'bold';
-    lineHeight?: number;
-    letterSpacing?: number;
+  textSelectionColors?: {
+    handleColor?: ColorValue;
+    backgroundColor?: ColorValue;
   };
+
+  /**
+   * Text styling for the field's content. Maps to Compose's `TextStyle`.
+   */
+  textStyle?: TextFieldTextStyle;
   keyboardOptions?: TextFieldKeyboardOptions;
   keyboardActions?: TextFieldKeyboardActions;
   /**
@@ -211,44 +168,35 @@ type BaseTextFieldProps = {
   onValueChange?: (value: string) => void;
   /** A callback triggered when the field gains or loses focus. */
   onFocusChanged?: (focused: boolean) => void;
-  /**
-   * Shape used for the field's container outline/fill. Use the helpers from
-   * `Shape` (for example, `<Shape.Pill />` or `<Shape.RoundedCorner cornerRadii={...} />`).
-   * Defaults to the Material `OutlinedTextFieldDefaults.shape`/`TextFieldDefaults.shape`.
-   */
-  shape?: ShapeJSXElement;
   modifiers?: ModifierConfig[];
-  /** Slot children (e.g. `TextField.Label`, `TextField.Placeholder`). */
-  children?: React.ReactNode;
-};
-
-export type TextFieldProps = BaseTextFieldProps & {
-  colors?: TextFieldColors;
-};
-
-export type OutlinedTextFieldProps = BaseTextFieldProps & {
-  colors?: TextFieldColors;
+  /** Slot children that configure the field's decoration. */
+  children?: ReactNode;
 };
 
-// endregion Types
+// region Native transform
 
-// region Native
-
-type NativeTextFieldProps = Omit<
-  BaseTextFieldProps,
+/**
+ * Keys consumed (and reshaped) by {@link useCommonTextFieldProps}. Everything
+ * else on the props passes through untouched.
+ */
+type TransformedKeys =
   | 'value'
   | 'selection'
+  | 'modifiers'
+  | 'children'
+  | 'keyboardActions'
   | 'onValueChange'
   | 'onFocusChanged'
-  | 'onSelectionChange'
-  | 'keyboardActions'
-  | 'children'
-  | 'shape'
-> & {
-  variant: 'filled' | 'outlined';
-  colors?: TextFieldColors;
-  shape?: ShapeRecordProps;
-  children?: React.ReactNode;
+  | 'onSelectionChange';
+
+/**
+ * Native-facing prop shape shared by every Compose text field variant. The
+ * observable-backed props collapse to shared-object ids, and the public
+ * callbacks become `nativeEvent`-wrapped listeners.
+ */
+export type CommonNativeTextFieldProps = {
+  modifiers?: ModifierConfig[];
+  children?: ReactNode;
   value?: number | null;
   selection?: number | null;
   onValueChangeSync?: number | null;
@@ -257,15 +205,9 @@ type NativeTextFieldProps = Omit<
   ViewEvent<'onSelectionChange', { start: number; end: number }> &
   ViewEvent<'onKeyboardAction', { action: string; value: string }>;
 
-const TextFieldNativeView: React.ComponentType<NativeTextFieldProps> = requireNativeView(
-  'ExpoUI',
-  'TextFieldView'
-);
-
-function useTransformedProps(
-  props: TextFieldProps | OutlinedTextFieldProps,
-  variant: 'filled' | 'outlined'
-): NativeTextFieldProps {
+export function useCommonTextFieldProps<T extends CommonTextFieldProperties>(
+  props: T
+): CommonNativeTextFieldProps & Omit<T, TransformedKeys> {
   const {
     value,
     selection,
@@ -275,19 +217,16 @@ function useTransformedProps(
     onValueChange,
     onFocusChanged,
     onSelectionChange,
-    shape,
-    ...restProps
+    ...rest
   } = props;
 
   const isWorklet = !!onValueChange && !!worklets?.isWorkletFunction?.(onValueChange);
   const workletCallback = useWorkletProp(isWorklet ? onValueChange : undefined, 'onValueChange');
 
   return {
+    ...rest,
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-    variant,
-    shape: parseJSXShape(shape),
     children,
     value: getStateId(value),
     selection: getStateId(selection),
@@ -315,75 +254,4 @@ function useTransformedProps(
   };
 }
 
-// endregion Native
-
-// region Slot components
-
-function Label(props: { children: React.ReactNode }) {
-  return <Slot slotName="label">{props.children}</Slot>;
-}
-
-function Placeholder(props: { children: React.ReactNode }) {
-  return <Slot slotName="placeholder">{props.children}</Slot>;
-}
-
-function LeadingIcon(props: { children: React.ReactNode }) {
-  return <Slot slotName="leadingIcon">{props.children}</Slot>;
-}
-
-function TrailingIcon(props: { children: React.ReactNode }) {
-  return <Slot slotName="trailingIcon">{props.children}</Slot>;
-}
-
-function Prefix(props: { children: React.ReactNode }) {
-  return <Slot slotName="prefix">{props.children}</Slot>;
-}
-
-function Suffix(props: { children: React.ReactNode }) {
-  return <Slot slotName="suffix">{props.children}</Slot>;
-}
-
-function SupportingText(props: { children: React.ReactNode }) {
-  return <Slot slotName="supportingText">{props.children}</Slot>;
-}
-
-// endregion Slot components
-
-// region Components
-
-/**
- * A Material3 `TextField`.
- */
-function TextFieldComponent(props: TextFieldProps) {
-  return <TextFieldNativeView {...useTransformedProps(props, 'filled')} />;
-}
-
-TextFieldComponent.Label = Label;
-TextFieldComponent.Placeholder = Placeholder;
-TextFieldComponent.LeadingIcon = LeadingIcon;
-TextFieldComponent.TrailingIcon = TrailingIcon;
-TextFieldComponent.Prefix = Prefix;
-TextFieldComponent.Suffix = Suffix;
-TextFieldComponent.SupportingText = SupportingText;
-
-/**
- * A Material3 `OutlinedTextField` with a transparent background and border outline.
- */
-function OutlinedTextFieldComponent(props: OutlinedTextFieldProps) {
-  return <TextFieldNativeView {...useTransformedProps(props, 'outlined')} />;
-}
-
-OutlinedTextFieldComponent.Label = Label;
-OutlinedTextFieldComponent.Placeholder = Placeholder;
-OutlinedTextFieldComponent.LeadingIcon = LeadingIcon;
-OutlinedTextFieldComponent.TrailingIcon = TrailingIcon;
-OutlinedTextFieldComponent.Prefix = Prefix;
-OutlinedTextFieldComponent.Suffix = Suffix;
-OutlinedTextFieldComponent.SupportingText = SupportingText;
-
-// endregion Components
-
-export { TextFieldComponent as TextField, OutlinedTextFieldComponent as OutlinedTextField };
-
-// Exported for docs api data
-export { type ObservableState };
+// endregion Native transform

package/src/jetpack-compose/index.ts

@@ -29,7 +29,11 @@ export * from './SyncSwitch';
 export {
   TextField,
   OutlinedTextField,
+  BasicTextField,
   type TextFieldProps,
+  type OutlinedTextFieldProps,
+  type BasicTextFieldProps,
+  type BasicTextFieldRef,
   type TextFieldRef,
   type TextFieldCapitalization,
   type TextFieldImeAction,
@@ -37,10 +41,13 @@ export {
   type TextFieldKeyboardType,
   type TextFieldKeyboardActions,
   type TextFieldColors,
+  type TextFieldTextStyle,
+  type CommonTextFieldProperties,
 } from './TextField';
 export * from './ToggleButton';
 export * from './Shape';
 export * from './ModalBottomSheet';
+export * from './NavigationBar';
 export * from './Carousel';
 export {
   HorizontalPager,

package/src/jetpack-compose/modifiers/index.ts

@@ -163,6 +163,42 @@ export const border = (borderWidth: number, borderColor: ColorValue) =>
  */
 export const shadow = (elevation: number) => createModifier('shadow', { elevation });
 
+/**
+ * Options for the `dropShadow` and `innerShadow` modifiers.
+ */
+export type ShadowConfig = {
+  /** Blur radius of the shadow in dp. */
+  radius?: number;
+  /** Amount to expand (positive) or contract (negative) the shadow geometry in dp. */
+  spread?: number;
+  /** Shadow color string (hex). Defaults to black. */
+  color?: ColorValue;
+  /** Horizontal offset of the shadow in dp. */
+  offsetX?: number;
+  /** Vertical offset of the shadow in dp. */
+  offsetY?: number;
+  /** Shadow opacity, from 0.0 to 1.0. */
+  alpha?: number;
+};
+
+/**
+ * Draws a shadow behind the view with control over the blur radius, spread, offset, and color. Unlike
+ * `shadow`, it does not require an elevation value.
+ * @param shape - The shape of the shadow, for example `Shapes.RoundedCorner(16)` or `Shapes.Circle`.
+ * @param config - Options that control the shadow's appearance.
+ */
+export const dropShadow = (shape: BuiltinShape, config: ShadowConfig = {}) =>
+  createModifier('dropShadow', { shape, ...config });
+
+/**
+ * Draws a shadow inside the view to create an inset effect. The view's `background` must come before
+ * this modifier for the shadow to render.
+ * @param shape - The shape of the shadow, for example `Shapes.RoundedCorner(16)` or `Shapes.Circle`.
+ * @param config - Options that control the shadow's appearance.
+ */
+export const innerShadow = (shape: BuiltinShape, config: ShadowConfig = {}) =>
+  createModifier('innerShadow', { shape, ...config });
+
 /**
  * Sets the opacity/alpha of the view.
  * @param alpha - Opacity value (0.0 to 1.0).
@@ -384,6 +420,19 @@ export const onSizeChanged = (handler: (size: { width: number; height: number })
     handler(size)
   );
 
+/**
+ * Calls the handler whenever the composable is positioned, with its position and size.
+ * `x` and `y` are relative to the window. All values are in dp.
+ * @param handler - Function called with the new layout.
+ */
+export const onGloballyPositioned = (
+  handler: (layout: { x: number; y: number; width: number; height: number }) => void
+) =>
+  createModifierWithEventListener(
+    'onGloballyPositioned',
+    (layout: { x: number; y: number; width: number; height: number }) => handler(layout)
+  );
+
 // =============================================================================
 // Utility Modifiers
 // =============================================================================

package/src/swift-ui/BottomSheet/index.tsx

@@ -1,6 +1,6 @@
 import { requireNativeView } from 'expo';
 import { useState, type ComponentType } from 'react';
-import type { NativeSyntheticEvent } from 'react-native';
+import { type NativeSyntheticEvent } from 'react-native';
 
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';

package/src/swift-ui/DisclosureGroup/index.tsx

@@ -1,11 +1,15 @@
 import { requireNativeView } from 'expo';
 
 import { type ViewEvent } from '../../types';
+import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
 export interface DisclosureGroupProps extends CommonViewModifierProps {
-  label: string;
+  /**
+   * Text label for the disclosure group. Use `DisclosureGroup.Label` for custom label content.
+   */
+  label?: string;
   children: React.ReactNode;
   /**
    * Controls whether the disclosure group is expanded.
@@ -25,7 +29,11 @@ type NativeDisclosureGroupProps = Omit<DisclosureGroupProps, 'onIsExpandedChange
 const DisclosureGroupNativeView: React.ComponentType<NativeDisclosureGroupProps> =
   requireNativeView('ExpoUI', 'DisclosureGroupView');
 
-export function DisclosureGroup(props: DisclosureGroupProps) {
+function Label({ children }: { children: React.ReactNode }) {
+  return <Slot name="label">{children}</Slot>;
+}
+
+function DisclosureGroupComponent(props: DisclosureGroupProps) {
   const { onIsExpandedChange, modifiers, ...rest } = props;
 
   function handleStateChange(event: { nativeEvent: { isExpanded: boolean } }) {
@@ -40,3 +48,7 @@ export function DisclosureGroup(props: DisclosureGroupProps) {
 
   return <DisclosureGroupNativeView {...transformedProps} onIsExpandedChange={handleStateChange} />;
 }
+
+DisclosureGroupComponent.Label = Label;
+
+export { DisclosureGroupComponent as DisclosureGroup };

package/src/swift-ui/Image/index.tsx

@@ -3,6 +3,7 @@ import type { ColorValue } from 'react-native';
 import type { SFSymbol } from 'sf-symbols-typescript';
 
 import type { ViewEvent } from '../../types';
+import { font, foregroundStyle } from '../modifiers';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import type { CommonViewModifierProps } from '../types';
 
@@ -12,6 +13,10 @@ export interface ImageProps extends CommonViewModifierProps {
    * For example: 'photo', 'heart.fill', 'star.circle'
    */
   systemName?: SFSymbol;
+  /**
+   * The asset catalog name of a custom SF Symbol imported as a symbol set.
+   */
+  assetName?: string;
   /**
    * The URI of the local image file to display.
    * For example: 'file:///path/to/image.jpg'
@@ -19,7 +24,9 @@ export interface ImageProps extends CommonViewModifierProps {
    */
   uiImage?: string;
   /**
-   * The size of the system image.
+   * The fixed size of the system image in points. Does not scale with Dynamic
+   * Type. Use the `font` modifier with `textStyle` for that. Ignored when a
+   * `font` modifier is supplied.
    */
   size?: number;
   /**
@@ -49,9 +56,15 @@ type TapEvent = ViewEvent<'onTap', object> & {
 type NativeImageProps = Omit<ImageProps, 'onPress'> | TapEvent;
 
 function transformNativeProps(props: ImageProps): NativeImageProps {
-  const { onPress, modifiers, ...restProps } = props;
+  const { onPress, modifiers, size, color, ...restProps } = props;
+  const hasFontModifier = modifiers?.some((modifier) => modifier.$type === 'font');
+  const allModifiers = [
+    ...(modifiers ?? []),
+    ...(hasFontModifier ? [] : [font({ size: size ?? 24 })]),
+    ...(color != null ? [foregroundStyle(color)] : []),
+  ];
   return {
-    modifiers,
+    modifiers: allModifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
     ...(onPress ? { useTapGesture: true, onTap: () => onPress() } : null),

package/src/swift-ui/Label/index.tsx

@@ -23,6 +23,12 @@ export type LabelProps = {
    */
   icon?: React.ReactNode;
 
+  /**
+   * Custom title view. Accepts any React node (for example, a `VStack` with title and subtitle).
+   * When provided, this takes precedence over `title`.
+   */
+  children?: React.ReactNode;
+
   /**
    * The color of the label icon.
    * @deprecated Use `foregroundStyle` modifier instead.
@@ -40,12 +46,13 @@ const LabelNativeView: React.ComponentType<LabelProps & { children?: React.React
  * @returns {JSX.Element} The rendered native Label component.
  */
 export function Label(props: LabelProps) {
-  const { modifiers, icon, ...restProps } = props;
+  const { modifiers, icon, children, ...restProps } = props;
   return (
     <LabelNativeView
       modifiers={modifiers}
       {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
       {...restProps}>
+      {children && <Slot name="title">{children}</Slot>}
       {icon && <Slot name="icon">{icon}</Slot>}
     </LabelNativeView>
   );