@expo/ui 56.0.8 → 56.0.10

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

@@ -0,0 +1,91 @@
+import { requireNativeView } from 'expo';
+import { type ColorValue } from 'react-native';
+
+import { getStateId, type ObservableState } from '../../State';
+import { type ModifierConfig } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+/**
+ * Common props shared by loading indicator variants.
+ */
+export type LoadingIndicatorCommonConfig = {
+  /**
+   * An observable state that holds the current progress value.
+   * Create one with `useNativeState(0)`. Omit for indeterminate loading.
+   */
+  progress?: ObservableState<number | null>;
+  /**
+   * Loading indicator color.
+   */
+  color?: ColorValue;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+type NativeLoadingIndicatorCommonConfig = Omit<
+  LoadingIndicatorCommonConfig,
+  'progress' | 'modifiers'
+> & {
+  progress?: number;
+  modifiers?: unknown;
+};
+
+function transformProps<T extends LoadingIndicatorCommonConfig>(
+  props: T
+): NativeLoadingIndicatorCommonConfig {
+  const { modifiers, progress, ...restProps } = props;
+  return {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...restProps,
+    progress: getStateId(progress),
+  };
+}
+
+function createLoadingIndicatorComponent<P extends LoadingIndicatorCommonConfig>(
+  viewName: string
+): React.ComponentType<P> {
+  const NativeView: React.ComponentType<NativeLoadingIndicatorCommonConfig> = requireNativeView(
+    'ExpoUI',
+    viewName
+  );
+  function Component(props: P) {
+    return <NativeView {...transformProps(props)} />;
+  }
+  Component.displayName = viewName;
+  return Component;
+}
+
+// region LoadingIndicator
+
+/**
+ * A loading indicator that displays loading using morphing shapes.
+ *
+ * Matches the Jetpack Compose `LoadingIndicator`.
+ */
+export const LoadingIndicator = createLoadingIndicatorComponent('LoadingIndicatorView');
+
+// endregion
+
+// region ContainedLoadingIndicator
+
+export type ContainedLoadingIndicatorProps = LoadingIndicatorCommonConfig & {
+  /**
+   * Loading indicator's container color
+   */
+  containerColor?: ColorValue;
+};
+
+/**
+ * A loading indicator that displays loading using morphing shapes inside a container.
+ *
+ * Matches the Jetpack Compose `ContainedLoadingIndicator`.
+ */
+export const ContainedLoadingIndicator =
+  createLoadingIndicatorComponent<ContainedLoadingIndicatorProps>('ContainedLoadingIndicatorView');
+// endregion
+
+// Exported for docs api data
+export { type ObservableState };

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

@@ -0,0 +1,135 @@
+import { requireNativeView } from 'expo';
+import { type Ref } from 'react';
+import { type ColorValue } from 'react-native';
+
+import { type ModifierConfig } from '../../types';
+import { createViewModifierEventListener } from '../modifiers/utils';
+
+export type SnackbarProps = {
+  /**
+   * The background color of the snackbar container.
+   */
+  containerColor?: ColorValue;
+  /**
+   * The preferred content color used for the message text.
+   */
+  contentColor?: ColorValue;
+  /**
+   * The content color used for the action button.
+   */
+  actionContentColor?: ColorValue;
+  /**
+   * The content color used for the dismiss-action icon button.
+   */
+  dismissActionContentColor?: ColorValue;
+  /**
+   * Whether the action should be placed on a new line below the message.
+   * Useful for long action labels.
+   * @default false
+   */
+  actionOnNewLine?: boolean;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+};
+
+const SnackbarNativeView: React.ComponentType<SnackbarProps> = requireNativeView(
+  'ExpoUI',
+  'SnackbarView'
+);
+
+/**
+ * Styling configuration for the snackbar shown by `SnackbarHost`. Pass as a
+ * child to override colors or place the action on a new line.
+ */
+export function Snackbar(props: SnackbarProps) {
+  const { modifiers, ...rest } = props;
+  return (
+    <SnackbarNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...rest}
+    />
+  );
+}
+
+// --- SnackbarHost ---
+
+/**
+ * How long the snackbar is shown. Mirrors Compose's `SnackbarDuration` enum.
+ */
+export type SnackbarDuration = 'short' | 'long' | 'indefinite';
+
+/**
+ * Reason a snackbar invocation resolved. Mirrors Compose's `SnackbarResult` enum.
+ */
+export type SnackbarResult = 'actionPerformed' | 'dismissed';
+
+export type SnackbarShowOptions = {
+  /**
+   * The message body of the snackbar.
+   */
+  message: string;
+  /**
+   * Label for the optional action button. When omitted, no action button is shown.
+   */
+  actionLabel?: string;
+  /**
+   * Whether to show a trailing close (X) icon button to dismiss the snackbar.
+   * @default false
+   */
+  withDismissAction?: boolean;
+  /**
+   * How long to show the snackbar. Defaults to `'short'` when an `actionLabel`
+   * is not provided, and `'indefinite'` when it is, matching Compose.
+   */
+  duration?: SnackbarDuration;
+};
+
+export type SnackbarHostRef = {
+  /**
+   * Shows a snackbar and resolves with `'actionPerformed'` when the user taps
+   * the action, or `'dismissed'` when it times out or the dismiss-action
+   * button is tapped. Subsequent calls queue and show after the current
+   * snackbar is dismissed.
+   */
+  showSnackbar: (options: SnackbarShowOptions) => Promise<SnackbarResult>;
+};
+
+export type SnackbarHostProps = {
+  /**
+   * Ref exposing the imperative `showSnackbar` method.
+   */
+  ref?: Ref<SnackbarHostRef>;
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+  /**
+   * Optional `Snackbar` child supplying styling for shown snackbars. Mirrors
+   * Compose's `SnackbarHost(hostState) { data -> Snackbar(data, ...) }` lambda.
+   */
+  children?: React.ReactNode;
+};
+
+const SnackbarHostNativeView: React.ComponentType<SnackbarHostProps> = requireNativeView(
+  'ExpoUI',
+  'SnackbarHostView'
+);
+
+/**
+ * A Material 3 [SnackbarHost](https://developer.android.com/develop/ui/compose/components/snackbar)
+ * that displays snackbars triggered via its ref's `showSnackbar` method.
+ */
+export function SnackbarHost(props: SnackbarHostProps) {
+  const { modifiers, children, ...rest } = props;
+  return (
+    <SnackbarHostNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...rest}>
+      {children}
+    </SnackbarHostNativeView>
+  );
+}

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

