@expo/ui 58.0.12 → 58.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "58.0.12",
+  "version": "58.0.13",
   "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.7",
     "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/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,

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

@@ -1 +0,0 @@
-1302e48111e4d1b9df2e41d53b5aced4

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

@@ -1 +0,0 @@
-35f9c28864e4c66ebf31d87331aaf606420295dd

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

@@ -1 +0,0 @@
-d6b5917f7e254bed3b859860b39f0cf57b943148a0dc5c25282599caaa5bbf7e

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

@@ -1 +0,0 @@
-7325da1dbb0f220f807982fa7797678dba275209f74efde81b39d4ecf3452573708a111629552ae98257631d5c8e9d26438d10a50172c6d731e247d20f8762c0

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

@@ -1 +0,0 @@
-42294a6398d445ac12b85609173d6710

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

@@ -1 +0,0 @@
-552a8fdfc1afb51afb7bf9f742f2917988ccb39d

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

@@ -1 +0,0 @@
-3c1582041a0a49f0df088ad60c5ee3c2333da74afff9a783f4e31984ef5f975d

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

@@ -1 +0,0 @@
-453c085a9a3f87728a04202f8345587720468598c7873813e572b87013ff025c384008e4c77d5ca54db253df56b5545b6180aec60b0164afce10cb1ad8c128cc

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

@@ -1 +0,0 @@
-916973dce9f1d74ec5a0b821b7ae63bd

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

@@ -1 +0,0 @@
-433a597cd6dca38ee4d54004b360b6a3bf70ba82

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

@@ -1 +0,0 @@
-2a815ceefba6faf7b58914bfe44a837a1ad50d0e9c5897547cbe10224dabb515

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

@@ -1 +0,0 @@
-ebf577ea4efcff86cca51e6b9397ad95b4fe3c9c1096f713141e11ec062e9be4026a253409a70b083779125211584cfb607049a0ecad3b96e1629f66c784e0ec

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

@@ -1 +0,0 @@
-b71a1b8a4daedd8effbd0f89d36f2153

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

@@ -1 +0,0 @@
-de2eee349bef3b70e3c4ffcc4655fe3e01a9345d

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

@@ -1 +0,0 @@
-98d3376b217927f0da992180fc5c046f3262f215ea3259c615c8692d57064d5c

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

@@ -1 +0,0 @@
-8781d05212c66bce3d8fd208c166c960a71112eac576c5335d6bfb4627f278b97b5ddedc8c54e855bd23610bef563ec1b6a00c676fbedd27943df33cf552492c