@expo/ui 58.0.12 → 58.0.14

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{58.0.12/expo.modules.ui-58.0.12.module → 58.0.14/expo.modules.ui-58.0.14.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "expo.modules.ui",
     "module": "expo.modules.ui",
-    "version": "58.0.12",
+    "version": "58.0.14",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,13 +24,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-58.0.12.aar",
-          "url": "expo.modules.ui-58.0.12.aar",
-          "size": 1843657,
-          "sha512": "453c085a9a3f87728a04202f8345587720468598c7873813e572b87013ff025c384008e4c77d5ca54db253df56b5545b6180aec60b0164afce10cb1ad8c128cc",
-          "sha256": "3c1582041a0a49f0df088ad60c5ee3c2333da74afff9a783f4e31984ef5f975d",
-          "sha1": "552a8fdfc1afb51afb7bf9f742f2917988ccb39d",
-          "md5": "42294a6398d445ac12b85609173d6710"
+          "name": "expo.modules.ui-58.0.14.aar",
+          "url": "expo.modules.ui-58.0.14.aar",
+          "size": 1843673,
+          "sha512": "ef66aaa30d2d2703c4ff5c36c117ffaf8dd41a2d2a9a8a286224b817f77d20ae2298cd6e0959e1a78ccc3c741cbc286db2e8d5a086b4ed9e11acc6a206207d68",
+          "sha256": "dc0a8e5a28e1f4f7d722e8706b5858844aa6eac089e89e5f8099374b309bed60",
+          "sha1": "1409db74c61bae87d4830fa0652a822c1ba21d80",
+          "md5": "26e374a25a5054c68e67a99ea46b3858"
         }
       ]
     },
@@ -141,13 +141,13 @@
       ],
       "files": [
         {
-          "name": "expo.modules.ui-58.0.12.aar",
-          "url": "expo.modules.ui-58.0.12.aar",
-          "size": 1843657,
-          "sha512": "453c085a9a3f87728a04202f8345587720468598c7873813e572b87013ff025c384008e4c77d5ca54db253df56b5545b6180aec60b0164afce10cb1ad8c128cc",
-          "sha256": "3c1582041a0a49f0df088ad60c5ee3c2333da74afff9a783f4e31984ef5f975d",
-          "sha1": "552a8fdfc1afb51afb7bf9f742f2917988ccb39d",
-          "md5": "42294a6398d445ac12b85609173d6710"
+          "name": "expo.modules.ui-58.0.14.aar",
+          "url": "expo.modules.ui-58.0.14.aar",
+          "size": 1843673,
+          "sha512": "ef66aaa30d2d2703c4ff5c36c117ffaf8dd41a2d2a9a8a286224b817f77d20ae2298cd6e0959e1a78ccc3c741cbc286db2e8d5a086b4ed9e11acc6a206207d68",
+          "sha256": "dc0a8e5a28e1f4f7d722e8706b5858844aa6eac089e89e5f8099374b309bed60",
+          "sha1": "1409db74c61bae87d4830fa0652a822c1ba21d80",
+          "md5": "26e374a25a5054c68e67a99ea46b3858"
         }
       ]
     },
@@ -161,13 +161,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-58.0.12-sources.jar",
-          "url": "expo.modules.ui-58.0.12-sources.jar",
-          "size": 110713,
-          "sha512": "7325da1dbb0f220f807982fa7797678dba275209f74efde81b39d4ecf3452573708a111629552ae98257631d5c8e9d26438d10a50172c6d731e247d20f8762c0",
-          "sha256": "d6b5917f7e254bed3b859860b39f0cf57b943148a0dc5c25282599caaa5bbf7e",
-          "sha1": "35f9c28864e4c66ebf31d87331aaf606420295dd",
-          "md5": "1302e48111e4d1b9df2e41d53b5aced4"
+          "name": "expo.modules.ui-58.0.14-sources.jar",
+          "url": "expo.modules.ui-58.0.14-sources.jar",
+          "size": 110723,
+          "sha512": "3e6c99d1b6aa74d01d30339d222653a631dae2abf99075e4c25fc171fbb33f9d55bca7daee4d1cd4c6ecdcdc89fb71067de948ac4a91135b6ce38cbb337c52d1",
+          "sha256": "eee15e7c9f3aeb7b3941ead7ce0e72d8174b0b95964c69ef5a1d5fbf02536fbe",
+          "sha1": "e587fcde7f1c58c339f95759565034f989a49dcf",
+          "md5": "041ed0d6d536bbcf8d08e7a653bea8ef"
         }
       ]
     }

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

@@ -0,0 +1 @@
+8620eb4f3a0034ee25df426d15a2132c

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