@@ -1,8 +1,6 @@
 import { requireNativeView } from 'expo';
 
-import { type ObservableState } from '../../State/useNativeState';
-import { useWorkletProp } from '../../State/useWorkletProp';
-import { getStateId } from '../../State/utils';
+import { getStateId, type ObservableState, useWorkletProp } from '../../State';
 import { type ModifierConfig } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 

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

@@ -2,10 +2,7 @@ import { requireNativeView } from 'expo';
 import type { Ref } from 'react';
 import type { ColorValue } from 'react-native';
 
-import { worklets } from '../../State/optionalWorklets';
-import type { ObservableState } from '../../State/useNativeState';
-import { useWorkletProp } from '../../State/useWorkletProp';
-import { getStateId } from '../../State/utils';
+import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
 import type { ModifierConfig, ViewEvent } from '../../types';
 import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';

package/src/jetpack-compose/index.ts

@@ -1,4 +1,3 @@
-import '../State/index.fx';
 import './MaterialSymbolsAssetsTransformer.fx';
 
 export * from './AlertDialog';
@@ -49,6 +48,7 @@ export {
   type HorizontalPagerProps,
 } from './HorizontalPager';
 export * from './SearchBar';
+export * from './Snackbar';
 export * from './DockedSearchBar';
 export * from './HorizontalFloatingToolbar';
 export * from './FloatingActionButton';
@@ -57,12 +57,13 @@ export * from './RadioButton';
 export * from './Surface';
 export { type TextProps, Text } from './Text';
 export * from './Tooltip';
