@expo/ui 56.0.9 → 56.0.11

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

@@ -1,6 +1,7 @@
 import { requireNativeView } from 'expo';
 import type { Ref } from 'react';
 
+import { getStateId, useWorkletProp, worklets } from '../../State';
 import { type ModifierConfig, type ViewEvent } from '../../types';
 import { type PaddingValuesRecord } from '../Carousel';
 import { createViewModifierEventListener } from '../modifiers/utils';
@@ -19,6 +20,12 @@ export type HorizontalPagerHandle = {
   scrollToPage: (page: number) => Promise<void>;
 };
 
+/**
+ * Kind of drag interaction reported by `onDragInteraction`. Mirrors Compose's
+ * `DragInteraction.Start` / `DragInteraction.Stop` / `DragInteraction.Cancel`.
+ */
+export type HorizontalPagerDragInteraction = 'start' | 'stop' | 'cancel';
+
 export type HorizontalPagerProps = {
   /**
    * Imperative handle for programmatic navigation. Mirrors the methods on
@@ -42,6 +49,28 @@ export type HorizontalPagerProps = {
    * swipe or programmatic scroll has fully settled.
    */
   onSettledPageChange?: (page: number) => void;
+  /**
+   * Fires continuously while a swipe is in progress. Mirrors Compose's
+   * `PagerState.currentPage` and `currentPageOffsetFraction` — the latter is
+   * the signed fractional offset from `currentPage`, in the `[-0.5, 0.5]` range.
+   *
+   * If the callback is marked with the `'worklet'` directive, it runs
+   * synchronously on the UI thread; otherwise it is delivered asynchronously
+   * as a regular JS event.
+   */
+  onPageScroll?: (currentPage: number, currentPageOffsetFraction: number) => void;
+  /**
+   * Fires when Compose's `PagerState.isScrollInProgress` toggles — true while
+   * the pager is being dragged or animating to a snap target, false once it
+   * has settled.
+   */
+  onScrollInProgressChange?: (isScrollInProgress: boolean) => void;
+  /**
+   * Fires for each drag interaction emitted by `PagerState.interactionSource`.
+   * Combine with `onScrollInProgressChange` to distinguish user dragging from
+   * fling/snap-settling.
+   */
+  onDragInteraction?: (kind: HorizontalPagerDragInteraction) => void;
   /**
    * Spacing between pages in dp.
    * @default 0
@@ -79,35 +108,77 @@ export type HorizontalPagerProps = {
 
 type NativeHorizontalPagerProps = Omit<
   HorizontalPagerProps,
-  'onCurrentPageChange' | 'onSettledPageChange'
+  | 'onCurrentPageChange'
+  | 'onSettledPageChange'
+  | 'onPageScroll'
+  | 'onScrollInProgressChange'
+  | 'onDragInteraction'
 > &
   ViewEvent<'onCurrentPageChange', { position: number }> &
-  ViewEvent<'onSettledPageChange', { position: number }>;
+  ViewEvent<'onSettledPageChange', { position: number }> &
+  ViewEvent<'onPageScroll', { currentPage: number; currentPageOffsetFraction: number }> &
+  ViewEvent<'onScrollInProgressChange', { isScrollInProgress: boolean }> &
+  ViewEvent<'onDragInteraction', { kind: HorizontalPagerDragInteraction }> & {
+    onPageScrollSync?: number | null;
+  };
 
 const NativeView: React.ComponentType<NativeHorizontalPagerProps> = requireNativeView(
   'ExpoUI',
   'HorizontalPagerView'
 );
 
-function transformProps(props: HorizontalPagerProps): NativeHorizontalPagerProps {
-  const { modifiers, onCurrentPageChange, onSettledPageChange, ...restProps } = props;
-  return {
-    modifiers,
-    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
-    ...restProps,
-    onCurrentPageChange: onCurrentPageChange
-      ? ({ nativeEvent: { position } }) => onCurrentPageChange(position)
-      : undefined,
-    onSettledPageChange: onSettledPageChange
-      ? ({ nativeEvent: { position } }) => onSettledPageChange(position)
-      : undefined,
-  };
-}
-
 /**
  * A horizontally scrolling pager that snaps to individual pages,
  * matching Compose's `HorizontalPager`.
  */
 export function HorizontalPager(props: HorizontalPagerProps) {
-  return <NativeView {...transformProps(props)} />;
+  const {
+    modifiers,
+    onCurrentPageChange,
+    onSettledPageChange,
+    onPageScroll,
+    onScrollInProgressChange,
+    onDragInteraction,
+    ...restProps
+  } = props;
+
+  const isPageScrollWorklet = !!onPageScroll && !!worklets?.isWorkletFunction?.(onPageScroll);
+  const pageScrollWorkletCallback = useWorkletProp(
+    isPageScrollWorklet ? onPageScroll : undefined,
+    'onPageScroll'
+  );
+
+  return (
+    <NativeView
+      {...restProps}
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      onCurrentPageChange={
+        onCurrentPageChange
+          ? ({ nativeEvent: { position } }) => onCurrentPageChange(position)
+          : undefined
+      }
+      onSettledPageChange={
+        onSettledPageChange
+          ? ({ nativeEvent: { position } }) => onSettledPageChange(position)
+          : undefined
+      }
+      onPageScroll={
+        !isPageScrollWorklet && onPageScroll
+          ? ({ nativeEvent: { currentPage, currentPageOffsetFraction } }) =>
+              onPageScroll(currentPage, currentPageOffsetFraction)
+          : undefined
+      }
+      onPageScrollSync={getStateId(pageScrollWorkletCallback)}
+      onScrollInProgressChange={
+        onScrollInProgressChange
+          ? ({ nativeEvent: { isScrollInProgress } }) =>
+              onScrollInProgressChange(isScrollInProgress)
+          : undefined
+      }
+      onDragInteraction={
+        onDragInteraction ? ({ nativeEvent: { kind } }) => onDragInteraction(kind) : undefined
+      }
+    />
+  );
 }

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

@@ -64,6 +64,7 @@ export type HostProps = {
 
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto';
 } & PrimitiveBaseProps;
 
 type NativeHostProps = Omit<HostProps, 'colorScheme'> & {

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

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

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';
@@ -65,6 +64,6 @@ 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/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,7 @@ 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';

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)
+  );

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