@@ -0,0 +1 @@
+bac0bb14d7f8206e4f6fea13dab4cf103839b7f6

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

@@ -0,0 +1 @@
+9211bc6ae1cb6ca9bae211e99fdfecb0870b0e5dfc1bf31d50552e794cc02abf

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

@@ -0,0 +1 @@
+250717c1fdfaad128b302fc4d7ce975d8cb26444b84ebb91de16d911d91cef07f40632026edc6fe3653c5ebbb621a90e35c1749b301b9e70961f72428265ae4e

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{58.0.12/expo.modules.ui-58.0.12.pom → 58.0.14/expo.modules.ui-58.0.14.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>58.0.12</version>
+  <version>58.0.14</version>
   <packaging>aar</packaging>
   <name>expo.modules.ui</name>
   <url>https://github.com/expo/expo</url>

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

@@ -0,0 +1 @@
+5830eabc528b387a16b2c11fa647cccf

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

@@ -0,0 +1 @@
+2aa19c59ef78a58437075381e54f80196277f198

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

@@ -0,0 +1 @@
+190fae0bf2c5e0e704aff6203b831db1bb670bb9d12db1d93e2c382a1aaca0a6

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

@@ -0,0 +1 @@
+b1e6707e0766bbcc90144b50abbb05f9dc5bd5c29bda43a4ba32924d7c930425a8c173d500f1ac3d9b1a3d3ad8fb4667fd848ec1ab58bc9ed4d26bbbb7ca7ee7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "58.0.12",
+  "version": "58.0.14",
   "description": "A collection of UI components",
   "keywords": [
     "Jetpack Compose",
@@ -148,7 +148,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^22.14.0",
     "@types/react": "~19.3.0",
-    "expo-module-scripts": "56.0.6",
+    "expo-module-scripts": "56.0.8",
     "react-native-reanimated": "4.7.0",
     "react-native-worklets": "0.13.0"
   },

package/src/State/index.ts

@@ -6,5 +6,6 @@ import './index.fx';
 
 export { useNativeState, type ObservableState } from './useNativeState';
 export { useWorkletProp } from './useWorkletProp';
+export { useWorkletCallback, type WorkletCallback } from './useWorkletCallback';
 export { worklets } from './optionalWorklets';
 export { getStateId } from './utils';

package/src/State/useWorkletCallback.ts

@@ -0,0 +1,48 @@
+import type { SharedObject } from 'expo';
+
+import { worklets } from './optionalWorklets';
+import { useWorkletProp } from './useWorkletProp';
+
+/**
+ * A worklet function wrapped for native code, returned by [`useWorkletCallback`](#useworkletcallback).
+ * Pass it to a modifier or prop that accepts worklet callbacks, which then runs it synchronously on
+ * the UI thread.
+ */
+export type WorkletCallback<T extends (...args: never[]) => void> = SharedObject & {
+  /** @hidden */
+  readonly __workletCallbackType?: T;
+};
+
+/**
+ * Wraps a worklet function so native code can run it synchronously on the UI thread, with no
+ * JS-thread round trip. Pass the result to a modifier that accepts worklet callbacks, such as
+ * `onHingeChange`. The callback must start with the `'worklet'` directive, and
+ * [`react-native-worklets`](https://docs.swmansion.com/react-native-worklets/) must be installed.
+ *
+ * The native callback is updated when `callback` changes and released when the component unmounts,
+ * so call it at the top of your component like any hook.
+ *
+ * @example
+ * ```tsx
+ * const angle = useNativeState(180);
+ * const onHinge = useWorkletCallback((_, newContext) => {
+ *   'worklet';
+ *   angle.value = newContext.hinge?.angle ?? 180;
+ * });
+ *
+ * <VStack modifiers={[onHingeChange(onHinge)]} />
+ * ```
+ */
+export function useWorkletCallback<T extends (...args: never[]) => void>(
+  callback: T
+): WorkletCallback<T> {
+  const workletCallback = useWorkletProp(callback as unknown as (...args: unknown[]) => void);
+  if (!worklets || !workletCallback) {
+    throw new Error(
+      "useWorkletCallback needs the 'react-native-worklets' package, which couldn't be loaded. " +
+        'Install react-native-worklets and rebuild the native app, or pass a plain function ' +
+        'where the API accepts one.'
+    );
+  }
+  return workletCallback as WorkletCallback<T>;
+}

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}

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/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/jetpack-compose/index.ts

@@ -72,6 +72,6 @@ export * from './Box';
 export * from './Row';
 export * from './Column';
 export * from './FlowRow';