+export * from './LoadingIndicator';
 
 export * from './AnimatedVisibility';
 export * from './Box';
 export * from './Row';
 export * from './Column';
 export * from './FlowRow';
-export { useNativeState } from '../State/useNativeState';
+export { useNativeState } from '../State';
 export type { ViewEvent } from '../types';
 export type { PrimitiveBaseProps } from './layout-types';

package/src/jetpack-compose/modifiers/index.ts

@@ -1,6 +1,6 @@
 import { type ColorValue } from 'react-native';
 
-import { type AnimatedValue } from './animation';
+import { type AnimatedValue, type AnimationSpec } from './animation';
 import { createModifier, createModifierWithEventListener } from './createModifier';
 export { type ExpoModifier, type ModifierConfig } from '../../types';
 export {
@@ -142,9 +142,12 @@ export const offset = (x: number, y: number) => createModifier('offset', { x, y
 
 /**
  * Sets the background color.
+ * Pass an `animationSpec` to smoothly animate between colors when the prop changes (backed by `animateColorAsState`).
  * @param color - A color string (hex, e.g., `'#FF0000'`).
+ * @param options.animationSpec - Optional spec — animate between color changes.
  */
-export const background = (color: ColorValue) => createModifier('background', { color });
+export const background = (color: ColorValue, options?: { animationSpec?: AnimationSpec }) =>
+  createModifier('background', { color, animationSpec: options?.animationSpec });
 
 /**
  * Adds a border around the view.

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

@@ -1,5 +1,5 @@
 import { requireNativeView } from 'expo';
-import type { ComponentType } from 'react';
+import { useState, type ComponentType } from 'react';
 import type { NativeSyntheticEvent } from 'react-native';
 
 import { createViewModifierEventListener } from '../modifiers/utils';
@@ -21,6 +21,10 @@ export type BottomSheetProps = {
    * Callback function that is called when the `BottomSheet` presented state changes.
    */
   onIsPresentedChange: (isPresented: boolean) => void;
+  /**
+   * Callback function that is called after the `BottomSheet` has been fully dismissed.
+   */
+  onDismiss?: () => void;
   /**
    * When `true`, the sheet will automatically size itself to fit its content.
    * This sets the presentation detent to match the height of the children.
@@ -29,8 +33,9 @@ export type BottomSheetProps = {
   fitToContents?: boolean;
 } & CommonViewModifierProps;
 
-type NativeBottomSheetProps = Omit<BottomSheetProps, 'onIsPresentedChange'> & {
+type NativeBottomSheetProps = Omit<BottomSheetProps, 'onIsPresentedChange' | 'onDismiss'> & {
   onIsPresentedChange: (event: NativeSyntheticEvent<{ isPresented: boolean }>) => void;
+  onDismiss: (event: NativeSyntheticEvent<object>) => void;
 };
 
 const BottomSheetNativeView: ComponentType<NativeBottomSheetProps> = requireNativeView(
@@ -38,23 +43,35 @@ const BottomSheetNativeView: ComponentType<NativeBottomSheetProps> = requireNati
   'BottomSheetView'
 );
 
-function transformBottomSheetProps(props: BottomSheetProps): NativeBottomSheetProps {
-  const { modifiers, ...restProps } = props;
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-    onIsPresentedChange: ({ nativeEvent: { isPresented } }) => {
-      props?.onIsPresentedChange?.(isPresented);
-    },
-  };
-}
-
 /**
  * `BottomSheet` presents content from the bottom of the screen.
  */
 function BottomSheet(props: BottomSheetProps) {
-  return <BottomSheetNativeView {...transformBottomSheetProps(props)} />;
+  const { modifiers, onIsPresentedChange, onDismiss, ...restProps } = props;
+  const [isMounted, setIsMounted] = useState(props.isPresented);
+
+  if (props.isPresented && !isMounted) {
+    setIsMounted(true);
+  }
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return (
+    <BottomSheetNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onIsPresentedChange={({ nativeEvent: { isPresented } }) => {
+        onIsPresentedChange?.(isPresented);
+      }}
+      onDismiss={() => {
+        setIsMounted(false);
+        onDismiss?.();
+      }}
+    />
+  );
 }
 
 export { BottomSheet };

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

@@ -45,6 +45,7 @@ export type HostProps = {
 
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
 } & CommonViewModifierProps;
 
 const HostNativeView: React.ComponentType<

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

@@ -3,6 +3,32 @@ import { requireNativeView } from 'expo';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 
+/**
+ * Scroll phase emitted by the `onScrollPhaseChange(...)` modifier. Mirrors
+ * SwiftUI's `ScrollPhase` (iOS 18+).
+ */
+export type ScrollPhase = 'idle' | 'tracking' | 'interacting' | 'animating' | 'decelerating';
+
+/**
+ * Snapshot of a `ScrollView`'s scroll geometry, emitted by the
+ * `useScrollGeometryChange(...)` and `onScrollPhaseChange(...)` modifiers
+ * (iOS 18+).
+ */
+export type ScrollGeometry = {
+  /** Horizontal content offset, in points. */
+  contentOffsetX: number;
+  /** Vertical content offset, in points. */
+  contentOffsetY: number;
+  /** Width of the visible scroll container, in points. */
+  containerWidth: number;
+  /** Height of the visible scroll container, in points. */
+  containerHeight: number;
+  /** Total width of the scrollable content, in points. */
+  contentWidth: number;
+  /** Total height of the scrollable content, in points. */
+  contentHeight: number;
+};
+
 export type ScrollViewProps = {
   children: React.ReactNode;
   /**
@@ -23,8 +49,15 @@ const ScrollViewNativeView: React.ComponentType<ScrollViewProps> = requireNative
   'ScrollViewComponent'
 );
 
+/**
+ * SwiftUI `ScrollView` wrapper. To control scroll position, pair this with the
+ * `scrollPosition(state, { onChange })` modifier and a `useNativeState`-backed
+ * id. Write `state.value = targetId` for an instant scroll, or wrap the write
+ * in `withAnimation(...)` from `@expo/ui/swift-ui` for an animated one.
+ */
 export function ScrollView(props: ScrollViewProps) {
   const { modifiers, ...restProps } = props;
+
   return (
     <ScrollViewNativeView
       modifiers={modifiers}

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

@@ -1,10 +1,7 @@
 import { requireNativeView } from 'expo';
 import type { Ref } from 'react';
 
-import { worklets } from '../../State/optionalWorklets';
-import type { ObservableState } from '../../State/useNativeState';
-import { useWorkletProp } from '../../State/useWorkletProp';
-import { getStateId } from '../../State/utils';
+import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
 import type { ViewEvent } from '../../types';
 import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';

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

@@ -1,9 +1,7 @@
 import { requireNativeView } from 'expo';
 import { type SFSymbol } from 'sf-symbols-typescript';
 
-import { type ObservableState } from '../../State/useNativeState';
-import { useWorkletProp } from '../../State/useWorkletProp';
-import { getStateId } from '../../State/utils';
+import { getStateId, type ObservableState, useWorkletProp } from '../../State';
 import { createViewModifierEventListener } from '../modifiers/utils';
 import { type CommonViewModifierProps } from '../types';
 

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

@@ -1,10 +1,7 @@
 import { requireNativeView } from 'expo';
 import type { Ref } from 'react';
 
-import { worklets } from '../../State/optionalWorklets';
-import type { ObservableState } from '../../State/useNativeState';
-import { useWorkletProp } from '../../State/useWorkletProp';
-import { getStateId } from '../../State/utils';
+import { getStateId, type ObservableState, useWorkletProp, worklets } from '../../State';
 import type { ViewEvent } from '../../types';
 import { Slot } from '../SlotView';
 import { createViewModifierEventListener } from '../modifiers/utils';

package/src/swift-ui/index.tsx

@@ -1,5 +1,3 @@
-import '../State/index.fx';
-
 export * from './AccessoryWidgetBackground';
 export * from './Alert';
 export * from './BottomSheet';
@@ -36,7 +34,8 @@ export * from './Spacer';
 export * from './Stepper';
 export * from './SwipeActions';
 export * from './Text';
-export { useNativeState } from '../State/useNativeState';
+export { useNativeState } from '../State';
+export { withAnimation, type WithAnimationCompletionCriteria } from './withAnimation';
 export * from './SyncToggle';
 export * from './TabView';
 export * from './Toggle';

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

@@ -19,6 +19,7 @@ import { datePickerStyle } from './datePickerStyle';
 import { environment } from './environment';
 import { gaugeStyle } from './gaugeStyle';
 import { progressViewStyle } from './progressViewStyle';
+import { onScrollPhaseChange, useScrollGeometryChange } from './scrollObservation';
 import { id, scrollPosition } from './scrollPosition';
 import { symbolEffect } from './symbolEffect';
 import type { Color } from './types';
@@ -981,30 +982,33 @@ export const listSectionMargins = (params?: {
 
 /**
  * Sets the font properties of a view.
- * Supports both custom font families and system fonts with weight and design options.
  *
- * @param params - The font configuration. When `family` is provided, it uses Font.custom().
- * When `family` is not provided, it uses Font.system() with the specified weight and design.
+ * Pass `textStyle` to scale with the user's Dynamic Type setting. Combine
+ * it with `family` to scale a custom font.
  *
  * @example
  * ```tsx
- * // Custom font family
- * <Text modifiers={[font({ family: 'Helvetica', size: 18 })]}>Custom Font Text</Text>
+ * // Scales with Dynamic Type
+ * <Text modifiers={[font({ textStyle: 'largeTitle', weight: 'bold' })]}>Hello</Text>
  *
- * // System font with weight and design
- * <Text modifiers={[font({ weight: 'bold', design: 'rounded', size: 16 })]}>System Font Text</Text>
+ * // Custom font that scales relative to the body text style
+ * <Text modifiers={[font({ textStyle: 'body', family: 'Helvetica', size: 18 })]}>Hi</Text>
+ *
+ * // Fixed-size system font (no Dynamic Type scaling)
+ * <Text modifiers={[font({ weight: 'bold', design: 'rounded', size: 16 })]}>Static</Text>
  * ```
- * @see Official [SwiftUI documentation for `custom(_:size:)`](https://developer.apple.com/documentation/swiftui/font/custom(_:size:)) and Official [SwiftUI documentation for `system(size:weight:design:)`](https://developer.apple.com/documentation/swiftui/font/system(size:weight:design:)).
+ * @see Official SwiftUI documentation for [`system(_:design:weight:)`](https://developer.apple.com/documentation/swiftui/font/system(_:design:weight:)), and [`custom(_:size:relativeTo:)`](https://developer.apple.com/documentation/swiftui/font/custom(_:size:relativeto:)).
  */
 export const font = (params: {
+  /** Custom font family name. */
+  family?: string;
   /**
-   * Custom font family name.
-   * If provided, uses `Font.custom()`.
+   * Font size in points. Ignored when only `textStyle` is set.
+   *
+   * @default 17
    */
-  family?: string;
-  /** Font size in points. */
   size?: number;
-  /** Font weight for system fonts. */
+  /** Font weight. */
   weight?:
     | 'ultraLight'
     | 'thin'
@@ -1015,8 +1019,24 @@ export const font = (params: {
     | 'bold'
     | 'heavy'
     | 'black';
-  /** Font design for system fonts */
+  /** Font design. Applied when no `family` is provided. `Font.custom` always uses the embedded font's own design. */
   design?: 'default' | 'rounded' | 'serif' | 'monospaced';
+  /**
+   * SwiftUI text style. When set, the resulting font scales with the user's
+   * Dynamic Type setting.
+   */
+  textStyle?:
+    | 'largeTitle'
+    | 'title'
+    | 'title2'
+    | 'title3'
+    | 'headline'
+    | 'subheadline'
+    | 'body'
+    | 'callout'
+    | 'footnote'
+    | 'caption'
+    | 'caption2';
 }) => createModifier('font', params);
 /**
  * Asks grid layouts not to offer the view extra size in the specified axes.
@@ -1339,6 +1359,8 @@ export type BuiltInModifier =
   | ReturnType<typeof scrollTargetLayout>
   | ReturnType<typeof id>
   | ReturnType<typeof scrollPosition>
+  | ReturnType<typeof onScrollPhaseChange>
+  | NonNullable<ReturnType<typeof useScrollGeometryChange>>
   | ReturnType<typeof moveDisabled>
   | ReturnType<typeof deleteDisabled>
   | ReturnType<typeof environment>
@@ -1429,6 +1451,7 @@ export * from './presentationModifiers';
 export * from './environment';
 export * from './scrollPosition';
 export * from './symbolEffect';
+export * from './scrollObservation';
 export * from './widgets';
 export type {
   TimingAnimationParams,

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

@@ -0,0 +1,80 @@
+import { getStateId, useWorkletProp, worklets } from '../../State';
+import type { ScrollGeometry, ScrollPhase } from '../ScrollView';
+import { createModifier, createModifierWithEventListener } from './createModifier';
+
+/**
+ * Fires when the scroll geometry changes — i.e., on every scroll update and
+ * on container/content size changes. Use to drive continuous progress UI
+ * such as page indicators, parallax, or fractional offsets.
+ *
+ * If the callback is marked with the `'worklet'` directive, it runs
+ * synchronously on the UI thread (no JS-thread round-trip); otherwise it is
+ * delivered asynchronously as a regular JS event. Both paths share the same
+ * native modifier — the worklet variant is automatically wrapped in a
+ * `WorkletCallback` shared object whose lifetime is managed by the hook.
+ *
+ * This is a hook because the worklet path requires a stable shared-object
+ * reference across renders. Call it at the top of your component, then
+ * include the returned modifier in your `modifiers` array.
+ *
+ * Apply to a SwiftUI `ScrollView` (and other scrollable views). On iOS below
+ * 18.0 the modifier is a no-op.
+ *
+ * @platform ios 18.0+
+ * @platform tvos 18.0+
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/onscrollgeometrychange(for:of:_:)).
+ *
+ * @example
+ * ```tsx
+ * const geometryModifier = useScrollGeometryChange((g) => {
+ *   'worklet';
+ *   progress.value = g.contentOffsetX / g.containerWidth;
+ * });
+ *
+ * <ScrollView modifiers={[geometryModifier]} />
+ * ```
+ */
+export function useScrollGeometryChange(callback?: (geometry: ScrollGeometry) => void) {
+  const isWorklet = !!callback && !!worklets?.isWorkletFunction?.(callback);
+  const workletCallback = useWorkletProp(
+    isWorklet ? callback : undefined,
+    'onScrollGeometryChange'
+  );
+
+  if (!callback) {
+    return null;
+  }
+  if (isWorklet && workletCallback) {
+    return createModifier('onScrollGeometryChange', {
+      workletCallback: getStateId(workletCallback),
+    });
+  }
+  return createModifierWithEventListener('onScrollGeometryChange', (event: ScrollGeometry) =>
+    callback(event)
+  );
+}
+
+/**
+ * Fires when SwiftUI's scroll phase changes (e.g., the user begins dragging,
+ * the scroll view starts decelerating, or scrolling settles to idle). The
+ * second argument is the scroll geometry sampled at the phase transition,
+ * useful for reading the final offset on settle without subscribing to
+ * per-frame `onScrollGeometryChange`.
+ *
+ * Apply to a SwiftUI `ScrollView` (and other scrollable views). On iOS below
+ * 18.0 the modifier is a no-op.
+ *
+ * @platform ios 18.0+
+ * @platform tvos 18.0+
+ *
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/onscrollphasechange(_:)).
+ */
+export const onScrollPhaseChange = (
+  callback: (phase: ScrollPhase, geometry: ScrollGeometry) => void
+) =>
+  createModifierWithEventListener(
+    'onScrollPhaseChange',
+    (event: { phase: ScrollPhase; geometry: ScrollGeometry }) =>
+      callback(event.phase, event.geometry)
+  );