@@ -1,7 +1,6 @@
 import type { UnitPointValue } from '.';
 import { createModifier, createModifierWithEventListener } from './createModifier';
-import { type ObservableState } from '../../State/useNativeState';
-import { getStateId } from '../../State/utils';
+import { getStateId, type ObservableState } from '../../State';
 
 /**
  * Attaches a stable identifier to a view so it can be referenced by scroll target bindings.

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

@@ -1,6 +1,5 @@
 import { createModifier } from './createModifier';
-import { type ObservableState } from '../../State/useNativeState';
-import { getStateId } from '../../State/utils';
+import { getStateId, type ObservableState } from '../../State';
 
 // https://developer.apple.com/documentation/symbols/appearsymboleffect
 type AppearSymbolEffect = {

package/src/swift-ui/withAnimation.ts

@@ -1,6 +1,6 @@
 import { requireNativeModule } from 'expo';
 
-import { worklets } from '../State/optionalWorklets';
+import { worklets } from '../State';
 import { VALUE_SYMBOL } from './modifiers/animation/constants';
 import type { AnimationObject, ChainableAnimationType } from './modifiers/animation/types';
 

package/src/universal/BottomSheet/index.android.tsx

@@ -1,10 +1,11 @@
-import { Column, ModalBottomSheet } from '@expo/ui/jetpack-compose';
+import { Column, Host, ModalBottomSheet, type ModalBottomSheetRef } from '@expo/ui/jetpack-compose';
 import {
   fillMaxHeight,
   padding,
   testID as testIDModifier,
   type ModifierConfig,
 } from '@expo/ui/jetpack-compose/modifiers';
+import { useEffect, useRef, useState } from 'react';
 
 import type { BottomSheetProps, SnapPoint } from './types';
 
@@ -38,21 +39,43 @@ export function BottomSheet({
   testID,
   modifiers,
 }: BottomSheetProps) {
-  if (!isPresented) return null;
+  const sheetRef = useRef<ModalBottomSheetRef>(null);
+  const [mount, setMount] = useState(isPresented);
+
+  useEffect(() => {
+    if (isPresented) {
+      setMount(true);
+      return;
+    }
+    let cancelled = false;
+    sheetRef.current?.hide().then(() => {
+      if (!cancelled) setMount(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isPresented]);
+
+  if (!mount) {
+    return null;
+  }
 
   const contentModifiers: ModifierConfig[] = [padding(16, showDragIndicator ? 0 : 16, 16, 0)];
   if (shouldFillMaxHeight(snapPoints)) contentModifiers.push(fillMaxHeight());
   if (testID) contentModifiers.push(testIDModifier(testID));
 
   return (
-    <ModalBottomSheet
-      onDismissRequest={onDismiss}
-      showDragHandle={showDragIndicator}
-      skipPartiallyExpanded={shouldSkipPartiallyExpanded(snapPoints)}
-      modifiers={modifiers}>
-      {/* When the drag handle is hidden, add top padding so content doesn't crop against the top edge of the sheet. */}
-      <Column modifiers={contentModifiers}>{children}</Column>
-    </ModalBottomSheet>
+    <Host style={{ position: 'absolute' }} pointerEvents="none">
+      <ModalBottomSheet
+        ref={sheetRef}
+        onDismissRequest={onDismiss}
+        showDragHandle={showDragIndicator}
+        skipPartiallyExpanded={shouldSkipPartiallyExpanded(snapPoints)}
+        modifiers={modifiers}>
+        {/* When the drag handle is hidden, add top padding so content doesn't crop against the top edge of the sheet. */}
+        <Column modifiers={contentModifiers}>{children}</Column>
+      </ModalBottomSheet>
+    </Host>
   );
 }
 

