@expo/ui 56.0.15 → 56.0.16

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).

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

@@ -12,6 +12,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'

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>
   );

package/src/swift-ui/modifiers/index.ts

@@ -534,6 +534,17 @@ export const buttonStyle = (
     | 'plain'
 ) => createModifier('buttonStyle', { style });
 
+/**
+ * Sets the border shape used by buttons within this view.
+ * @param shape - The button border shape.
+ * @param cornerRadius - Corner radius, only used with `'roundedRectangle'`.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/buttonbordershape(_:)).
+ */
+export const buttonBorderShape = (
+  shape: 'automatic' | 'capsule' | 'roundedRectangle' | 'circle',
+  cornerRadius?: number
+) => createModifier('buttonBorderShape', { shape, cornerRadius });
+
 /**
  * Sets the style for toggles within this view.
  * @param style - The toggle style.
@@ -720,6 +731,29 @@ export const accessibilityHint = (hint: string) => createModifier('accessibility
 export const accessibilityValue = (value: string) =>
   createModifier('accessibilityValue', { value });
 
+/**
+ * Sets an accessibility identifier for the view.
+ *
+ * Unlike `accessibilityLabel`, this value is for UI testing and is not visible
+ * to the user. UI testing tools such as XCUITest read it to locate the view, so
+ * prefer a stable, machine-readable identifier here.
+ * @param identifier - The accessibility identifier used for UI testing.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/accessibilityidentifier(_:)).
+ */
+export const accessibilityIdentifier = (identifier: string) =>
+  createModifier('accessibilityIdentifier', { identifier });
+
+/**
+ * Marks the view as decoratively-named so VoiceOver and other assistive
+ * technologies skip it during element traversal. Useful for hero icons or
+ * presentational imagery that's already described by adjacent text.
+ *
+ * @param hidden - Whether the view should be hidden from accessibility. Defaults to `true`.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/accessibilityhidden(_:)).
+ */
+export const accessibilityHidden = (hidden: boolean = true) =>
+  createModifier('accessibilityHidden', { hidden });
+
 /**
  * Sets layout priority for the view.
  * @param priority - Layout priority value.
@@ -837,6 +871,14 @@ export const listRowSeparator = (
   edges?: 'all' | 'top' | 'bottom'
 ) => createModifier('listRowSeparator', { visibility, edges });
 
+/**
+ * Sets the vertical spacing between adjacent rows in a list.
+ * @param spacing - The spacing value to use. When omitted, the default spacing is used.
+ * @platform ios 15.0+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/listrowspacing(_:)).
+ */
+export const listRowSpacing = (spacing?: number) => createModifier('listRowSpacing', { spacing });
+
 /**
  * Sets the truncation mode for lines of text that are too long to fit in the available space.
  * @param mode - The truncation mode that specifies where to truncate the text within the text view, if needed.
@@ -1038,6 +1080,60 @@ export const font = (params: {
     | 'caption'
     | 'caption2';
 }) => createModifier('font', params);
+/**
+ * A standard size for Dynamic Type, from `xSmall` through the five
+ * `accessibility` sizes. Mirrors SwiftUI's `DynamicTypeSize`.
+ */
+export type DynamicTypeSizeValue =
+  | 'xSmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xLarge'
+  | 'xxLarge'
+  | 'xxxLarge'
+  | 'accessibility1'
+  | 'accessibility2'
+  | 'accessibility3'
+  | 'accessibility4'
+  | 'accessibility5';
+/**
+ * Sets or constrains the Dynamic Type size within the view, overriding the
+ * value inherited from the system.
+ *
+ * Four variants matching SwiftUI's `dynamicTypeSize(_:)`:
+ * - `dynamicTypeSize('large')` — fixes the Dynamic Type size to a single value
+ * - `dynamicTypeSize({ max: 'accessibility3' })` — caps growth at a ceiling (`...accessibility3`)
+ * - `dynamicTypeSize({ min: 'large' })` — sets a floor (`large...`)
+ * - `dynamicTypeSize({ min: 'large', max: 'accessibility3' })` — clamps to a range (`large...accessibility3`)
+ *
+ * `min` and `max` are independent: pass either or both. Set it on a `<Host>` to
+ * cascade the constraint to every descendant through the SwiftUI environment.
+ * Keep `min` at or below `max`, or the range traps natively, like SwiftUI.
+ * Per Apple's guidance, prefer capping at an accessibility size over disabling
+ * Dynamic Type entirely.
+ *
+ * @example
+ * ```tsx
+ * // Cap how large text in a tight layout can grow
+ * <Host modifiers={[dynamicTypeSize({ max: 'accessibility3' })]}>...</Host>
+ * ```
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/dynamictypesize(_:)).
+ */
+export function dynamicTypeSize(size: DynamicTypeSizeValue): ModifierConfig;
+export function dynamicTypeSize(range: {
+  min?: DynamicTypeSizeValue;
+  max?: DynamicTypeSizeValue;
+}): ModifierConfig;
+export function dynamicTypeSize(
+  sizeOrRange: DynamicTypeSizeValue | { min?: DynamicTypeSizeValue; max?: DynamicTypeSizeValue }
+): ModifierConfig {
+  if (typeof sizeOrRange === 'object' && sizeOrRange !== null) {
+    return createModifier('dynamicTypeSize', { min: sizeOrRange.min, max: sizeOrRange.max });
+  }
+  return createModifier('dynamicTypeSize', { size: sizeOrRange });
+}
 /**
  * Asks grid layouts not to offer the view extra size in the specified axes.
  * @param axes - The dimensions in which the grid shouldn’t offer the view a share of any available space. This prevents a flexible view like a Spacer, Divider, or Color from defining the size of a row or column.
@@ -1329,6 +1425,7 @@ export type BuiltInModifier =
   | ReturnType<typeof colorInvert>
   | ReturnType<typeof grayscale>
   | ReturnType<typeof buttonStyle>
+  | ReturnType<typeof buttonBorderShape>
   | ReturnType<typeof toggleStyle>
   | ReturnType<typeof controlSize>
   | ReturnType<typeof labelStyle>
@@ -1338,6 +1435,8 @@ export type BuiltInModifier =
   | ReturnType<typeof accessibilityLabel>
   | ReturnType<typeof accessibilityHint>
   | ReturnType<typeof accessibilityValue>
+  | ReturnType<typeof accessibilityIdentifier>
+  | ReturnType<typeof accessibilityHidden>
   | ReturnType<typeof layoutPriority>
   | ReturnType<typeof mask>
   | ReturnType<typeof overlay>
@@ -1366,6 +1465,7 @@ export type BuiltInModifier =
   | ReturnType<typeof environment>
   | ReturnType<typeof listRowBackground>
   | ReturnType<typeof listRowSeparator>
+  | ReturnType<typeof listRowSpacing>
   | ReturnType<typeof truncationMode>
   | ReturnType<typeof allowsTightening>
   | ReturnType<typeof kerning>
@@ -1383,6 +1483,7 @@ export type BuiltInModifier =
   | ReturnType<typeof badge>
   | ReturnType<typeof listSectionMargins>
   | ReturnType<typeof font>
+  | ReturnType<typeof dynamicTypeSize>
   | ReturnType<typeof gridCellUnsizedAxes>
   | ReturnType<typeof gridCellColumns>
   | ReturnType<typeof gridColumnAlignment>

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

@@ -35,7 +35,13 @@ const EXIT = ExitTransition.shrinkVertically().plus(ExitTransition.fadeOut());
  * Android implementation of `Collapsible`.
  * A rounded M3 card whose container tint fades between `transparent` (collapsed) and `surfaceContainer` (expanded).
  */