-export { useNativeState } from '../State';
+export { useNativeState, useWorkletCallback, type WorkletCallback } from '../State';
 export type { ViewEvent } from '../types';
 export type { PrimitiveBaseProps } from './layout-types';

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

@@ -0,0 +1,70 @@
+import { requireNativeView } from 'expo';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export interface ArrangementViewProps extends CommonViewModifierProps {
+  /**
+   * The views to arrange. Provide `ArrangementView.Primary` and `ArrangementView.Secondary`.
+   */
+  children: React.ReactNode;
+}
+
+const ArrangementViewNativeView: React.ComponentType<ArrangementViewProps> = requireNativeView(
+  'ExpoUI',
+  'ArrangementViewView'
+);
+
+/**
+ * The primary view of the arrangement.
+ */
+function ArrangementViewPrimary(props: { children: React.ReactNode }) {
+  return <Slot name="primary">{props.children}</Slot>;
+}
+
+/**
+ * The secondary view of the arrangement.
+ */
+function ArrangementViewSecondary(props: { children: React.ReactNode }) {
+  return <Slot name="secondary">{props.children}</Slot>;
+}
+
+ArrangementView.Primary = ArrangementViewPrimary;
+ArrangementView.Secondary = ArrangementViewSecondary;
+
+/**
+ * ArrangementView uses the native [ArrangementView](https://developer.apple.com/documentation/swiftui/arrangementview) view.
+ *
+ * A view that arranges primary and secondary content using an adaptive layout that responds to
+ * the environment.
+ *
+ * > **Note:** Below iOS 27.1, the children render without a container.
+ * @example
+ * ```tsx
+ * <Host style={{ flex: 1 }}>
+ *   <ArrangementView modifiers={[arrangementViewStyle('split')]}>
+ *     <ArrangementView.Primary>
+ *       <NowPlaying />
+ *     </ArrangementView.Primary>
+ *     <ArrangementView.Secondary>
+ *       <Lyrics />
+ *     </ArrangementView.Secondary>
+ *   </ArrangementView>
+ * </Host>
+ * ```
+ * @platform ios 27.1+
+ * @platform tvos 27.1+
+ */
+export function ArrangementView(props: ArrangementViewProps) {
+  const { modifiers, children, ...restProps } = props;
+
+  return (
+    <ArrangementViewNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
+      {children}
+    </ArrangementViewNativeView>
+  );
+}

package/src/swift-ui/index.tsx

@@ -29,6 +29,7 @@ export * from './Menu';
 export * from './NavigationDestination';
 export * from './NavigationLink';
 export * from './NavigationSplitView';
+export * from './ArrangementView';
 export * from './NavigationStack';
 export * from './Picker';
 export * from './ProgressView';
@@ -39,7 +40,7 @@ export * from './Spacer';
 export * from './Stepper';
 export * from './SwipeActions';
 export * from './Text';
-export { useNativeState } from '../State';
+export { useNativeState, useWorkletCallback, type WorkletCallback } from '../State';
 export { withAnimation, type WithAnimationCompletionCriteria } from './withAnimation';
 export * from './SyncToggle';
 export * from './TabView';

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