package/src/universal/BottomSheet/index.ios.tsx

@@ -1,4 +1,4 @@
-import { BottomSheet as SwiftUIBottomSheet, Group } from '@expo/ui/swift-ui';
+import { BottomSheet as SwiftUIBottomSheet, Group, Host } from '@expo/ui/swift-ui';
 import {
   frame,
   padding,
@@ -38,15 +38,17 @@ export function BottomSheet({
   }
 
   return (
-    <SwiftUIBottomSheet
-      isPresented={isPresented}
-      onIsPresentedChange={(presented) => {
-        if (!presented) onDismiss();
-      }}
-      fitToContents={!snapPoints || snapPoints.length === 0}
-      testID={testID}>
-      <Group modifiers={presentationModifiers}>{children}</Group>
-    </SwiftUIBottomSheet>
+    <Host style={{ position: 'absolute' }} pointerEvents="none">
+      <SwiftUIBottomSheet
+        isPresented={isPresented}
+        onIsPresentedChange={(presented) => {
+          if (!presented) onDismiss();
+        }}
+        fitToContents={!snapPoints || snapPoints.length === 0}
+        testID={testID}>
+        <Group modifiers={presentationModifiers}>{children}</Group>
+      </SwiftUIBottomSheet>
+    </Host>
   );
 }
 

package/src/universal/BottomSheet/index.tsx

@@ -1,3 +1,4 @@
+import { useColorScheme } from 'react-native';
 import { Drawer } from 'vaul';
 
 import type { BottomSheetProps, SnapPoint } from './types';
@@ -33,6 +34,7 @@ export function BottomSheet({
   snapPoints,
   testID,
 }: BottomSheetProps) {
+  const isDark = useColorScheme() === 'dark';
   const vaulSnapPoints = snapPoints?.length ? snapPoints.map(snapPointToVaul) : undefined;
   const hasSnapPoints = vaulSnapPoints != null;
 
@@ -48,6 +50,7 @@ export function BottomSheet({
         <Drawer.Content
           style={{
             ...contentStyle,
+            ...(isDark && { backgroundColor: '#000' }),
             // Snap-points mode: vaul translates the drawer by `viewport - snapHeight`.
             // The drawer has to fill the viewport or it gets pushed off-screen.
             ...(hasSnapPoints ? snapPointContentStyle : noSnapPointContentStyle),