@expo/ui 57.0.17 → 57.0.19

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha512

@@ -1 +1 @@
-7b2b797876e13355724bf86b591ebc3bd278cbb4c6c80b55ee5bd5cc80dcd174e67f5f1ff6c9d9901bcf5042799520c481924e8dad2e672b71ca7912db357f1a
+7562f2859bce818ca579384779636c2664395d27507873aafa8815aca90d8ec71e7cc09a648438eb4d1facd99b9b4aa005b6f8da0f93b85e090356a194a9d8b3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "57.0.17",
+  "version": "57.0.19",
   "description": "A collection of UI components",
   "sideEffects": [
     "*.fx.js",
@@ -96,7 +96,7 @@
     "@types/react": "~19.2.0",
     "react-native-reanimated": "4.5.1",
     "react-native-worklets": "0.10.1",
-    "expo": "57.0.21",
+    "expo": "57.0.24",
     "expo-module-scripts": "56.0.3"
   },
   "jest": {
@@ -121,7 +121,7 @@
       "optional": true
     }
   },
-  "gitHead": "ee89f7c31877f111cb1705c8e5c2c8078fa80a03",
+  "gitHead": "7687b07947a5c866adeb11abbceae72403ccb188",
   "scripts": {
     "build": "expo-module build",
     "clean": "expo-module clean",

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

@@ -325,6 +325,10 @@ export function DateRangePicker(props: DateRangePickerProps) {
 // -- Dialog views (used internally by the compat layer) ---------------------
 
 export interface DatePickerDialogProps {
+  /**
+   * The initially selected date. When omitted, the dialog opens on the current month with no
+   * selection and the confirm button stays disabled until a date is picked.
+   */
   initialDate?: string | null;
   variant?: AndroidVariant;
   showVariantToggle?: boolean;

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

@@ -43,6 +43,14 @@ export interface DropdownMenuProps {
    */
   color?: ColorValue;
 
+  /**
+   * Shadow elevation of the dropdown menu popup in dp. Set to `0` to remove the shadow.
+   * Defaults to Material3's `MenuDefaults.ShadowElevation`.
+   *
+   * @platform android
+   */
+  shadowElevation?: number;
+
   /**
    * Optional styles to apply to the `DropdownMenu`.
    */
@@ -58,6 +66,7 @@ type NativeMenuProps = {
   expanded?: boolean;
   onDismissRequest?: () => void;
   color?: ColorValue;
+  shadowElevation?: number;
   style?: StyleProp<ViewStyle>;
   modifiers?: ModifierConfig[];
   children?: ReactNode;

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

@@ -10,8 +10,10 @@ import { type CommonViewModifierProps } from '../types';
  * - `default` - The default button role.
  * - `cancel` - A button that cancels the current operation.
  * - `destructive` - A button that deletes data or performs a destructive action.
+ * - `close` - A button that closes the view it is presented in. Given no `label` and no children,
+ *   the system draws it as an xmark.
  */
-export type ButtonRole = 'default' | 'cancel' | 'destructive';
+export type ButtonRole = 'default' | 'cancel' | 'destructive' | 'close';
 
 export interface ButtonProps extends CommonViewModifierProps {
   /**

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

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+
+import { Slot } from '../SlotView';
+
+export interface NavigationDestinationProps {
+  /**
+   * The `NavigationLink` value this destination is presented for.
+   */
+  value: string;
+  /**
+   * The view pushed onto the stack for `value`.
+   */
+  children: ReactNode;
+}
+
+/**
+ * Associates a destination view with a `NavigationLink` value, matching SwiftUI's
+ * `navigationDestination(for:destination:)`. It must be a direct child of the `NavigationStack`,
+ * however deeply the link that pushes it is nested inside that stack.
+ *
+ * Keep it mounted so the pushed screen already carries its `navigationTitle` when the slide
+ * starts, or render one for each value on the stack's `path` to build screens on demand.
+ *
+ * @example
+ * ```tsx
+ * <NavigationDestination value="settings">
+ *   <SettingsScreen />
+ * </NavigationDestination>
+ * ```
+ *
+ * @platform ios
+ */
+export function NavigationDestination(props: NavigationDestinationProps) {
+  return (
+    <Slot name="destination" extraProps={{ value: props.value }}>
+      {props.children}
+    </Slot>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { requireNativeView } from 'expo';
+import { type ComponentType, type ReactNode } from 'react';
+
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export interface NavigationLinkProps extends CommonViewModifierProps {
+  /**
+   * The value to append to the enclosing `NavigationStack`'s path when the link is tapped. The
+   * stack presents the `NavigationDestination` whose `value` matches.
+   */
+  value: string;
+  /**
+   * A view that describes the link.
+   */
+  children: ReactNode;
+}
+
+const NavigationLinkNativeView: ComponentType<NavigationLinkProps> = requireNativeView(
+  'ExpoUI',
+  'NavigationLinkView'
+);
+
+/**
+ * A view that controls a navigation presentation. In a `List` it renders as a row with a
+ * disclosure chevron, and tapping it pushes the matching `NavigationDestination`.
+ *
+ * The link has to be inside the `NavigationStack` itself. Content presented from the stack, such
+ * as a `BottomSheet` or a `Popover`, is its own presentation context and does not reach the
+ * stack's destinations, so give that content its own `NavigationStack`.
+ *
+ * @example
+ * ```tsx
+ * <NavigationLink value="settings">
+ *   <Text>Settings</Text>
+ * </NavigationLink>
+ * ```
+ *
+ * @platform ios
+ */
+export function NavigationLink(props: NavigationLinkProps) {
+  const { modifiers, children, ...restProps } = props;
+  return (
+    <NavigationLinkNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
+      {children}
+    </NavigationLinkNativeView>
+  );
+}

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

@@ -0,0 +1,122 @@
+import { requireNativeView } from 'expo';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export type NavigationSplitViewVisibility = 'automatic' | 'all' | 'doubleColumn' | 'detailOnly';
+
+/**
+ * The column shown when the split view collapses into a single column.
+ */
+export type NavigationSplitViewColumn = 'sidebar' | 'content' | 'detail';
+
+export interface NavigationSplitViewProps extends CommonViewModifierProps {
+  /**
+   * The columns of the split view. Provide `NavigationSplitView.Sidebar` and
+   * `NavigationSplitView.Detail`, and add `NavigationSplitView.Content` for a
+   * three-column layout.
+   */
+  children: React.ReactNode;
+  /**
+   * The columns to show. Setting it makes the value controlled: pass the value from
+   * `onColumnVisibilityChange` back in, otherwise dragging the divider has no effect.
+   * Leave it unset to let the split view manage its own columns.
+   * @default 'automatic'
+   */
+  columnVisibility?: NavigationSplitViewVisibility;
+  /**
+   * Called when the visible columns change, including when the user drags the sidebar.
+   */
+  onColumnVisibilityChange?: (visibility: NavigationSplitViewVisibility) => void;
+  /**
+   * The column to show when the split view collapses to a single column, for example
+   * in a narrow window. Setting it makes the value controlled in the same way as
+   * `columnVisibility`.
+   * @default 'sidebar'
+   * @platform ios 17.0+
+   */
+  preferredCompactColumn?: NavigationSplitViewColumn;
+  /**
+   * Called when the collapsed column changes.
+   * @platform ios 17.0+
+   */
+  onPreferredCompactColumnChange?: (column: NavigationSplitViewColumn) => void;
+}
+
+type NativeNavigationSplitViewProps = Omit<
+  NavigationSplitViewProps,
+  'onColumnVisibilityChange' | 'onPreferredCompactColumnChange'
+> & {
+  onColumnVisibilityChange?: (event: {
+    nativeEvent: { visibility: NavigationSplitViewVisibility };
+  }) => void;
+  onPreferredCompactColumnChange?: (event: {
+    nativeEvent: { column: NavigationSplitViewColumn };
+  }) => void;
+};
+
+const NavigationSplitViewNativeView: React.ComponentType<NativeNavigationSplitViewProps> =
+  requireNativeView('ExpoUI', 'NavigationSplitViewView');
+
+function NavigationSplitViewSidebar(props: { children: React.ReactNode }) {
+  return <Slot name="sidebar">{props.children}</Slot>;
+}
+
+function NavigationSplitViewContent(props: { children: React.ReactNode }) {
+  return <Slot name="content">{props.children}</Slot>;
+}
+
+function NavigationSplitViewDetail(props: { children: React.ReactNode }) {
+  return <Slot name="detail">{props.children}</Slot>;
+}
+
+NavigationSplitView.Sidebar = NavigationSplitViewSidebar;
+NavigationSplitView.Content = NavigationSplitViewContent;
+NavigationSplitView.Detail = NavigationSplitViewDetail;
+
+/**
+ * NavigationSplitView uses the native [NavigationSplitView](https://developer.apple.com/documentation/swiftui/navigationsplitview) view.
+ *
+ * It presents a collection, a selection and a detail in one hierarchy: side by side
+ * when there is room, and stacked when there is not.
+ * @example
+ * ```tsx
+ * <Host style={{ flex: 1 }}>
+ *   <NavigationSplitView>
+ *     <NavigationSplitView.Sidebar>
+ *       <List>{items}</List>
+ *     </NavigationSplitView.Sidebar>
+ *     <NavigationSplitView.Detail>
+ *       <ItemDetail item={selectedItem} />
+ *     </NavigationSplitView.Detail>
+ *   </NavigationSplitView>
+ * </Host>
+ * ```
+ * @platform ios 16.0+
+ * @platform tvos 16.0+
+ */
+export function NavigationSplitView(props: NavigationSplitViewProps) {
+  const {
+    modifiers,
+    children,
+    onColumnVisibilityChange,
+    onPreferredCompactColumnChange,
+    ...restProps
+  } = props;
+
+  return (
+    <NavigationSplitViewNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      onColumnVisibilityChange={({ nativeEvent: { visibility } }) =>
+        onColumnVisibilityChange?.(visibility)
+      }
+      onPreferredCompactColumnChange={({ nativeEvent: { column } }) =>
+        onPreferredCompactColumnChange?.(column)
+      }
+      {...restProps}>
+      {children}
+    </NavigationSplitViewNativeView>
+  );
+}

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

@@ -0,0 +1,75 @@
+import { requireNativeView } from 'expo';
+import { type ComponentType, type ReactNode } from 'react';
+import { type NativeSyntheticEvent } from 'react-native';
+
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export interface NavigationStackProps extends CommonViewModifierProps {
+  /**
+   * The root view of the stack, and the `NavigationDestination` views the stack can push. It is
+   * displayed inside a navigation bar.
+   */
+  children: ReactNode;
+  /**
+   * The values of the views pushed on top of the root view, in the order they were pushed.
+   * Leave it undefined to let the stack manage its own path.
+   */
+  path?: string[];
+  /**
+   * Callback function that is called when the stack pushes or pops a view, for example when a
+   * `NavigationLink` is tapped or the user swipes back. Gets called with the new path.
+   *
+   * When `path` is set, the stack is controlled: a push takes effect once the new path comes back
+   * through this prop.
+   */
+  onPathChange?: (path: string[]) => void;
+}
+
+type NativeNavigationStackProps = Omit<NavigationStackProps, 'onPathChange'> & {
+  onPathChange?: (event: NativeSyntheticEvent<{ path: string[] }>) => void;
+};
+
+const NavigationStackNativeView: ComponentType<NativeNavigationStackProps> = requireNativeView(
+  'ExpoUI',
+  'NavigationStackView'
+);
+
+/**
+ * A view that displays a root view and enables you to present additional views over the root view.
+ *
+ * @example
+ * ```tsx
+ * const [path, setPath] = useState<string[]>([]);
+ *
+ * <NavigationStack path={path} onPathChange={setPath}>
+ *   <List>
+ *     <NavigationLink value="settings">
+ *       <Text>Settings</Text>
+ *     </NavigationLink>
+ *   </List>
+ *   <NavigationDestination value="settings">
+ *     <SettingsScreen />
+ *   </NavigationDestination>
+ * </NavigationStack>
+ * ```
+ *
+ * @platform ios
+ */
+export function NavigationStack(props: NavigationStackProps) {
+  const { modifiers, onPathChange, ...restProps } = props;
+  return (
+    <NavigationStackNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onPathChange={
+        onPathChange
+          ? ({ nativeEvent: { path } }) => {
+              onPathChange(path);
+            }
+          : undefined
+      }
+    />
+  );
+}

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

@@ -0,0 +1,64 @@
+import { requireNativeView } from 'expo';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export interface ToolbarProps extends CommonViewModifierProps {
+  /**
+   * The view the toolbar belongs to, together with the `Toolbar.Content` that fills it.
+   */
+  children: React.ReactNode;
+}
+
+export interface ToolbarContentProps {
+  /**
+   * The items to place in the toolbar.
+   */
+  children: React.ReactNode;
+}
+
+const ToolbarNativeView: React.ComponentType<ToolbarProps> = requireNativeView(
+  'ExpoUI',
+  'ToolbarView'
+);
+
+/**
+ * The items placed in the toolbar of the view `Toolbar` wraps.
+ */
+function ToolbarContent(props: ToolbarContentProps) {
+  return <Slot name="content">{props.children}</Slot>;
+}
+
+/**
+ * Adds a toolbar to the view it wraps, matching SwiftUI's `toolbar(content:)`.
+ *
+ * @example
+ * ```tsx
+ * <NavigationStack>
+ *   <Toolbar>
+ *     <Text>Bird description</Text>
+ *     <Toolbar.Content>
+ *       <Button role="close" onPress={() => setIsPresented(false)} />
+ *     </Toolbar.Content>
+ *   </Toolbar>
+ * </NavigationStack>
+ * ```
+ *
+ * @platform ios
+ */
+function ToolbarComponent(props: ToolbarProps) {
+  const { modifiers, children, ...restProps } = props;
+  return (
+    <ToolbarNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
+      {children}
+    </ToolbarNativeView>
+  );
+}
+
+const Toolbar = Object.assign(ToolbarComponent, { Content: ToolbarContent });
+
+export { Toolbar };

package/src/swift-ui/index.tsx

@@ -25,6 +25,10 @@ export * from './ZStack';
 export * from './Group';
 export * from './List';
 export * from './Menu';
+export * from './NavigationDestination';
+export * from './NavigationLink';
+export * from './NavigationSplitView';
+export * from './NavigationStack';
 export * from './Picker';
 export * from './ProgressView';
 export * from './Section';
@@ -38,6 +42,7 @@ export { useNativeState } from '../State';
 export { withAnimation, type WithAnimationCompletionCriteria } from './withAnimation';
 export * from './SyncToggle';
 export * from './TabView';
+export * from './Toolbar';
 export * from './Toggle';
 export {
   TextField,

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

@@ -1687,6 +1687,13 @@ export const resizable = (
   resizingMode?: 'stretch' | 'tile'
 ) => createModifier('resizable', { ...capInsets, resizingMode });
 
+/**
+ * Configures the view's title for purposes of navigation, using a string.
+ * @param title - The title to display.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/navigationtitle(_:)).
+ */
+export const navigationTitle = (title: string) => createModifier('navigationTitle', { title });
+
 // =============================================================================
 // Type Definitions
 // =============================================================================
@@ -1830,7 +1837,8 @@ export type BuiltInModifier =
   | ReturnType<typeof widgetAccentedRenderingMode>
   | ReturnType<typeof widgetURL>
   | ReturnType<typeof activityBackgroundTint>
-  | ReturnType<typeof containerBackground>;
+  | ReturnType<typeof containerBackground>
+  | ReturnType<typeof navigationTitle>;
 
 /**
  * Main ViewModifier type that supports both built-in and 3rd party modifiers.
@@ -1873,6 +1881,7 @@ export * from './tag';
 export * from './pickerStyle';
 export * from './menuOrder';
 export * from './tabViewModifiers';
+export * from './navigationModifiers';
 export * from './datePickerStyle';
 export * from './progressViewStyle';
 export * from './gaugeStyle';

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

@@ -0,0 +1,42 @@
+import { createModifier } from './createModifier';
+
+export type NavigationSplitViewStyle = 'automatic' | 'balanced' | 'prominentDetail';
+
+/**
+ * Sets the style of a `NavigationSplitView`.
+ * @param style - The style to apply.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/navigationsplitviewstyle(_:)).
+ */
+export const navigationSplitViewStyle = (style: NavigationSplitViewStyle) =>
+  createModifier('navigationSplitViewStyle', { style });
+
+/**
+ * The resizable form of `navigationSplitViewColumnWidth`.
+ */
+export type NavigationSplitViewColumnWidthParams = {
+  min?: number;
+  ideal: number;
+  max?: number;
+};
+
+/**
+ * Sets the width of a column of a `NavigationSplitView`.
+ *
+ * Pass a number for a fixed column, or an `ideal` width with optional `min` and `max` for a
+ * column that resizes with the window. Prefer the resizable form: a hardcoded sidebar width
+ * does not survive every window size.
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/navigationsplitviewcolumnwidth(_:)).
+ */
+export function navigationSplitViewColumnWidth(width: number): ReturnType<typeof createModifier>;
+export function navigationSplitViewColumnWidth(
+  params: NavigationSplitViewColumnWidthParams
+): ReturnType<typeof createModifier>;
+export function navigationSplitViewColumnWidth(
+  widthOrParams: number | NavigationSplitViewColumnWidthParams
+) {
+  return createModifier(
+    'navigationSplitViewColumnWidth',
+    typeof widthOrParams === 'number' ? { width: widthOrParams } : widthOrParams
+  );
+}

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

@@ -1 +0,0 @@
-cee93fd5a15e4eaab695ed3175a4949f

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

@@ -1 +0,0 @@
-43ac02b43fa332c84dbd29354a8ffc002828927a

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

@@ -1 +0,0 @@
-a2eb95b5f7bc80a8406159f0cd3cc67058927f3e88d1ce5e0eed1000f47bf6e7

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

@@ -1 +0,0 @@
-6a46b6260033cfdf2fcb8cb69b966ac7dcca618a6f3e9c011819a76e42f998c2a549b1864bbbbd642b106c01d9ee184eb822019cc58d4b438103ed8d421cbb2d

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

@@ -1 +0,0 @@
-87a5f6dc53fef1a3b6810eb8db0ccc6a

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

@@ -1 +0,0 @@
-394fabe7251e3d947f0bbf2037e2bb065b8493d5

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

@@ -1 +0,0 @@
-13b9babd2eaa4ed0f4ad6a09f8443eb1a4bca31cc519d29db8371cdabd6487e4

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

@@ -1 +0,0 @@
-10a5b1af451aa49760a4c2ca23f439feeff3ee645cef0ca3af0ef7e487efeb5d26c3ff608ce68568a005f46707a5b774e274b5ca0ffc058429d633e600c9ed1e

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

@@ -1 +0,0 @@
-5cdd34e3be888a5735c256250dd728cf

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

@@ -1 +0,0 @@
-b7846d058304cfb924196deafc5d6e30418c63cd

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

@@ -1 +0,0 @@
-3ce103a426470ca2198f1231ebd5030611bcbd360a51bc830b48dcc7ad7853f2

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

@@ -1 +0,0 @@
-6c831b75309aa91c19aec99702afc5ce461d7fdd215d6acf9565429437744faf0ecc2b953f82fde708241646797dbd4adf9b47f6dc07b388e6179dd0ad4341e7

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

@@ -1 +0,0 @@
-edd1385c2afe1e6a5c4974dfc1d3b6b8

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

@@ -1 +0,0 @@
-8ec443820fac6b3c0527234e124be03c815e81d0

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

@@ -1 +0,0 @@
-68858cf5c7e2ff60833e8e6d3c4c5f1683969c7d5f24965470e431605eaa1f70

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

@@ -1 +0,0 @@
-637e334e0226ffefc9abe120e7c35fe3441432d6fe47bd1c0dff56445168808763dca58272af02d7af20442213088b037129ff8bff12ce37640a1ad88a13c4d7