-export function Collapsible({ isOpen, onOpenChange, label = '', children }: CollapsibleProps) {
+export function Collapsible({
+  isOpen,
+  onOpenChange,
+  label = '',
+  labelStyle,
+  children,
+}: CollapsibleProps) {
   const colors = useMaterialColors();
   const containerColor = isOpen ? colors.surfaceContainer : 'transparent';
 
@@ -51,7 +57,9 @@ export function Collapsible({ isOpen, onOpenChange, label = '', children }: Coll
         colors={{ containerColor: 'transparent' }}
         modifiers={[clickable(() => onOpenChange(!isOpen))]}>
         <ListItem.HeadlineContent>
-          <Text>{label}</Text>
+          <Text color={labelStyle?.color} style={labelStyle}>
+            {label}
+          </Text>
         </ListItem.HeadlineContent>
         <ListItem.TrailingContent>
           <Icon

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

@@ -1,13 +1,27 @@
-import { DisclosureGroup } from '@expo/ui/swift-ui';
+import { DisclosureGroup, Text } from '@expo/ui/swift-ui';
 
+import { transformToModifiers } from '../transformStyle';
 import type { CollapsibleProps } from './types';
 
 /**
  * iOS implementation of `Collapsible`. Wraps SwiftUI's `DisclosureGroup`.
  */
-export function Collapsible({ isOpen, onOpenChange, label = '', children }: CollapsibleProps) {
+export function Collapsible({
+  isOpen,
+  onOpenChange,
+  label = '',
+  labelStyle,
+  children,
+}: CollapsibleProps) {
+  const labelTextModifiers = labelStyle
+    ? transformToModifiers(undefined, {}, undefined, { textStyle: labelStyle })
+    : undefined;
+
   return (
-    <DisclosureGroup label={label} isExpanded={isOpen} onIsExpandedChange={onOpenChange}>
+    <DisclosureGroup isExpanded={isOpen} onIsExpandedChange={onOpenChange}>
+      <DisclosureGroup.Label>
+        <Text modifiers={labelTextModifiers}>{label}</Text>
+      </DisclosureGroup.Label>
       {children}
     </DisclosureGroup>
   );

package/src/universal/Collapsible/index.tsx

@@ -23,7 +23,13 @@ const Summary = (
  * A primitive that toggles visibility of its content via a labelled tappable
  * header. Controlled via `isOpen` + `onOpenChange`.
  */
-export function Collapsible({ isOpen, onOpenChange, label = '', children }: CollapsibleProps) {
+export function Collapsible({
+  isOpen,
+  onOpenChange,
+  label = '',
+  labelStyle,
+  children,
+}: CollapsibleProps) {
   const isDark = useColorScheme() === 'dark';
 
   return (
@@ -37,7 +43,7 @@ export function Collapsible({ isOpen, onOpenChange, label = '', children }: Coll
       }}
       style={[styles.container, isDark && styles.darkText]}>
       <Summary style={styles.summary}>
-        <Text style={isDark && styles.darkText}>{label}</Text>
+        <Text style={[isDark && styles.darkText, labelStyle]}>{label}</Text>
       </Summary>
       <View style={styles.content}>{children}</View>
     </Details>

package/src/universal/Collapsible/types.ts

@@ -1,3 +1,5 @@
+import type { UniversalTextStyle } from '../Text/types';
+
 /**
  * Props for the [`Collapsible`](#collapsible) component, a primitive that
  * shows or hides its content with a tap on a labelled header.
@@ -18,6 +20,11 @@ export interface CollapsibleProps {
    */
   label?: string;
 
+  /**
+   * Text-specific styling for the tappable header label.
+   */
+  labelStyle?: UniversalTextStyle;
+
   /**
    * Content rendered when `isOpen` is `true`.
    */

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

@@ -7,6 +7,7 @@ import {
   useNativeState,
 } from '@expo/ui/jetpack-compose';
 import {
+  fillMaxWidth,
   onSizeChanged,
   semantics,
   testID as testIDModifier,
@@ -96,6 +97,8 @@ export function TextInput({
   const numberOfLines = numberOfLinesProp ?? rows;
   const keyboardType = keyboardTypeProp ?? inputModeToKeyboardType(inputMode);
   const returnKeyType = returnKeyTypeProp ?? enterKeyHintToReturnKeyType(enterKeyHint);
+  const { backgroundColor: styleBackgroundColor, ...boxStyle } = style ?? {};
+  const hideIndicator = boxStyle.borderWidth === 0 && underlineColorAndroid == null;
 
   const initialFallbackRef = useRef(defaultValue ?? '');
   const fallback = useNativeState<string>(initialFallbackRef.current);
@@ -157,7 +160,7 @@ export function TextInput({
       ref={innerRef}
       modifiers={[
         ...(userModifiers ?? []),
-        ...transformToModifiers(style, {}),
+        ...transformToModifiers(boxStyle, {}),
         ...(testID ? [testIDModifier(testID)] : []),
         ...(autoComplete ? [semantics({ contentType: autoComplete })] : []),
         ...(onContentSizeChange ? [onSizeChanged(onContentSizeChange)] : []),
@@ -169,19 +172,39 @@ export function TextInput({
       maxLines={multiline && numberOfLines && numberOfLines > 0 ? numberOfLines : undefined}
       minLines={multiline && numberOfLines && numberOfLines > 0 ? numberOfLines : undefined}
       colors={
-        caretHidden || cursorColor || underlineColorAndroid || placeholderTextColor
+        caretHidden ||
+        cursorColor ||
+        underlineColorAndroid ||
+        placeholderTextColor ||
+        styleBackgroundColor ||
+        hideIndicator
           ? {
               ...(caretHidden
                 ? { cursorColor: 'transparent' }
                 : cursorColor
                   ? { cursorColor }
                   : null),
+              ...(styleBackgroundColor
+                ? {
+                    focusedContainerColor: styleBackgroundColor,
+                    unfocusedContainerColor: styleBackgroundColor,
+                    disabledContainerColor: styleBackgroundColor,
+                    errorContainerColor: styleBackgroundColor,
+                  }
+                : null),
               ...(underlineColorAndroid
                 ? {
                     unfocusedIndicatorColor: underlineColorAndroid,
                     focusedIndicatorColor: underlineColorAndroid,
                   }
-                : null),
+                : hideIndicator
+                  ? {
+                      focusedIndicatorColor: 'transparent',
+                      unfocusedIndicatorColor: 'transparent',
+                      disabledIndicatorColor: 'transparent',
+                      errorIndicatorColor: 'transparent',
+                    }
+                  : null),
               ...(placeholderTextColor
                 ? {
                     unfocusedPlaceholderColor: placeholderTextColor,
@@ -218,7 +241,11 @@ export function TextInput({
       onSelectionChange={onSelectionChange}>
       {placeholder ? (
         <ComposeTextField.Placeholder>
-          <Text>{placeholder}</Text>
+          <Text
+            modifiers={[fillMaxWidth()]}
+            style={textAlign && textAlign !== 'auto' ? { textAlign } : undefined}>
+            {placeholder}
+          </Text>
         </ComposeTextField.Placeholder>
       ) : null}
     </ComposeTextField>

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

@@ -1 +0,0 @@
-2cf329d52090d6202b7a70c1cb7c2a4b

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

@@ -1 +0,0 @@
-cef9c4c1296a5c70d6a61965cba485c2dd802f47

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

@@ -1 +0,0 @@
-01e5734d4e704ab1ff81ad1651eae63e0c5317dbba712328b1721270d303e0cf

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

@@ -1 +0,0 @@
-ba1daa456b3e0d92466af0c58b5ddd0bdd0a4c5f06c727bf7d34acd69e78c42187295b575199cefa3b2098d59eeb1ab6fcf2463c339fd6af2a186224a14f505d

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

@@ -1 +0,0 @@
-790df1c5a23dc1ac9a8521284af9bc15

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

@@ -1 +0,0 @@
-7100e52679119435cf14936c7a715d729b763e16

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

@@ -1 +0,0 @@
-27c02acb624ed6593fe2380e495a636970bc9033ae9cd00132029c7b8ecf899e

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

@@ -1 +0,0 @@
-b0183591c16d8ba78c2d0e6aad2044b660811a5fb2126302a5f746dff169fc93fd4547d4c73ccf35bfefa083fde9819acbf3bb0fa4f6c80869e0d225880047a2

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

@@ -1 +0,0 @@
-e6bb09e9c4356f9c9879e24e1b133cba

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

@@ -1 +0,0 @@
-31baeb0a70741592621ef9b3fe973a23610a563b

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

@@ -1 +0,0 @@
-c3b3041adb593ed9fc7963db11fd0a71170dc9778d48f0aac09908b9374500b9

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

@@ -1 +0,0 @@
-f91dfa09f2f467b5332f41b2232a9956d8a542f41568d9fe895fca36be7643fcd7c3f8f03e6410dde0abea53ad161499b23a208a5b5277d735b02bc60f4edfdb

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

@@ -1 +0,0 @@
-461d361330d6a24030016012aa6e920c

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

@@ -1 +0,0 @@
-0e241f8a0e32f5849c1879bd3bc73fcade47e375

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

@@ -1 +0,0 @@
-473cf11bc355d074e0289ab7523931ed0868b056d0b0d3aa434d43524ac013f3

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

@@ -1 +0,0 @@
-81d473db58273d5ed4738fe0c68a614d82590d7ef2c68dea746f40c93413f5e63f139faedb9d5afc9fc20dc5f21ae2103fd7933f2f10915fd05e96207681c242