@expo/ui 56.0.8 → 56.0.10

package/src/community/pager-view/PagerView.ios.tsx

@@ -0,0 +1,267 @@
+import {
+  Children,
+  isValidElement,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
+import { Platform } from 'react-native';
+
+import { wrapNativeEvent, type PagerViewProps } from './types';
+import { useNativeState, worklets } from '../../State';
+import { Group } from '../../swift-ui/Group';
+import { Host } from '../../swift-ui/Host';
+import { LazyHStack } from '../../swift-ui/LazyHStack';
+import { RNHostView } from '../../swift-ui/RNHostView';
+import { ScrollView, type ScrollGeometry, type ScrollPhase } from '../../swift-ui/ScrollView';
+import {
+  containerRelativeFrame,
+  id,
+  onScrollPhaseChange,
+  scrollDisabled,
+  scrollPosition,
+  scrollTargetBehavior,
+  scrollTargetLayout,
+  useScrollGeometryChange,
+} from '../../swift-ui/modifiers';
+import { Animation } from '../../swift-ui/modifiers/animation';
+import { withAnimation } from '../../swift-ui/withAnimation';
+
+function phaseToPageState(phase: ScrollPhase): 'idle' | 'dragging' | 'settling' {
+  switch (phase) {
+    case 'idle':
+      return 'idle';
+    case 'tracking':
+    case 'interacting':
+      return 'dragging';
+    case 'animating':
+    case 'decelerating':
+      return 'settling';
+  }
+}
+
+/**
+ * Drop-in replacement for `react-native-pager-view` on iOS.
+ *
+ * Renders a SwiftUI `ScrollView` with paging behavior. Scroll position is the
+ * single source of truth: an `ObservableState` bound through the
+ * `scrollPosition` modifier drives initial placement, user-swipe writeback,
+ * and imperative `setPage` / `setPageWithoutAnimation`. The animated path
+ * routes the write through `withAnimation`; if `react-native-worklets` isn't
+ * installed, `setPage` falls back to a non-animated jump. Requires iOS 17+.
+ * Continuous progress (`onPageScroll`) and scroll state
+ * (`onPageScrollStateChanged`) events require iOS 18+.
+ */
+export function PagerView(props: PagerViewProps) {
+  const {
+    ref,
+    initialPage = 0,
+    scrollEnabled = true,
+    onPageScroll,
+    onPageScrollStateChanged,
+    onPageSelected,
+    children,
+    style,
+  } = props;
+
+  warnIfPreIOS18ScrollCallbacksDropped(onPageScroll, onPageScrollStateChanged);
+
+  const [scrollEnabledState, setScrollEnabledState] = useState(scrollEnabled);
+  useEffect(() => {
+    setScrollEnabledState(scrollEnabled);
+  }, [scrollEnabled]);
+
+  const validChildren = useMemo(
+    () => Children.toArray(children).filter((c): c is ReactElement => isValidElement(c)),
+    [children]
+  );
+  const pageCount = validChildren.length;
+  const pageCountRef = useRef(0);
+  pageCountRef.current = pageCount;
+
+  // Clamp on first render — out-of-range initials produce an id that matches
+  // no `Group`, leaving `.scrollPosition(id:)` silently stuck at 0.
+  const [clampedInitialPage] = useState(() => {
+    if (pageCount === 0) return 0;
+    return Math.max(0, Math.min(pageCount - 1, initialPage));
+  });
+
+  const activePageState = useNativeState<string | null>(
+    clampedInitialPage > 0 ? String(clampedInitialPage) : null
+  );
+
+  // The SwiftUI writeback fires for both user swipes and our own imperative
+  // writes; dedup against this ref so `onPageSelected` fires once per change.
+  const lastSelectedPageRef = useRef(clampedInitialPage);
+
+  // Read the latest `onPageSelected` through a ref so the shrink-clamp effect
+  // doesn't need it in deps (and won't re-run / double-fire on callback
+  // identity changes).
+  const onPageSelectedRef = useRef(onPageSelected);
+  onPageSelectedRef.current = onPageSelected;
+
+  const handleScrolledIDChange = (newId: string | null) => {
+    if (newId == null) return;
+    const page = parseInt(newId, 10);
+    if (!Number.isFinite(page)) return;
+    if (page !== lastSelectedPageRef.current) {
+      lastSelectedPageRef.current = page;
+      onPageSelectedRef.current?.(wrapNativeEvent({ position: page }));
+    }
+  };
+
+  // Without clamping, an out-of-range id would silently no-op on
+  // `.scrollPosition(id:)` instead of jumping to the nearest page.
+  const clampPage = (page: number): number | null => {
+    const count = pageCountRef.current;
+    if (count === 0 || !Number.isFinite(page)) return null;
+    return Math.max(0, Math.min(count - 1, page));
+  };
+
+  // Bypasses the public `value` setter on JS-thread writes — its dev warning
+  // is aimed at user code; our own imperative API is an intentional JS-thread
+  // writer. Inside a worklet we use `activePageState.value = …` directly,
+  // which routes through the SharedObject prototype installed by `index.fx`.
+  const writePageFromJS = (id: string) => {
+    (activePageState as unknown as { setValue(v: { value: string }): void }).setValue({
+      value: id,
+    });
+  };
+
+  // Re-anchor when the page count drops past the current selection. Matches
+  // Android, where Compose's `PagerState` clamps `currentPage` to the new
+  // max and `settledPage` fires the corresponding event. Without this on
+  // iOS, `.scrollPosition(id:)` silently no-ops on the missing id and the
+  // pager visually drifts without firing `onPageSelected`.
+  useLayoutEffect(() => {
+    if (pageCount === 0) return;
+    if (lastSelectedPageRef.current < pageCount) return;
+    const clamped = pageCount - 1;
+    lastSelectedPageRef.current = clamped;
+    writePageFromJS(String(clamped));
+    onPageSelectedRef.current?.(wrapNativeEvent({ position: clamped }));
+  }, [pageCount]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      setPage: (page: number) => {
+        const clamped = clampPage(page);
+        if (clamped == null) return;
+        const nextId = String(clamped);
+        // `withAnimation` requires `react-native-worklets`; fall back to an
+        // instant jump if it isn't installed.
+        if (worklets) {
+          // `null` would disable animation; `Animation.default` opts into
+          // SwiftUI's default paging animation.
+          withAnimation(Animation.default, () => {
+            'worklet';
+            activePageState.value = nextId;
+          });
+        } else {
+          writePageFromJS(nextId);
+        }
+      },
+      setPageWithoutAnimation: (page: number) => {
+        const clamped = clampPage(page);
+        if (clamped == null) return;
+        writePageFromJS(String(clamped));
+      },
+      setScrollEnabled: setScrollEnabledState,
+    }),
+    [activePageState]
+  );
+
+  const handleScrollGeometry = useMemo(
+    () => (onPageScroll ? buildHandleScrollGeometry(onPageScroll) : undefined),
+    [onPageScroll]
+  );
+  const geometryModifier = useScrollGeometryChange(handleScrollGeometry);
+
+  const phaseModifier = onPageScrollStateChanged
+    ? onScrollPhaseChange((phase) =>
+        onPageScrollStateChanged(wrapNativeEvent({ pageScrollState: phaseToPageState(phase) }))
+      )
+    : null;
+
+  const pages = validChildren.map((child, index) => (
+    <Group
+      key={child.key ?? String(index)}
+      modifiers={[containerRelativeFrame({ axes: 'horizontal' }), id(String(index))]}>
+      <RNHostView>{child}</RNHostView>
+    </Group>
+  ));
+
+  // Toggle the flag rather than splicing the modifier in/out — SwiftUI diffs
+  // modifiers by position, so a shifting array resets the ScrollView's content.
+  const modifiers = [
+    scrollTargetBehavior('paging'),
+    scrollDisabled(!scrollEnabledState),
+    scrollPosition(activePageState, { onChange: handleScrolledIDChange }),
+    ...(geometryModifier ? [geometryModifier] : []),
+    ...(phaseModifier ? [phaseModifier] : []),
+  ];
+
+  return (
+    <Host style={style ?? { flex: 1 }}>
+      <ScrollView axes="horizontal" showsIndicators={false} modifiers={modifiers}>
+        <LazyHStack spacing={0} modifiers={[scrollTargetLayout()]}>
+          {pages}
+        </LazyHStack>
+      </ScrollView>
+    </Host>
+  );
+}
+
+function geometryToPageScroll(geometry: ScrollGeometry): { position: number; offset: number } {
+  'worklet';
+  // Clamp so rubber-band overscroll doesn't emit `position` outside
+  // `[0, pageCount - 1]`. `Math.round` tolerates sub-pixel content sizing.
+  const pageCount = Math.max(1, Math.round(geometry.contentWidth / geometry.containerWidth));
+  const positionFloat = Math.max(
+    0,
+    Math.min(pageCount - 1, geometry.contentOffsetX / geometry.containerWidth)
+  );
+  const position = Math.floor(positionFloat);
+  return { position, offset: positionFloat - position };
+}
+
+// Mirrors the worklet-ness of the user's callback so the per-frame mapping
+// stays on the UI runtime when the user is also on it.
+function buildHandleScrollGeometry(
+  userOnPageScroll: NonNullable<PagerViewProps['onPageScroll']>
+): (geometry: ScrollGeometry) => void {
+  if (worklets?.isWorkletFunction?.(userOnPageScroll)) {
+    return (geometry) => {
+      'worklet';
+      if (geometry.containerWidth <= 0) return;
+      userOnPageScroll(wrapNativeEvent(geometryToPageScroll(geometry)));
+    };
+  }
+  return (geometry) => {
+    if (geometry.containerWidth <= 0) return;
+    userOnPageScroll(wrapNativeEvent(geometryToPageScroll(geometry)));
+  };
+}
+
+let didWarnPreIOS18 = false;
+function warnIfPreIOS18ScrollCallbacksDropped(
+  onPageScroll: PagerViewProps['onPageScroll'],
+  onPageScrollStateChanged: PagerViewProps['onPageScrollStateChanged']
+) {
+  if (!__DEV__ || didWarnPreIOS18) return;
+  if (!onPageScroll && !onPageScrollStateChanged) return;
+  const major = parseInt(String(Platform.Version), 10);
+  if (Number.isFinite(major) && major < 18) {
+    didWarnPreIOS18 = true;
+    console.warn(
+      `[expo-ui PagerView] onPageScroll and onPageScrollStateChanged require iOS 18+ ` +
+        `and will not fire on iOS ${Platform.Version}. Guard with Platform.Version or ` +
+        `provide a fallback for older iOS targets.`
+    );
+  }
+}

