@expo/ui 55.0.1 → 55.0.3

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/index.tsx

@@ -1,9 +1,11 @@
+export * from './AccessoryWidgetBackground';
 export * from './BottomSheet';
 export * from './Button';
 export * from './Chart';
 export * from './ColorPicker';
 export * from './ContentUnavailableView';
 export * from './ConfirmationDialog';
+export * from './ControlGroup';
 export * from './ContextMenu';
 export * from './DatePicker';
 export * from './Divider';

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

@@ -238,6 +238,24 @@ export const scaleEffect = (scale: number | { x: number; y: number }) =>
  */
 export const rotationEffect = (angle: number) => createModifier('rotationEffect', { angle });
 
+/**
+ * Applies a 3D rotation transformation.
+ * @param params - The rotation parameters: `angle` (in degrees), `axis` (x, y, z), and `perspective`.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/rotation3deffect(_:axis:anchor:anchorz:perspective:)).
+ */
+export const rotation3DEffect = (params: {
+  angle: number;
+  axis?: { x?: number; y?: number; z?: number };
+  perspective?: number;
+}) =>
+  createModifier('rotation3DEffect', {
+    angle: params.angle,
+    axisX: params.axis?.x ?? 0,
+    axisY: params.axis?.y ?? 0,
+    axisZ: params.axis?.z ?? 0,
+    perspective: params.perspective ?? 1,
+  });
+
 /**
  * Applies an offset (translation) to a view.
  * @param params - The offset parameters: `x` and `y`.
@@ -549,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.
@@ -984,6 +1040,31 @@ export const listStyle = (style: ListStyle) => createModifier('listStyle', { sty
  */
 export const luminanceToAlpha = () => createModifier('luminanceToAlpha', {});
 
+/**
+ * Sets the mode by which SwiftUI resizes an image to fit its space.
+ * @param capInsets - Inset values that indicate a portion of the image that SwiftUI doesn’t resize.
+ * @param resizingMode - The mode by which SwiftUI resizes the image.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/image/resizable(capinsets:resizingmode:)).
+ */
+export const resizable = (
+  capInsets?: {
+    top?: number;
+    bottom?: number;
+    leading?: number;
+    trailing?: number;
+  },
+  resizingMode?: 'stretch' | 'tile'
+) => createModifier('resizable', { ...capInsets, resizingMode });
+
+/**
+ * Specifies the how to render an Image when using the WidgetKit/WidgetRenderingMode/accented mode.
+ * @param renderingMode - A constant describing how the Image should be rendered.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/image/widgetaccentedrenderingmode(_:)).
+ */
+export const widgetAccentedRenderingMode = (
+  renderingMode: 'fullColor' | 'accented' | 'desaturated' | 'accentedDesaturated'
+) => createModifier('widgetAccentedRenderingMode', { renderingMode });
+
 // =============================================================================
 // Type Definitions
 // =============================================================================
@@ -1012,6 +1093,7 @@ export type BuiltInModifier =
   | ReturnType<typeof border>
   | ReturnType<typeof scaleEffect>
   | ReturnType<typeof rotationEffect>
+  | ReturnType<typeof rotation3DEffect>
   | ReturnType<typeof offset>
   | ReturnType<typeof foregroundColor>
   | ReturnType<typeof foregroundStyle>
@@ -1053,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>
@@ -1083,7 +1167,9 @@ export type BuiltInModifier =
   | ReturnType<typeof progressViewStyle>
   | ReturnType<typeof gaugeStyle>
   | ReturnType<typeof listStyle>
