@expo/ui 58.0.13 → 58.0.15

package/src/community/datetime-picker/DateTimePicker.android.tsx

@@ -6,6 +6,7 @@ import {
 } from '../../jetpack-compose/DatePicker';
 import { Host } from '../../jetpack-compose/Host';
 import { buildEvent, buildChangeEvent, type DateTimePickerProps } from './types';
+import { localDateToUtcDayISOString, utcDayToLocalDate } from './utils';
 
 function modeToDisplayedComponents(
   mode: DateTimePickerProps['mode']
@@ -52,6 +53,14 @@ export function DateTimePicker(props: DateTimePickerProps) {
     negativeButton,
   } = props;
 
+  // Material3 date pickers work in UTC days, while `value` and the reported date are local —
+  // matching `@react-native-community/datetimepicker`. Send `value`'s local calendar day as a UTC
+  // day and convert the picked UTC day back, keeping `value`'s time of day. The native side
+  // already converts `minimumDate`/`maximumDate` by their local calendar day. Time pickers read
+  // local hours from the instant, so they take `value` unchanged.
+  const usesDateComponents = mode !== 'time';
+  const initialDate = usesDateComponents ? localDateToUtcDayISOString(value) : value.toISOString();
+
   const onDismissed = () => {
     if (onDismissProp) {
       onDismissProp();
@@ -70,10 +79,11 @@ export function DateTimePicker(props: DateTimePickerProps) {
   };
 
   const onDateSelected = (date: Date) => {
+    const selected = usesDateComponents ? utcDayToLocalDate(date, value) : date;
     if (onValueChange) {
-      onValueChange(buildChangeEvent(date), date);
+      onValueChange(buildChangeEvent(selected), selected);
     } else {
-      onChange?.(buildEvent(date), date);
+      onChange?.(buildEvent(selected), selected);
     }
   };
 
@@ -81,7 +91,7 @@ export function DateTimePicker(props: DateTimePickerProps) {
     minimumDate || maximumDate ? { start: minimumDate, end: maximumDate } : undefined;
 
   const dialogProps = {
-    initialDate: value.toISOString(),
+    initialDate,
     color: accentColor,
     confirmButtonLabel: positiveButton?.label,
     dismissButtonLabel: negativeButton?.label,
@@ -111,7 +121,7 @@ export function DateTimePicker(props: DateTimePickerProps) {
   return (
     <Host matchContents={{ vertical: true }} style={style}>
       <AndroidPicker
-        initialDate={value.toISOString()}
+        initialDate={initialDate}
         displayedComponents={modeToDisplayedComponents(mode)}
         variant={displayToAndroidVariant(display)}
         selectableDates={selectableDates}
@@ -119,6 +129,10 @@ export function DateTimePicker(props: DateTimePickerProps) {
         color={accentColor}
         onDateSelected={onDateSelected}
         showVariantToggle={false}
+        // Match iOS, where the inline picker has no label: hide Material 3's "Select date" title
+        // and its selected-date headline.
+        showTitle={false}
+        showHeadline={false}
         {...(testID ? { testID } : undefined)}
       />
     </Host>

package/src/community/datetime-picker/utils.ts

@@ -0,0 +1,21 @@
+// Material3's DatePicker (and the native side's `toUtcDayMillis` bounds conversion) works in UTC
+// days, while `value`, `minimumDate`, and `maximumDate` are local dates — matching
+// `@react-native-community/datetimepicker`. These helpers convert between the two.
+
+/**
+ * Returns the ISO string of the UTC midnight of `value`'s local calendar day, so Material3 shows
+ * the same day the user sees locally.
+ */
+export function localDateToUtcDayISOString(value: Date): string {
+  return new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate())).toISOString();
+}
+
+/**
+ * Converts the UTC-midnight day reported by Material3 back into a local date, keeping the time of
+ * day from `timeOfDay`.
+ */
+export function utcDayToLocalDate(utcDay: Date, timeOfDay: Date): Date {
+  const result = new Date(timeOfDay);
+  result.setFullYear(utcDay.getUTCFullYear(), utcDay.getUTCMonth(), utcDay.getUTCDate());
+  return result;
+}

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

@@ -131,6 +131,20 @@ export interface DateTimePickerProps {
    * @default true
    */
   showVariantToggle?: boolean;
+  /**
+   * Whether the picker shows its title, such as "Select date". When `false`, the picker passes
+   * `null` to Material 3's `title` slot. This prop has no effect when `displayedComponents` is
+   * `'hourAndMinute'`.
+   * @default true
+   */
+  showTitle?: boolean;
+  /**
+   * Whether the picker shows its headline, which displays the current selection. When `false`,
+   * the picker passes `null` to Material 3's `headline` slot. This prop has no effect when
+   * `displayedComponents` is `'hourAndMinute'`.
+   * @default true
+   */
+  showHeadline?: boolean;
   /**
    * The components that the picker should display.
    * On Android, you can have a picker that selects just the date or just the time.
@@ -252,6 +266,18 @@ export interface DateRangePickerProps {
    * @default true
    */
   showVariantToggle?: boolean;
+  /**
+   * Whether the picker shows its title, such as "Select date". When `false`, the picker passes
+   * `null` to Material 3's `title` slot.
+   * @default true
+   */
+  showTitle?: boolean;
+  /**
+   * Whether the picker shows its headline, which displays the current selection. When `false`,
+   * the picker passes `null` to Material 3's `headline` slot.
+   * @default true
+   */
+  showHeadline?: boolean;
   /**
    * The tint color to use on the picker elements.
    */
@@ -332,6 +358,18 @@ export interface DatePickerDialogProps {
   initialDate?: string | null;
   variant?: AndroidVariant;
   showVariantToggle?: boolean;
+  /**
+   * Whether the picker shows its title, such as "Select date". When `false`, the picker passes
+   * `null` to Material 3's `title` slot.
+   * @default true
+   */
+  showTitle?: boolean;
+  /**
+   * Whether the picker shows its headline, which displays the current selection. When `false`,
+   * the picker passes `null` to Material 3's `headline` slot.
+   * @default true
+   */
+  showHeadline?: boolean;
   confirmButtonLabel?: string;
   dismissButtonLabel?: string;
   color?: ColorValue;

package/src/jetpack-compose/MaterialSymbolsAssetsTransformer.fx.ts

@@ -1,10 +1,14 @@
 import { Image } from 'react-native';
-import type AssetSourceResolver from 'react-native/Libraries/Image/AssetSourceResolver';
+import type { AssetSourceResolver } from 'react-native/unstable-internals-do-not-use';
+
+type AssetResolver = AssetSourceResolver & {
+  asset: { type?: string };
+};
 
 // @ts-expect-error: addCustomSourceTransformer type is not exported
 if (typeof Image.resolveAssetSource.addCustomSourceTransformer === 'function') {
   // @ts-expect-error: addCustomSourceTransformer type is not exported
-  Image.resolveAssetSource.addCustomSourceTransformer((resolver: AssetSourceResolver) => {
+  Image.resolveAssetSource.addCustomSourceTransformer((resolver: AssetResolver) => {
     if (
       process.env.EXPO_OS === 'android' &&
       resolver.asset.type === 'xml' &&

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

@@ -96,6 +96,7 @@ function ToolbarContent(props: ToolbarContentProps) {
  * ```
  *
  * @platform ios
+ * @platform tvos
  */
 export function ToolbarItem({
   placement = 'automatic',
@@ -125,6 +126,7 @@ export function ToolbarItem({
  * ```
  *
  * @platform ios
+ * @platform tvos
  */
 function ToolbarComponent(props: ToolbarProps) {
   const { modifiers, children, ...restProps } = props;

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

@@ -49,7 +49,7 @@ export type HingeChangeHandler = (oldContext: HingeContext, newContext: HingeCon
  * state for interactions and effects, not for layout.
  *
  * Pass a plain function to run it on the JS thread, or a callback from
- * [`useWorkletCallback`](../usenativestate/#useworkletcallback) to run it synchronously on the UI
+ * [`useWorkletCallback`](./usenativestate/#useworkletcallbackcallback) to run it synchronously on the UI
  * thread, which suits driving a native state value from the continuous `angle`.
  *
  * The first call happens when the view appears, and its old context has a `null` hinge. On devices

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

@@ -1999,6 +1999,7 @@ export * from './presentationModifiers';
 export * from './environment';
 export type { ShapeStyle } from './shapeStyle';
 export * from './scrollPosition';
+export * from './searchable';
 export * from './symbolEffect';
 export * from './scrollObservation';
 export * from './hingeObservation';

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

@@ -0,0 +1,107 @@
+import { getStateId, type ObservableState } from '../../State';
+import { createModifier, createModifierWithEventListener } from './createModifier';
+
+/**
+ * The placement of a search field in a view hierarchy.
+ *
+ * - `automatic`: SwiftUI places the search field automatically.
+ * - `toolbar`: The search field appears in the toolbar. Falls back to `automatic` on tvOS.
+ * - `sidebar`: The search field appears in the sidebar of a navigation view. Falls back to
+ *   `automatic` on tvOS.
+ * - `navigationBarDrawer`: The search field appears in the navigation bar. Falls back to
+ *   `automatic` on macOS and tvOS.
+ */
+export type SearchFieldPlacement = 'automatic' | 'toolbar' | 'sidebar' | 'navigationBarDrawer';
+
+/**
+ * Marks this view as searchable, which configures the display of a search field.
+ *
+ * @param text - The text to display and edit in the search field. An `ObservableState<string>`
+ *   created with `useNativeState`.
+ * @param options.placement - The preferred placement of the search field within the containing
+ *   view hierarchy. Defaults to `automatic`.
+ * @param options.prompt - The prompt of the search field, which provides users with guidance on
+ *   what to search for.
+ * @param options.onChange - Fires on the JS thread when the user edits or clears the search field.
+ *   It does not fire for values written from JavaScript.
+ *
+ * @platform ios
+ * @platform tvos
+ * @platform macos
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/searchable(text:placement:prompt:)-18a8f).
+ *
+ * @example
+ * ```tsx
+ * const query = useNativeState('');
+ *
+ * <Host>
+ *   <NavigationStack>
+ *     <List
+ *       modifiers={[
+ *         searchable(query, {
+ *           prompt: 'Search agents',
+ *           onChange: (text) => setFilter(text),
+ *         }),
+ *       ]}>
+ *       {rows.map((row) => (
+ *         <Text key={row.id}>{row.name}</Text>
+ *       ))}
+ *     </List>
+ *   </NavigationStack>
+ * </Host>
+ * ```
+ */
+export const searchable = (
+  text: ObservableState<string>,
+  options?: {
+    placement?: SearchFieldPlacement;
+    prompt?: string;
+    onChange?: (text: string) => void;
+  }
+) => {
+  const params = {
+    text: getStateId(text),
+    placement: options?.placement,
+    prompt: options?.prompt,
+  };
+  const onChange = options?.onChange;
+  if (onChange) {
+    return createModifierWithEventListener(
+      'searchable',
+      (event: { text?: string }) => onChange(event?.text ?? ''),
+      params
+    );
+  }
+  return createModifier('searchable', params);
+};
+
+/**
+ * The behavior of a search field in a toolbar.
+ *
+ * - `automatic`: The automatic behavior.
+ * - `minimize`: A search toolbar behavior that prefers rendering a search field as a button-like
+ *   control. Falls back to `automatic` on macOS and tvOS.
+ */
+export type SearchToolbarBehavior = 'automatic' | 'minimize';
+
+/**
+ * Configures the behavior for search in the toolbar.
+ *
+ * On iOS below 26.0, the modifier is a no-op.
+ *
+ * @param behavior - The search field behavior.
+ *
+ * @platform ios 26.0+
+ * @platform tvos 26.0+
+ * @platform macos 26.0+
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/searchtoolbarbehavior(_:)).
+ *
+ * @example
+ * ```tsx
+ * <List modifiers={[searchable(query), searchToolbarBehavior('minimize')]}>
+ * ```
+ */
+export const searchToolbarBehavior = (behavior: SearchToolbarBehavior) =>
+  createModifier('searchToolbarBehavior', { behavior });

package/build/ts-declarations/react-native-assets.d.ts

@@ -1,31 +0,0 @@
-declare module 'react-native/Libraries/Image/AssetSourceResolver' {
-  import type { PackagerAsset } from 'react-native/asset-registry';
-
-  export type ResolvedAssetSource = {
-    __packager_asset: boolean;
-    width?: number | null;
-    height?: number | null;
-    uri: string;
-    scale: number;
-  };
-
-  export default class AssetSourceResolver {
-    serverUrl: string | null;
-    jsbundleUrl: string | null;
-    asset: PackagerAsset & { fileHashes?: string[] };
-
-    constructor(serverUrl: string | null, jsbundleUrl: string | null, asset: PackagerAsset);
-
-    isLoadedFromServer(): boolean;
-    isLoadedFromFileSystem(): boolean;
-    defaultAsset(): ResolvedAssetSource;
-    assetServerURL(): ResolvedAssetSource;
-    scaledAssetPath(): ResolvedAssetSource;
-    scaledAssetURLNearBundle(): ResolvedAssetSource;
-    resourceIdentifierWithoutScale(): ResolvedAssetSource;
-    drawableFolderInBundle(): ResolvedAssetSource;
-    fromSource(source: string): ResolvedAssetSource;
-
-    static pickScale(scales: number[], deviceScale: number): number;
-  }
-}

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

@@ -1 +0,0 @@
-041ed0d6d536bbcf8d08e7a653bea8ef

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

@@ -1 +0,0 @@
-e587fcde7f1c58c339f95759565034f989a49dcf

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

@@ -1 +0,0 @@
-eee15e7c9f3aeb7b3941ead7ce0e72d8174b0b95964c69ef5a1d5fbf02536fbe

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

@@ -1 +0,0 @@
-3e6c99d1b6aa74d01d30339d222653a631dae2abf99075e4c25fc171fbb33f9d55bca7daee4d1cd4c6ecdcdc89fb71067de948ac4a91135b6ce38cbb337c52d1

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

@@ -1 +0,0 @@
-26e374a25a5054c68e67a99ea46b3858

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

@@ -1 +0,0 @@
-1409db74c61bae87d4830fa0652a822c1ba21d80

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

@@ -1 +0,0 @@
-dc0a8e5a28e1f4f7d722e8706b5858844aa6eac089e89e5f8099374b309bed60

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

@@ -1 +0,0 @@
-ef66aaa30d2d2703c4ff5c36c117ffaf8dd41a2d2a9a8a286224b817f77d20ae2298cd6e0959e1a78ccc3c741cbc286db2e8d5a086b4ed9e11acc6a206207d68

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

@@ -1 +0,0 @@
-52b71a4f4df5e14f0d8981c716abf0b5

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

@@ -1 +0,0 @@
-9733a96d1ff7d223a5f70be6e6dfe7bb8e87a65d

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

@@ -1 +0,0 @@
-f69ec3f19d8e25695b4285ffd82dc9c7fae64d77138b3650c75c96d785069f25

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

@@ -1 +0,0 @@
-62bb4e1488c2d1ec2a92018daf0e9a3743b13f2eac6fd9f2824b2811a50ea67f94d13aa8bda773a19bf65987b34813baeefa2103ea9af839451034086683378e

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

@@ -1 +0,0 @@
-163d916be872a111d5f095a7fa13dc3c

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

@@ -1 +0,0 @@
-3cd5de5e06cb53c184c41eb8b7136e576bdfae63

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

@@ -1 +0,0 @@
-8140b397ebcb1f6d3c375179559510d32fdeeb8b95772cba5bc2119bc5c7e5ed

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

@@ -1 +0,0 @@
-877cc4dd09304c8a40de927737422f89e43dbb7893f8d529edbf585b886113ec03bd15df807d3776ff1b22b5214390277f2fdfa2b525eb950968e534bf3a39ad

package/src/ts-declarations/react-native-assets.d.ts

@@ -1,31 +0,0 @@
-declare module 'react-native/Libraries/Image/AssetSourceResolver' {
-  import type { PackagerAsset } from 'react-native/asset-registry';
-
-  export type ResolvedAssetSource = {
-    __packager_asset: boolean;
-    width?: number | null;
-    height?: number | null;
-    uri: string;
-    scale: number;
-  };
-
-  export default class AssetSourceResolver {
-    serverUrl: string | null;
-    jsbundleUrl: string | null;
-    asset: PackagerAsset & { fileHashes?: string[] };
-
-    constructor(serverUrl: string | null, jsbundleUrl: string | null, asset: PackagerAsset);
-
-    isLoadedFromServer(): boolean;
-    isLoadedFromFileSystem(): boolean;
-    defaultAsset(): ResolvedAssetSource;
-    assetServerURL(): ResolvedAssetSource;
-    scaledAssetPath(): ResolvedAssetSource;
-    scaledAssetURLNearBundle(): ResolvedAssetSource;
-    resourceIdentifierWithoutScale(): ResolvedAssetSource;
-    drawableFolderInBundle(): ResolvedAssetSource;
-    fromSource(source: string): ResolvedAssetSource;
-
-    static pickScale(scales: number[], deviceScale: number): number;
-  }
-}