@@ -0,0 +1,142 @@
+import { createModifier } from './createModifier';
+
+/**
+ * A style that configures an `ArrangementView` with an arrangement.
+ * - `'automatic'`: The default style, which resolves to `'split'`.
+ * - `'split'`: An arrangement view style that places the primary and secondary views side by side along one or more axes.
+ * - `'overlay'`: An arrangement view style that layers the primary view over the secondary view in z-order.
+ */
+export type ArrangementViewStyle = 'automatic' | 'split' | 'overlay';
+
+/**
+ * Sets the style for arrangement views within this view.
+ * @param style - The style to apply.
+ * @param options - The `axes` the arrangement supports. With `'split'`, creates a split arrangement
+ * that supports the given axes. With `'overlay'`, creates an overlay arrangement that supports
+ * laying out its views along the given axes.
+ * @platform ios 27.1+
+ * @platform tvos 27.1+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/arrangementviewstyle(_:)).
+ */
+export function arrangementViewStyle(style: 'automatic'): ReturnType<typeof createModifier>;
+export function arrangementViewStyle(
+  style: 'split' | 'overlay',
+  options?: { axes?: 'horizontal' | 'vertical' | 'both' }
+): ReturnType<typeof createModifier>;
+export function arrangementViewStyle(
+  style: ArrangementViewStyle,
+  options?: { axes?: 'horizontal' | 'vertical' | 'both' }
+) {
+  return createModifier('arrangementViewStyle', { style, axes: options?.axes });
+}
+
+/**
+ * The minimum, ideal, and maximum ratios for `splitArrangementLayoutRatio`.
+ */
+export type SplitArrangementLayoutRatioParams = {
+  minHorizontal?: number;
+  idealHorizontal?: number;
+  maxHorizontal?: number;
+  minVertical?: number;
+  idealVertical?: number;
+  maxVertical?: number;
+};
+
+/**
+ * Sets the preferred size ratio for the content of `ArrangementView.Primary` or
+ * `ArrangementView.Secondary` in a split arrangement.
+ * @platform ios 27.1+
+ * @platform tvos 27.1+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/splitarrangementlayoutratio(_:)).
+ */
+export function splitArrangementLayoutRatio(ratio: number): ReturnType<typeof createModifier>;
+/**
+ * Sets the size ratio for the content of `ArrangementView.Primary` or `ArrangementView.Secondary`
+ * in a split arrangement.
+ * @platform ios 27.1+
+ * @platform tvos 27.1+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/splitarrangementlayoutratio(minhorizontal:idealhorizontal:maxhorizontal:minvertical:idealvertical:maxvertical:)).
+ */
+export function splitArrangementLayoutRatio(
+  ratios: SplitArrangementLayoutRatioParams
+): ReturnType<typeof createModifier>;
+export function splitArrangementLayoutRatio(
+  ratioOrParams: number | SplitArrangementLayoutRatioParams
+) {
+  return createModifier(
+    'splitArrangementLayoutRatio',
+    typeof ratioOrParams === 'number' ? { ratio: ratioOrParams } : ratioOrParams
+  );
+}
+
+/**
+ * The minimum, ideal, and maximum sizes for `splitArrangementLayoutSize`.
+ */
+export type SplitArrangementLayoutSizeParams = {
+  minWidth?: number;
+  idealWidth?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  idealHeight?: number;
+  maxHeight?: number;
+};
+
+/**
+ * Sets the size constraints for the content of `ArrangementView.Primary` or
+ * `ArrangementView.Secondary` in a split arrangement.
+ * @platform ios 27.1+
+ * @platform tvos 27.1+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/splitarrangementlayoutsize(minwidth:idealwidth:maxwidth:minheight:idealheight:maxheight:)).
+ */
+export const splitArrangementLayoutSize = (constraints: SplitArrangementLayoutSizeParams) =>
+  createModifier('splitArrangementLayoutSize', constraints);
+
+/**
+ * The split axes on which `splitArrangementFixedLayoutSize` prefers the ideal size of the view.
+ */
+export type SplitArrangementFixedLayoutSizeParams = {
+  /**
+   * Whether to prefer a fixed width for the view in a horizontal split.
+   * @default true
+   */
+  horizontal?: boolean;
+  /**
+   * Whether to prefer a fixed height for the view in a vertical split.
+   * @default true
+   */
+  vertical?: boolean;
+};
+
+/**
+ * Sets the preferred size constraint for the content of `ArrangementView.Primary` or
+ * `ArrangementView.Secondary` in a split arrangement to the ideal size of the view within its
+ * container. The arrangement view prefers this size, but may resize to a smaller size depending on
+ * the priority of the view.
+ * @platform ios 27.1+
+ * @platform tvos 27.1+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/splitarrangementfixedlayoutsize(horizontal:vertical:)).
+ */
+export const splitArrangementFixedLayoutSize = (options?: SplitArrangementFixedLayoutSizeParams) =>
+  createModifier('splitArrangementFixedLayoutSize', options);
+
+/**
+ * Sets the horizontal edge that a view in an overlay arrangement occupies when the arrangement
+ * transitions to a horizontal layout.
+ * @platform ios 27.1+
+ * @platform tvos 27.1+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/overlayarrangementedge(_:)).
+ */
+export function overlayArrangementEdge(
+  edge: 'leading' | 'trailing'
+): ReturnType<typeof createModifier>;
+/**
+ * Sets the vertical edge that a view in an overlay arrangement occupies when the arrangement
+ * transitions to a vertical layout.
+ * @platform ios 27.1+
+ * @platform tvos 27.1+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/overlayarrangementedge(_:)-4tjwn).
+ */
+export function overlayArrangementEdge(edge: 'top' | 'bottom'): ReturnType<typeof createModifier>;
+export function overlayArrangementEdge(edge: 'top' | 'bottom' | 'leading' | 'trailing') {
+  return createModifier('overlayArrangementEdge', { edge });
+}

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