-  | ReturnType<typeof contentTransition>;
+  | ReturnType<typeof contentTransition>
+  | ReturnType<typeof resizable>
+  | ReturnType<typeof widgetAccentedRenderingMode>;
 
 /**
  * Main ViewModifier type that supports both built-in and 3rd party modifiers.

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

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

@@ -1,161 +0,0 @@
-package expo.modules.ui
-
-import android.graphics.Color
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.selection.selectable
-import androidx.compose.foundation.selection.selectableGroup
-import androidx.compose.material3.RadioButton
-import androidx.compose.material3.SegmentedButton
-import androidx.compose.material3.SegmentedButtonDefaults
-import androidx.compose.material3.SingleChoiceSegmentedButtonRow
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.unit.dp
-import expo.modules.kotlin.records.Field
-import expo.modules.kotlin.records.Record
-import expo.modules.kotlin.views.ComposeProps
-import expo.modules.kotlin.views.FunctionalComposableScope
-
-class PickerColors : Record {
-  @Field
-  val activeBorderColor: Color? = null
-
-  @Field
-  val activeContentColor: Color? = null
-
-  @Field
-  val inactiveBorderColor: Color? = null
-
-  @Field
-  val inactiveContentColor: Color? = null
-
-  @Field
-  val disabledActiveBorderColor: Color? = null
-
-  @Field
-  val disabledActiveContentColor: Color? = null
-
-  @Field
-  val disabledInactiveBorderColor: Color? = null
-
-  @Field
-  val disabledInactiveContentColor: Color? = null
-
-  @Field
-  val activeContainerColor: Color? = null
-
-  @Field
-  val inactiveContainerColor: Color? = null
-
-  @Field
-  val disabledActiveContainerColor: Color? = null
-
-  @Field
-  val disabledInactiveContainerColor: Color? = null
-}
-
-data class PickerProps(
-  val options: Array<String> = emptyArray(),
-  val selectedIndex: Int? = null,
-  val elementColors: PickerColors = PickerColors(),
-  val variant: String = "segmented",
-  val buttonModifiers: List<ModifierType> = emptyList(),
-  val modifiers: ModifierList = emptyList()
-) : ComposeProps
-
-data class PickerOptionSelectedEvent(
-  @Field val index: Int,
-  @Field val label: String
-) : Record
-
-@Composable
-fun FunctionalComposableScope.PickerContent(
-  props: PickerProps,
-  onOptionSelected: (PickerOptionSelectedEvent) -> Unit
-) {
-  val selectedIndex = props.selectedIndex
-  val options = props.options
-  val colors = props.elementColors
-  val variant = props.variant
-
-  @Composable
-  fun SegmentedComposable() {
-    SingleChoiceSegmentedButtonRow(
-      modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
-    ) {
-      options.forEachIndexed { index, label ->
-        SegmentedButton(
-          shape = SegmentedButtonDefaults.itemShape(
-            index = index,
-            count = options.size
-          ),
-          onClick = {
-            onOptionSelected(PickerOptionSelectedEvent(index, label))
-          },
-          modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher),
-          selected = index == selectedIndex,
-          label = { Text(label) },
-          colors = SegmentedButtonDefaults.colors(
-            activeBorderColor = colors.activeBorderColor.compose,
-            activeContentColor = colors.activeContentColor.compose,
-            inactiveBorderColor = colors.inactiveBorderColor.compose,
-            inactiveContentColor = colors.inactiveContentColor.compose,
-            disabledActiveBorderColor = colors.disabledActiveBorderColor.compose,
-            disabledActiveContentColor = colors.disabledActiveContentColor.compose,
-            disabledInactiveBorderColor = colors.disabledInactiveBorderColor.compose,
-            disabledInactiveContentColor = colors.disabledInactiveContentColor.compose,
-            activeContainerColor = colors.activeContainerColor.compose,
-            inactiveContainerColor = colors.inactiveContainerColor.compose,
-            disabledActiveContainerColor = colors.disabledActiveContainerColor.compose,
-            disabledInactiveContainerColor = colors.disabledInactiveContainerColor.compose
-          )
-        )
-      }
-    }
-  }
-
-  @Composable
-  fun RadioComposable() {
-    Column(Modifier.selectableGroup()) {
-      options.forEachIndexed { index, label ->
-        Row(
-          Modifier.fillMaxWidth()
-            .height(28.dp)
-            .selectable(
-              selected = index == selectedIndex,
-              onClick = {
-                onOptionSelected(PickerOptionSelectedEvent(index, label))
-              },
-              role = Role.RadioButton
-            ),
-          verticalAlignment = Alignment.CenterVertically
-        ) {
-          RadioButton(
-            selected = index == selectedIndex,
-            onClick = null
-          )
-          Text(
-            text = label,
-            modifier = Modifier.padding(start = 12.dp)
-          )
-        }
-      }
-    }
-  }
-
-  if (variant == "segmented") {
-    SegmentedComposable()
-  } else if (variant == "radio") {
-    RadioComposable()
-  } else {
-    // Default to segmented picker
-    SegmentedComposable()
-  }
-}

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

@@ -1,33 +0,0 @@
-package expo.modules.ui
-
-import android.graphics.Color
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
-import androidx.compose.runtime.Composable
-import expo.modules.kotlin.views.ComposeProps
-import expo.modules.kotlin.views.FunctionalComposableScope
-import expo.modules.ui.button.ButtonPressedEvent
-
-data class TextButtonProps(
-  val text: String = "",
-  val color: Color? = null,
-  val disabled: Boolean = false,
-  val modifiers: ModifierList = emptyList()
-) : ComposeProps
-
-@Composable
-fun FunctionalComposableScope.TextButtonContent(
-  props: TextButtonProps,
-  onButtonPressed: (ButtonPressedEvent) -> Unit
-) {
-  TextButton(
-    onClick = { onButtonPressed(ButtonPressedEvent()) },
-    enabled = !props.disabled,
-    modifier = ModifierRegistry.applyModifiers(props.modifiers, appContext, composableScope, globalEventDispatcher)
-  ) {
-    Text(
-      text = props.text,
-      color = props.color.composeOrNull ?: androidx.compose.ui.graphics.Color.Unspecified
-    )
-  }
-}