@expo/ui 55.0.2 → 55.0.3

package/src/jetpack-compose/Switch/index.tsx

@@ -1,15 +1,14 @@
 import { requireNativeView } from 'expo';
 import { NativeSyntheticEvent, type ColorValue } from 'react-native';
 
-import { ExpoModifier } from '../../types';
+import { type ModifierConfig } from '../../types';
 import { ExpoUIModule } from '../ExpoUIModule';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
-// @docsMissing
 /**
- * Only for switch.
+ * Colors for switch core elements.
  */
-type SwitchElementColors = {
+export type SwitchColors = {
   checkedThumbColor?: ColorValue;
   checkedTrackColor?: ColorValue;
   checkedBorderColor?: ColorValue;
@@ -28,89 +27,38 @@ type SwitchElementColors = {
   disabledUncheckedIconColor?: ColorValue;
 };
 
-// @docsMissing
-/**
- * Only for checkbox.
- */
-type CheckboxElementColors = {
-  checkedColor?: ColorValue;
-  disabledCheckedColor?: ColorValue;
-  uncheckedColor?: ColorValue;
-  disabledUncheckedColor?: ColorValue;
-  checkmarkColor?: ColorValue;
-  disabledIndeterminateColor?: ColorValue;
-};
-
 export type SwitchProps = {
   /**
    * Indicates whether the switch is checked.
    */
   value: boolean;
-  /**
-   * Label for the switch.
-   *
-   * > On Android, the label has an effect only when the `Switch` is used inside a `ContextMenu`.
-   */
-  label?: string;
-
-  /**
-   * Type of the switch component. Can be `'checkbox'`, `'switch'`, or `'button'`.
-   * @default 'switch'
-   */
-  variant?: 'checkbox' | 'switch' | 'button';
   /**
    * Whether the switch is enabled.
    * @default true
-   * @platform android
    */
   enabled?: boolean;
   /**
    * Callback function that is called when the checked state changes.
    */
-  onValueChange?: (value: boolean) => void;
-
+  onCheckedChange?: (value: boolean) => void;
   /**
-   * Picker color.
+   * Colors for switch core elements.
    */
-  color?: ColorValue;
-
+  colors?: SwitchColors;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
-
+  modifiers?: ModifierConfig[];
   /**
    * Children containing ThumbContent slot.
    * @platform android
    */
   children?: React.ReactNode;
-} & (SwitchSwitchVariantProps | SwitchCheckboxVariantProps | SwitchButtonVariantProps);
-
-export type SwitchSwitchVariantProps = {
-  variant?: 'switch';
-  /**
-   * Colors for switch's core elements.
-   * @platform android
-   */
-  elementColors?: SwitchElementColors;
-};
-
-export type SwitchCheckboxVariantProps = {
-  variant: 'checkbox';
-  /**
-   * Colors for checkbox core elements.
-   * @platform android
-   */
-  elementColors?: CheckboxElementColors;
 };
 
-export type SwitchButtonVariantProps = {
-  variant: 'button';
-  elementColors?: undefined;
-};
-
-type NativeSwitchProps = Omit<SwitchProps, 'onValueChange'> & {
-  onValueChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
+type NativeSwitchProps = Omit<SwitchProps, 'onCheckedChange' | 'children'> & {
+  children?: React.ReactNode;
+  onCheckedChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
 };
 
 type NativeSlotViewProps = {
@@ -140,39 +88,21 @@ export function SwitchThumbContent(props: ThumbContentProps) {
   return <SlotNativeView slotName="thumbContent">{props.children}</SlotNativeView>;
 }
 
-function getElementColors(props: SwitchProps) {
-  if (props.variant === 'button') {
-    return undefined;
-  }
-  if (!props.elementColors) {
-    if (props.variant === 'switch') {
-      return {
-        checkedTrackColor: props.color,
-      };
-    } else {
-      return {
-        checkedColor: props.color,
-      };
-    }
-  }
-  return props.elementColors;
-}
-
 function transformSwitchProps(props: SwitchProps): Omit<NativeSwitchProps, 'children'> {
-  const { modifiers, children, ...restProps } = props;
+  const { modifiers, children, onCheckedChange, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    variant: props.variant ?? 'switch',
-    elementColors: getElementColors(props),
-    color: props.color,
-    onValueChange: ({ nativeEvent: { value } }) => {
-      props?.onValueChange?.(value);
+    onCheckedChange: ({ nativeEvent: { value } }) => {
+      onCheckedChange?.(value);
     },
-  } as Omit<NativeSwitchProps, 'children'>;
+  };
 }
 
+/**
+ * A switch component.
+ */
 function SwitchComponent(props: SwitchProps) {
   return <SwitchNativeView {...transformSwitchProps(props)}>{props.children}</SwitchNativeView>;
 }

package/src/jetpack-compose/ToggleButton/index.tsx

@@ -1,83 +1,107 @@
 import { requireNativeView } from 'expo';
 import { type ColorValue } from 'react-native';
 
-import { type ExpoModifier, type ViewEvent } from '../../types';
+import type { ModifierConfig, ViewEvent } from '../../types';
 import { ExpoUIModule } from '../ExpoUIModule';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+/**
+ * Colors for toggle button elements.
+ */
+export type ToggleButtonColors = {
+  containerColor?: ColorValue;
+  contentColor?: ColorValue;
+  checkedContainerColor?: ColorValue;
+  checkedContentColor?: ColorValue;
+  disabledContainerColor?: ColorValue;
+  disabledContentColor?: ColorValue;
+};
+
 export type ToggleButtonProps = {
   /**
    * Whether the toggle button is checked.
    */
   checked: boolean;
   /**
-   * Text to display in the button.
-   */
-  text?: string;
-  /**
-   * The variant of the toggle button.
-   * - `'default'` - Material 3 ToggleButton
-   * - `'icon'` - Icon toggle button
-   * - `'filledIcon'` - Filled icon toggle button
-   * - `'outlinedIcon'` - Outlined icon toggle button
-   * @default 'default'
-   */
-  variant?: 'default' | 'icon' | 'filledIcon' | 'outlinedIcon';
-  /**
-   * The color of the toggle button when checked.
+   * Callback that is called when the checked state changes.
    */
-  color?: ColorValue;
+  onCheckedChange?: (checked: boolean) => void;
   /**
-   * Whether the button is disabled.
+   * Whether the button is enabled for user interaction.
+   * @default true
    */
-  disabled?: boolean;
+  enabled?: boolean;
   /**
-   * Callback that is called when the checked state changes.
+   * Colors for toggle button elements.
    */
-  onCheckedChange?: (checked: boolean) => void;
+  colors?: ToggleButtonColors;
   /**
    * Modifiers for the component.
    */
-  modifiers?: ExpoModifier[];
-
+  modifiers?: ModifierConfig[];
   /**
-   * The content to display inside the toggle button.
+   * Content to display inside the toggle button.
    */
-  children?: React.ReactNode;
+  children: React.ReactNode;
 };
 
-type NativeToggleButtonProps = Omit<ToggleButtonProps, 'onCheckedChange'> &
-  ViewEvent<'onCheckedChange', { checked: boolean }>;
-
-const ToggleButtonNativeView: React.ComponentType<NativeToggleButtonProps> = requireNativeView(
-  'ExpoUI',
-  'ToggleButtonView'
-);
+type NativeToggleButtonProps = Omit<ToggleButtonProps, 'onCheckedChange' | 'children'> & {
+  children?: React.ReactNode;
+} & ViewEvent<'onCheckedChange', { checked: boolean }>;
 
-function transformProps(props: ToggleButtonProps): Omit<NativeToggleButtonProps, 'children'> {
-  const { modifiers, onCheckedChange, children, ...restProps } = props;
+/**
+ * @hidden
+ */
+export function transformToggleButtonProps(
+  props: Omit<ToggleButtonProps, 'children'>
+): NativeToggleButtonProps {
+  const { onCheckedChange, modifiers, ...restProps } = props;
   return {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
+    enabled: props.enabled ?? true,
     onCheckedChange: onCheckedChange
       ? ({ nativeEvent: { checked } }) => onCheckedChange(checked)
       : undefined,
   };
 }
+
+function createToggleButtonComponent(name: string) {
+  const NativeView: React.ComponentType<NativeToggleButtonProps> = requireNativeView(
+    'ExpoUI',
+    name
+  );
+
+  function Component(props: ToggleButtonProps) {
+    const { children, ...restProps } = props;
+    return <NativeView {...transformToggleButtonProps(restProps)}>{children}</NativeView>;
+  }
+  Component.displayName = name;
+  return Component;
+}
+
 /**
  * A toggle button component that can be toggled on and off.
- *
- * When `text` prop is provided, it displays the text.
- * Otherwise, custom children can be passed to render custom content.
  */
-function ToggleButton(props: ToggleButtonProps) {
-  const { children } = props;
+const ToggleButton = Object.assign(createToggleButtonComponent('ToggleButton'), {
+  DefaultIconSpacing: ExpoUIModule.ToggleButtonIconSpacing as number,
+  DefaultIconSize: ExpoUIModule.ToggleButtonIconSize as number,
+});
 
-  return <ToggleButtonNativeView {...transformProps(props)}>{children}</ToggleButtonNativeView>;
-}
+/**
+ * An icon toggle button with no background.
+ */
+const IconToggleButton = createToggleButtonComponent('IconToggleButton');
 
-ToggleButton.DefaultIconSpacing = ExpoUIModule.ToggleButtonIconSpacing;
-ToggleButton.DefaultIconSize = ExpoUIModule.ToggleButtonIconSize;
+/**
+ * A filled icon toggle button with a solid background.
+ */
+const FilledIconToggleButton = createToggleButtonComponent('FilledIconToggleButton');
+
+/**
+ * An outlined icon toggle button with a border and no fill.
+ */
+const OutlinedIconToggleButton = createToggleButtonComponent('OutlinedIconToggleButton');
 
-export { ToggleButton };
+export { ToggleButton, IconToggleButton, FilledIconToggleButton, OutlinedIconToggleButton };

package/src/jetpack-compose/index.ts

@@ -3,24 +3,23 @@ import './MaterialSymbolsAssetsTransformer.fx';
 export * from './AlertDialog';
 export * from './BasicAlertDialog';
 export * from './Card';
+export * from './Checkbox';
 export * from './Chip';
-export * from './FilterChip';
 export * from './Button';
 export * from './Icon';
 export * from './IconButton';
-export * from './ContextMenu';
+export * from './DropdownMenu';
 export * from './Divider';
 export * from './Host';
 export * from './LazyColumn';
 export * from './ListItem';
 export * from './RNHostView';
 export * from './DatePicker';
-export * from './Picker';
+export * from './SegmentedButton';
 export * from './Progress';
 export * from './Slider';
 export * from './Spacer';
 export * from './Switch';
-export * from './TextButton';
 export * from './TextInput';
 export * from './ToggleButton';
 export * from './Shape';
@@ -29,11 +28,13 @@ export * from './Carousel';
 export * from './SearchBar';
 export * from './DockedSearchBar';
 export * from './HorizontalFloatingToolbar';
+export * from './FloatingActionButton';
 export * from './PullToRefreshBox';
 export * from './RadioButton';
 export * from './Surface';
 export * from './Text';
 
+export * from './AnimatedVisibility';
 export * from './Box';
 export * from './Row';
 export * from './Column';

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

@@ -262,9 +262,33 @@ export const clickable = (handler: () => void, options?: { indication?: boolean
  * Makes the view selectable, like a radio button row.
  * @param selected - Whether the item is currently selected.
  * @param handler - Function to call when the item is clicked.
+ * @param role - Optional semantic role for accessibility: 'radioButton', 'checkbox', 'switch', or 'tab'.
  */
-export const selectable = (selected: boolean, handler: () => void) =>
-  createModifierWithEventListener('selectable', handler, { selected });
+export const selectable = (
+  selected: boolean,
+  handler: () => void,
+  role?: 'radioButton' | 'checkbox' | 'switch' | 'tab'
+) => createModifierWithEventListener('selectable', handler, { selected, role });
+
+/**
+ * Marks a column/row as a selectable group for accessibility.
+ * Screen readers will treat the children as a group of selectable items.
+ */
+export const selectableGroup = () => createModifier('selectableGroup');
+
+/**
+ * Makes the view toggleable with accessibility semantics.
+ * Use this to make a row containing a checkbox or switch tappable as a whole.
+ * @param value - The current toggle state.
+ * @param handler - Function to call when toggled.
+ * @param options - Optional configuration.
+ * @param options.role - The semantic role for accessibility: `'checkbox'`, `'radioButton'`, `'switch'`, or `'tab'`.
+ */
+export const toggleable = (
+  value: boolean,
+  handler: () => void,
+  options?: { role?: 'checkbox' | 'radioButton' | 'switch' | 'tab' }
+) => createModifierWithEventListener('toggleable', handler, { value, role: options?.role });
 
 // =============================================================================
 // Utility Modifiers

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

@@ -1,9 +1,7 @@
 import { requireNativeView } from 'expo';
 
 import { createViewModifierEventListener } from '../modifiers/utils';
-import { type CommonViewModifierProps } from '../types';
-
-export type ClosedRangeDate = { lower: Date; upper: Date };
+import { type ClosedRangeDate, type CommonViewModifierProps } from '../types';
 
 export type ProgressViewProps = {
   /**

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

@@ -10,9 +10,9 @@ export type StepperProps = {
    */
   label: string;
   /**
-   * The initial/default value of the stepper.
+   * The current value of the stepper.
    */
-  defaultValue?: number;
+  value?: number;
   /**
    * The step value for increment/decrement operations.
    */
@@ -28,11 +28,11 @@ export type StepperProps = {
   /**
    * Called when the stepper value changes.
    */
-  onValueChanged: (value: number) => void;
+  onValueChange: (value: number) => void;
 } & CommonViewModifierProps;
 
-type NativeStepperProps = Omit<StepperProps, 'onValueChanged'> &
-  ViewEvent<'onValueChanged', { value: number }>;
+type NativeStepperProps = Omit<StepperProps, 'onValueChange'> &
+  ViewEvent<'onValueChange', { value: number }>;
 
 const StepperNativeView: React.ComponentType<NativeStepperProps> = requireNativeView(
   'ExpoUI',
@@ -45,8 +45,8 @@ function transformStepperProps(props: StepperProps): NativeStepperProps {
     modifiers,
     ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
     ...restProps,
-    onValueChanged: ({ nativeEvent: { value } }) => {
-      props.onValueChanged(value);
+    onValueChange: ({ nativeEvent: { value } }) => {
+      props.onValueChange(value);
     },
   };
 }

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

@@ -2,7 +2,12 @@ import { requireNativeView } from 'expo';
 import * as React from 'react';
 
 import { createViewModifierEventListener } from '../modifiers/utils';
-import { type CommonViewModifierProps } from '../types';
+import { type ClosedRangeDate, type CommonViewModifierProps } from '../types';
+
+/**
+ * The style used to format a date in a SwiftUI `Text` view.
+ */
+export type TextDateStyle = 'timer' | 'relative' | 'offset' | 'date' | 'time';
 
 export interface TextProps extends CommonViewModifierProps {
   /**
@@ -14,12 +19,50 @@ export interface TextProps extends CommonViewModifierProps {
    * Enables Markdown formatting for the text content using SwiftUI LocalizedStringKey.
    */
   markdownEnabled?: boolean;
+
+  /**
+   * A date to display using the specified `dateStyle`. The text auto-updates as time passes.
+   */
+  date?: Date;
+
+  /**
+   * The style used to format the `date` prop.
+   * @default 'date'
+   */
+  dateStyle?: TextDateStyle;
+
+  /**
+   * A time interval to display as a live-updating timer.
+   * @platform ios 16.0+
+   * @platform tvos 16.0+
+   */
+  timerInterval?: ClosedRangeDate;
+
+  /**
+   * Whether the timer counts down (`true`) or up (`false`).
+   * @default true
+   * @platform ios 16.0+
+   * @platform tvos 16.0+
+   */
+  countsDown?: boolean;
+
+  /**
+   * A date at which the timer should appear paused.
+   * @platform ios 16.0+
+   * @platform tvos 16.0+
+   */
+  pauseTime?: Date;
 }
 
 type NativeTextProps = CommonViewModifierProps & {
   text?: string;
   children?: React.ReactNode;
   markdownEnabled?: boolean;
+  date?: number;
+  dateStyle?: TextDateStyle;
+  timerInterval?: { lower: number; upper: number };
+  countsDown?: boolean;
+  pauseTime?: number;
 };
 
 const TextNativeView: React.ComponentType<NativeTextProps> = requireNativeView(
@@ -28,7 +71,28 @@ const TextNativeView: React.ComponentType<NativeTextProps> = requireNativeView(
 );
 
 export function Text(props: TextProps) {
-  const { children, modifiers, ...restProps } = props;
+  const { children, modifiers, date, timerInterval, pauseTime, ...restProps } = props;
+
+  // Date/timer mode: pass converted timestamps to native, ignore children
+  if (date != null || timerInterval != null) {
+    return (
+      <TextNativeView
+        modifiers={modifiers}
+        {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+        {...restProps}
+        date={date ? date.getTime() : undefined}
+        timerInterval={
+          timerInterval
+            ? {
+                lower: timerInterval.lower.getTime(),
+                upper: timerInterval.upper.getTime(),
+              }
+            : undefined
+        }
+        pauseTime={pauseTime ? pauseTime.getTime() : undefined}
+      />
+    );
+  }
 
   if (children === undefined || children === null) {
     return null;

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

@@ -567,6 +567,44 @@ export const scrollDismissesKeyboard = (
 export const scrollDisabled = (disabled: boolean = true) =>
   createModifier('scrollDisabled', { disabled });
 
+type UnitPointValue =
+  | 'zero'
+  | 'topLeading'
+  | 'top'
+  | 'topTrailing'
+  | 'leading'
+  | 'center'
+  | 'trailing'
+  | 'bottomLeading'
+  | 'bottom'
+  | 'bottomTrailing';
+
+/**
+ * Sets the default anchor point for a scroll view's content.
+ * @param anchor - The anchor point for initial scroll position and content size changes, or `null` to reset.
+ * @platform ios 17.0+
+ * @platform tvos 17.0+
+ * @platform macos 14.0+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/defaultscrollanchor(_:)).
+ */
+export const defaultScrollAnchor = (anchor: UnitPointValue | null) =>
+  createModifier('defaultScrollAnchor', { anchor });
+
+/**
+ * Sets the default anchor point for a scroll view for a specific role.
+ * Pass `null` to opt out of a specific role while keeping anchors for other roles.
+ * @param anchor - The anchor point, or `null` to opt out of this role.
+ * @param role - The scroll anchor role: `'initialOffset'`, `'sizeChanges'`, or `'alignment'`.
+ * @platform ios 18.0+
+ * @platform tvos 18.0+
+ * @platform macos 15.0+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/defaultscrollanchor(_:for:)).
+ */
+export const defaultScrollAnchorForRole = (
+  anchor: UnitPointValue | null,
+  role: 'initialOffset' | 'sizeChanges' | 'alignment'
+) => createModifier('defaultScrollAnchorForRole', { anchor, role });
+
 /**
  * Disables the move action for a view in a list.
  * Apply to items within a `ForEach` to prevent them from being moved.
@@ -1097,6 +1135,8 @@ export type BuiltInModifier =
   | ReturnType<typeof containerRelativeFrame>
   | ReturnType<typeof scrollContentBackground>
   | ReturnType<typeof scrollDisabled>
+  | ReturnType<typeof defaultScrollAnchor>
+  | ReturnType<typeof defaultScrollAnchorForRole>
   | ReturnType<typeof moveDisabled>
   | ReturnType<typeof deleteDisabled>
   | ReturnType<typeof environment>

package/src/swift-ui/types.ts

@@ -73,6 +73,11 @@ export interface PaddingProps {
   trailing?: number;
 }
 
+/**
+ * A closed date range with lower and upper bounds.
+ */
+export type ClosedRangeDate = { lower: Date; upper: Date };
+
 /**
  * Common props that can be applied to any view.
  */

package/android/src/main/java/expo/modules/ui/FilterChipView.kt

@@ -1,59 +0,0 @@
-package expo.modules.ui
-
-import androidx.compose.material3.FilterChip
-import androidx.compose.material3.FilterChipDefaults
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import expo.modules.kotlin.records.Record
-import expo.modules.kotlin.views.ComposableScope
-import expo.modules.kotlin.views.ComposeProps
-import expo.modules.kotlin.views.FunctionalComposableScope
-import java.io.Serializable
-
-open class FilterChipPressedEvent : Record, Serializable
-
-data class FilterChipProps(
-  val selected: Boolean = false,
-  val label: String = "",
-  val enabled: Boolean = true,
-  val modifiers: ModifierList = emptyList()
-) : ComposeProps
-
-@Composable
-fun FunctionalComposableScope.FilterChipContent(
-  props: FilterChipProps,
-  onPress: (FilterChipPressedEvent) -> Unit
-) {
-  val modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
-
-  val leadingIconSlotView = findChildSlotView(view, "leadingIcon")
-  val trailingIconSlotView = findChildSlotView(view, "trailingIcon")
-
-  FilterChip(
-    selected = props.selected,
-    onClick = { onPress(FilterChipPressedEvent()) },
-    label = { Text(props.label) },
-    enabled = props.enabled,
-    leadingIcon = leadingIconSlotView?.let {
-      {
-        with(ComposableScope()) {
-          with(it) {
-            Content()
-          }
-        }
-      }
-    },
-    trailingIcon = trailingIconSlotView?.let {
-      {
-        with(ComposableScope()) {
-          with(it) {
-            Content()
-          }
-        }
-      }
-    },
-    colors = FilterChipDefaults.filterChipColors(),
-    border = FilterChipDefaults.filterChipBorder(enabled = props.enabled, selected = props.selected),
-    modifier = modifier
-  )
-}