@@ -0,0 +1,91 @@
+import { getStateId, type WorkletCallback } from '../../State';
+import { createModifier, createModifierWithEventListener } from './createModifier';
+
+/**
+ * Status of the device hinge, as reported by SwiftUI's `DeviceHinge.Status`.
+ * `'unknown'` is reserved for a status this version of Expo UI does not recognize.
+ * @platform ios 27.1+
+ */
+export type HingeStatus = 'closed' | 'partiallyOpen' | 'fullyOpen' | 'unknown';
+
+/**
+ * State of the device hinge. Mirrors SwiftUI's `DeviceHinge`.
+ * @platform ios 27.1+
+ */
+export type Hinge = {
+  /**
+   * The current angle of the hinge in degrees, where `0` is closed and `180` is flat. The rate and
+   * granularity of angle updates are system policy, so do not depend on a particular update
+   * frequency or precision. Prefer `status` when you only need to know whether the hinge is closed,
+   * partially open, or fully open.
+   */
+  angle: number;
+  /**
+   * The current status of the hinge, determined by the system from the angle and device orientation.
+   */
+  status: HingeStatus;
+};
+
+/**
+ * The hinge context of the view hierarchy. Mirrors SwiftUI's `DeviceHingeContext`.
+ * @platform ios 27.1+
+ */
+export type HingeContext = {
+  /**
+   * The current hinge, or `null` when the device has no hinge or the view's hierarchy provides no
+   * hinge updates.
+   */
+  hinge: Hinge | null;
+};
+
+/**
+ * A function called with the old and the new hinge context when the hinge context changes.
+ */
+export type HingeChangeHandler = (oldContext: HingeContext, newContext: HingeContext) => void;
+
+/**
+ * Calls the handler when the hinge context of the view hierarchy changes, such as when the user
+ * folds or unfolds the device. The handler receives the old and the new context. Use hinge
+ * 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
+ * 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
+ * without a hinge, both contexts have a `null` hinge. The modifier is a no-op on iOS versions earlier
+ * than 27.1 and in builds made with Xcode earlier than 27.1.
+ *
+ * @param handler - Function or worklet callback called with the old and the new hinge context.
+ * @platform ios 27.1+
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/onhingechange(isenabled:_:)).
+ *
+ * @example
+ * ```tsx
+ * // JS thread
+ * const [hinge, setHinge] = useState<Hinge | null>(null);
+ * <VStack modifiers={[onHingeChange((_, newContext) => setHinge(newContext.hinge))]} />
+ *
+ * // UI thread
+ * const angle = useNativeState(180);
+ * const onHinge = useWorkletCallback((_, newContext) => {
+ *   'worklet';
+ *   angle.value = newContext.hinge?.angle ?? 180;
+ * });
+ * <VStack modifiers={[onHingeChange(onHinge)]} />
+ * ```
+ */
+export const onHingeChange = (
+  handler: HingeChangeHandler | WorkletCallback<HingeChangeHandler>
+) => {
+  if (typeof handler !== 'function') {
+    return createModifier('onHingeChange', { workletCallback: getStateId(handler) });
+  }
+  const callback = handler as HingeChangeHandler;
+  return createModifierWithEventListener(
+    'onHingeChange',
+    (event: { oldContext: HingeContext; newContext: HingeContext }) =>
+      callback(event.oldContext, event.newContext)
+  );
+};

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

@@ -18,6 +18,7 @@ import {
 import { datePickerStyle } from './datePickerStyle';
 import { environment } from './environment';
 import { gaugeStyle } from './gaugeStyle';
+import { onHingeChange } from './hingeObservation';
 import { progressViewStyle } from './progressViewStyle';
 import { onScrollPhaseChange, useScrollGeometryChange } from './scrollObservation';
 import { id, scrollPosition } from './scrollPosition';
@@ -1896,6 +1897,7 @@ export type BuiltInModifier =
   | ReturnType<typeof scrollPosition>
   | ReturnType<typeof onScrollPhaseChange>
   | NonNullable<ReturnType<typeof useScrollGeometryChange>>
+  | ReturnType<typeof onHingeChange>
   | ReturnType<typeof moveDisabled>
   | ReturnType<typeof deleteDisabled>
   | ReturnType<typeof environment>
@@ -1989,6 +1991,7 @@ export * from './pickerStyle';
 export * from './menuOrder';
 export * from './tabViewModifiers';
 export * from './navigationModifiers';
+export * from './arrangementModifiers';
 export * from './datePickerStyle';
 export * from './progressViewStyle';
 export * from './gaugeStyle';
@@ -1998,6 +2001,7 @@ export type { ShapeStyle } from './shapeStyle';
 export * from './scrollPosition';
 export * from './symbolEffect';
 export * from './scrollObservation';
+export * from './hingeObservation';
 export * from './widgets';
 export type {
   TimingAnimationParams,