@expo/ui 56.0.9 → 56.0.11

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

@@ -0,0 +1,224 @@
+import {
+  Children,
+  isValidElement,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
+import { StyleSheet } from 'react-native';
+
+import { wrapNativeEvent, type PagerViewProps } from './types';
+import { worklets } from '../../State';
+import { HorizontalPager, type HorizontalPagerHandle } from '../../jetpack-compose/HorizontalPager';
+import { Host } from '../../jetpack-compose/Host';
+import { RNHostView } from '../../jetpack-compose/RNHostView';
+import { type BuiltinShape, Shapes, clip, fillMaxSize } from '../../jetpack-compose/modifiers';
+
+/**
+ * Drop-in replacement for `react-native-pager-view` on Android.
+ * Renders a Jetpack Compose `HorizontalPager`.
+ */
+export function PagerView(props: PagerViewProps) {
+  const {
+    ref,
+    initialPage = 0,
+    scrollEnabled = true,
+    pageMargin,
+    offscreenPageLimit,
+    layoutDirection,
+    onPageScroll,
+    onPageScrollStateChanged,
+    onPageSelected,
+    children,
+    style,
+    ...passthrough
+  } = props;
+
+  const pagerRef = useRef<HorizontalPagerHandle>(null);
+  const [scrollEnabledState, setScrollEnabledState] = useState(scrollEnabled);
+  useEffect(() => {
+    setScrollEnabledState(scrollEnabled);
+  }, [scrollEnabled]);
+
+  // Synthesize pager-view's `idle | dragging | settling` from Compose's raw
+  // signals: `isScrollInProgress` (drag or snap-animation in flight) plus
+  // drag interactions (start/stop/cancel).
+  const isScrollInProgressRef = useRef(false);
+  const isDraggingRef = useRef(false);
+  const lastEmittedScrollStateRef = useRef<'idle' | 'dragging' | 'settling' | null>(null);
+  const emitPageScrollStateIfChanged = (state: 'idle' | 'dragging' | 'settling') => {
+    if (state === lastEmittedScrollStateRef.current) return;
+    lastEmittedScrollStateRef.current = state;
+    onPageScrollStateChanged?.(wrapNativeEvent({ pageScrollState: state }));
+  };
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      setPage: (page: number) => {
+        pagerRef.current?.animateScrollToPage(page);
+      },
+      setPageWithoutAnimation: (page: number) => {
+        pagerRef.current?.scrollToPage(page);
+      },
+      setScrollEnabled: setScrollEnabledState,
+    }),
+    []
+  );
+
+  const pages = Children.toArray(children)
+    .filter((child): child is ReactElement => isValidElement(child))
+    .map((child, index) => (
+      <RNHostView key={child.key ?? String(index)} modifiers={[fillMaxSize()]}>
+        {child}
+      </RNHostView>
+    ));
+
+  const pageScrollHandler = useMemo(
+    () => (onPageScroll ? buildOnPageScrollHandler(onPageScroll) : undefined),
+    [onPageScroll]
+  );
+
+  // RN's `borderRadius` on the host View doesn't reliably clip Compose's draw
+  // pass — translate it into a Compose `clip` modifier instead.
+  const pagerModifiers = [fillMaxSize()];
+  const cornerShape = borderRadiusShape(style, layoutDirection === 'rtl');
+  if (cornerShape) {
+    pagerModifiers.push(clip(cornerShape));
+  }
+
+  return (
+    <Host style={style ?? { flex: 1 }} {...passthrough}>
+      <HorizontalPager
+        ref={pagerRef}
+        initialPage={initialPage}
+        userScrollEnabled={scrollEnabledState}
+        reverseLayout={layoutDirection === 'rtl'}
+        pageSpacing={pageMargin}
+        beyondViewportPageCount={offscreenPageLimit}
+        modifiers={pagerModifiers}
+        onSettledPageChange={(page) => {
+          onPageSelected?.(wrapNativeEvent({ position: page }));
+        }}
+        onPageScroll={pageScrollHandler}
+        onScrollInProgressChange={
+          onPageScrollStateChanged
+            ? (inProgress) => {
+                isScrollInProgressRef.current = inProgress;
+                if (!inProgress) {
+                  emitPageScrollStateIfChanged('idle');
+                } else if (!isDraggingRef.current) {
+                  emitPageScrollStateIfChanged('settling');
+                }
+              }
+            : undefined
+        }
+        onDragInteraction={
+          onPageScrollStateChanged
+            ? (kind) => {
+                if (kind === 'start') {
+                  isDraggingRef.current = true;
+                  emitPageScrollStateIfChanged('dragging');
+                } else {
+                  isDraggingRef.current = false;
+                  emitPageScrollStateIfChanged(isScrollInProgressRef.current ? 'settling' : 'idle');
+                }
+              }
+            : undefined
+        }>
+        {pages}
+      </HorizontalPager>
+    </Host>
+  );
+}
+
+// Compose's `(currentPage, fraction ∈ [-0.5, 0.5))` is anchored to the snapped
+// page; pager-view's `(position, offset ∈ [0, 1))` is anchored to the leading
+// page. Re-anchor negative fractions onto the previous page.
+function composePageToPageScroll(
+  currentPage: number,
+  currentPageOffsetFraction: number
+): { position: number; offset: number } {
+  'worklet';
+  if (currentPageOffsetFraction >= 0) {
+    return { position: currentPage, offset: currentPageOffsetFraction };
+  }
+  return { position: currentPage - 1, offset: 1 + currentPageOffsetFraction };
+}
+
+// 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 buildOnPageScrollHandler(
+  userOnPageScroll: NonNullable<PagerViewProps['onPageScroll']>
+): (currentPage: number, currentPageOffsetFraction: number) => void {
+  if (worklets?.isWorkletFunction?.(userOnPageScroll)) {
+    return (currentPage, currentPageOffsetFraction) => {
+      'worklet';
+      userOnPageScroll(
+        wrapNativeEvent(composePageToPageScroll(currentPage, currentPageOffsetFraction))
+      );
+    };
+  }
+  return (currentPage, currentPageOffsetFraction) => {
+    userOnPageScroll(
+      wrapNativeEvent(composePageToPageScroll(currentPage, currentPageOffsetFraction))
+    );
+  };
+}
+
+// Translates RN border-radius style keys to a Compose `RoundedCornerShape`.
+// Physical (`borderTopLeftRadius`) and logical (`borderTopStartRadius`) keys
+// collapse onto Compose's start/end edges, swapped under RTL.
+function borderRadiusShape(style: PagerViewProps['style'], rtl: boolean): BuiltinShape | undefined {
+  const flat = StyleSheet.flatten(style) as Record<string, unknown> | undefined;
+  if (!flat) return undefined;
+  // Compose `RoundedCornerShape` only takes Dp (numeric); RN's string values
+  // like `'50%'` are dropped — `__DEV__` warns once so the no-clip isn't silent.
+  const num = (key: string): number | undefined => {
+    const v = flat[key];
+    if (typeof v === 'number') return v > 0 ? v : undefined;
+    if (__DEV__ && typeof v === 'string') {
+      warnAboutStringBorderRadiusOnce(key, v);
+    }
+    return undefined;
+  };
+  const uniform = num('borderRadius');
+  const topLeft = num('borderTopLeftRadius');
+  const topRight = num('borderTopRightRadius');
+  const bottomLeft = num('borderBottomLeftRadius');
+  const bottomRight = num('borderBottomRightRadius');
+  const topStart = num('borderTopStartRadius') ?? (rtl ? topRight : topLeft);
+  const topEnd = num('borderTopEndRadius') ?? (rtl ? topLeft : topRight);
+  const bottomStart = num('borderBottomStartRadius') ?? (rtl ? bottomRight : bottomLeft);
+  const bottomEnd = num('borderBottomEndRadius') ?? (rtl ? bottomLeft : bottomRight);
+  const hasPerCorner =
+    topStart != null || topEnd != null || bottomStart != null || bottomEnd != null;
+  if (hasPerCorner) {
+    const fallback = uniform ?? 0;
+    return Shapes.RoundedCorner({
+      topStart: topStart ?? fallback,
+      topEnd: topEnd ?? fallback,
+      bottomStart: bottomStart ?? fallback,
+      bottomEnd: bottomEnd ?? fallback,
+    });
+  }
+  if (uniform != null) {
+    return Shapes.RoundedCorner(uniform);
+  }
+  return undefined;
+}
+
+let didWarnStringBorderRadius = false;
+function warnAboutStringBorderRadiusOnce(key: string, value: string): void {
+  if (didWarnStringBorderRadius) return;
+  didWarnStringBorderRadius = true;
+  console.warn(
+    `[expo-ui PagerView] ${key}: ${JSON.stringify(value)} — string border-radius values ` +
+      `aren't supported on the Android pager (Jetpack Compose's RoundedCornerShape requires ` +
+      `numeric Dp values). The corner radius is being dropped, so the pager won't clip. ` +
+      `Use a numeric pixel value, or omit the style key.`
+  );
+}

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