package/src/community/pager-view/PagerView.tsx

@@ -0,0 +1,14 @@
+import { Platform } from 'react-native';
+
+import type { PagerViewProps } from './types';
+
+/**
+ * A drop-in replacement for `react-native-pager-view`. Renders a horizontally
+ * paged view backed by Jetpack Compose's `HorizontalPager` on Android and
+ * SwiftUI on iOS. Each child is treated as a separate page.
+ */
+export function PagerView(_props: PagerViewProps): never {
+  throw new Error(
+    `@expo/ui/community/pager-view is not implemented on ${Platform.OS}. Supported platforms: android, ios.`
+  );
+}

package/src/community/pager-view/index.tsx

@@ -0,0 +1,13 @@
+export type {
+  PagerViewProps,
+  PagerViewRef,
+  PagerViewOnPageScrollEventData,
+  PagerViewOnPageSelectedEventData,
+  PageScrollStateChangedEventData,
+  PagerViewOnPageScrollEvent,
+  PagerViewOnPageSelectedEvent,
+  PageScrollStateChangedEvent,
+} from './types';
+
+// named export is for the docs generator; default for normal consumption
+export { PagerView, PagerView as default } from './PagerView';

package/src/community/pager-view/types.tsx

@@ -0,0 +1,137 @@
+import type { ReactNode, Ref } from 'react';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+
+/**
+ * Event payload for `onPageScroll`. Mirrors the upstream
+ * `react-native-pager-view` shape.
+ */
+export type PagerViewOnPageScrollEventData = Readonly<{
+  position: number;
+  offset: number;
+}>;
+
+/**
+ * Event payload for `onPageSelected`. Mirrors the upstream
+ * `react-native-pager-view` shape.
+ */
+export type PagerViewOnPageSelectedEventData = Readonly<{
+  position: number;
+}>;
+
+/**
+ * Event payload for `onPageScrollStateChanged`. Mirrors the upstream
+ * `react-native-pager-view` shape.
+ */
+export type PageScrollStateChangedEventData = Readonly<{
+  pageScrollState: 'idle' | 'dragging' | 'settling';
+}>;
+
+export type PagerViewOnPageScrollEvent = NativeSyntheticEvent<PagerViewOnPageScrollEventData>;
+export type PagerViewOnPageSelectedEvent = NativeSyntheticEvent<PagerViewOnPageSelectedEventData>;
+export type PageScrollStateChangedEvent = NativeSyntheticEvent<PageScrollStateChangedEventData>;
+
+/**
+ * Wraps a payload as `NativeSyntheticEvent`. We only populate `nativeEvent`
+ * since our consumers (mirroring upstream `react-native-pager-view`) read
+ * only `event.nativeEvent.X`; the unset SyntheticEvent fields would never
+ * be observed in practice.
+ */
+export const wrapNativeEvent = <T,>(nativeEvent: T): NativeSyntheticEvent<T> => {
+  'worklet';
+  return { nativeEvent } as NativeSyntheticEvent<T>;
+};
+
+/**
+ * Props for the `PagerView` component.
+ * Compatible with `react-native-pager-view`.
+ */
+export type PagerViewProps = ViewProps & {
+  /**
+   * Ref handle exposing imperative `setPage`, `setPageWithoutAnimation`,
+   * and `setScrollEnabled` methods.
+   */
+  ref?: Ref<PagerViewRef>;
+  /**
+   * Index of the page that is initially selected. Read **once** on mount;
+   * later changes are ignored. To navigate after mount, call
+   * `ref.setPage()` or `ref.setPageWithoutAnimation()`.
+   * @default 0
+   */
+  initialPage?: number;
+  /**
+   * Whether the user can swipe between pages.
+   * @default true
+   */
+  scrollEnabled?: boolean;
+  /**
+   * Layout direction for paging.
+   * @default 'ltr'
+   * @platform android
+   */
+  layoutDirection?: 'ltr' | 'rtl';
+  /**
+   * Number of pages kept off-screen on each side of the visible page.
+   * @platform android
+   */
+  offscreenPageLimit?: number;
+  /**
+   * Pixels of padding between pages.
+   * @platform android
+   */
+  pageMargin?: number;
+  /**
+   * Fires continuously while a swipe is in progress. The event's `position`
+   * is the index of the leading visible page; `offset` is the fractional
+   * progress toward the next page in the `[0, 1)` range.
+   *
+   * **iOS 18+ only.**
+   */
+  onPageScroll?: (event: PagerViewOnPageScrollEvent) => void;
+  /**
+   * Fires when a page is fully selected. The event's `position` is the
+   * index of the new page.
+   */
+  onPageSelected?: (event: PagerViewOnPageSelectedEvent) => void;
+  /**
+   * Fires when the scroll state changes between `idle`, `dragging`,
+   * and `settling`.
+   *
+   * **iOS 18+ only.**
+   */
+  onPageScrollStateChanged?: (event: PageScrollStateChangedEvent) => void;
+  /**
+   * Pages of the pager. Each child is treated as a separate page and
+   * stretched to fill the pager. Each child should have a stable `key`.
+   */
+  children?: ReactNode;
+};
+
+/**
+ * Ref handle for the `PagerView` component.
+ * Compatible with `react-native-pager-view`.
+ */
+export type PagerViewRef = {
+  /**
+   * Animate the pager to the given page index. Out-of-range indices are
+   * silently ignored. On iOS the animation requires `react-native-worklets`;
+   * without it, `setPage` falls back to a non-animated jump.
+   */
+  setPage: (selectedPage: number) => void;
+  /**
+   * Jump to the given page index without an animation.
+   */
+  setPageWithoutAnimation: (selectedPage: number) => void;
+  /**
+   * Imperatively enable or disable user scrolling — convenient when
+   * toggling from a non-React context like a ref-based gesture handler.
+   *
+   * > **Note:** If the `scrollEnabled` prop is also provided, subsequent
+   * > prop changes win and reset the value set imperatively. To use the
+   * > imperative path exclusively, omit the prop.
+   *
+   * > Unlike upstream `react-native-pager-view` (which calls UIManager
+   * > directly), this triggers a re-render of `PagerView` so the new
+   * > flag flows through to the native view via props.
+   */
+  setScrollEnabled: (scrollEnabled: boolean) => void;
+};

package/src/community/picker/Picker.android.tsx

@@ -7,7 +7,7 @@ import {
   type PickerItemValue,
   type PickerProps,
 } from './types';
-import { useNativeState } from '../../State/useNativeState';
+import { useNativeState } from '../../State';
 import { DropdownMenuItem } from '../../jetpack-compose/DropdownMenu/DropdownMenuItem';
 import {
   ExposedDropdownMenuBox,

package/src/community/segmented-control/vendor/SegmentsSeparators.tsx

@@ -12,7 +12,8 @@ export function SegmentsSeparators({
   values: number;
   selectedIndex?: number;
 }) {
-  const colorScheme = useColorScheme();
+  const isDark = useColorScheme() === 'dark';
+
   const hide = (val: number) => {
     return selectedIndex === val || selectedIndex === val + 1;
   };
@@ -22,11 +23,7 @@ export function SegmentsSeparators({
       {[...Array(values - 1).keys()].map((val) => (
         <View
           key={val}
-          style={[
-            styles.separator,
-            colorScheme === 'dark' && styles.darkSeparator,
-            hide(val) && styles.hide,
-          ]}
+          style={[styles.separator, isDark && styles.darkSeparator, hide(val) && styles.hide]}
         />
       ))}
     </View>

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'> & {