@@ -0,0 +1,273 @@
+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,
+    // Drop pager-view-only props that aren't meaningful on iOS so they don't
+    // collide with `Host`'s own prop surface.
+    layoutDirection: _layoutDirection,
+    offscreenPageLimit: _offscreenPageLimit,
+    pageMargin: _pageMargin,
+    ...passthrough
+  } = 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 }} {...passthrough}>
+      <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,131 @@
+import type { ReactNode, Ref } from 'react';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+
+export type PagerViewOnPageScrollEventData = Readonly<{
+  /** Index of the leading visible page. */
+  position: number;
+  /** Fractional progress toward the next page, in `[0, 1)`. */
+  offset: number;
+}>;
+
+export type PagerViewOnPageSelectedEventData = Readonly<{
+  /** Index of the newly selected page. */
+  position: number;
+}>;
+
+export type PageScrollStateChangedEventData = Readonly<{
+  /**
+   * `idle` when scrolling has stopped, `dragging` while the user is actively
+   * swiping, and `settling` while the pager animates to a target page.
+   */
+  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.
+   *
+   * Mark this handler with `'worklet'` (requires `react-native-worklets`)
+   * to run it synchronously on the UI thread every frame.
+   *
+   * @platform android
+   * @platform ios 18.0+
+   */
+  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`.
+   *
+   * @platform android
+   * @platform ios 18.0+
+   */
+  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.
+ */
+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.
+   *
+   * > **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.
+   */
+  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>