@onekeyfe/react-native-pager-view 3.0.158 → 3.0.160

package/lib/module/NativeScroller.js

@@ -1,25 +1,185 @@
 "use strict";
 
 import * as React from "react";
-import { ScrollView } from "react-native";
+import { findNodeHandle, Keyboard, Platform, StyleSheet, TextInput, View } from "react-native";
+import NativeScrollerHost, { Commands } from "./NativeScrollerNativeComponent";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const NATIVE_SCROLLER_NATIVE_ID_PREFIX = "rnc-collapsible-pager-native-scroller";
-/**
- * Primary non-virtualized vertical scroller for a CollapsiblePagerView page.
- */
+
+/** Supported vertical subset; horizontal, snapping, zoom and sticky rows are not supported. */
+
+// The RN 0.86 JS registry distinguishes another input from an unhandled tap.
+// TextInput.State's public facade does not export this query.
+const textInputState = require("react-native/Libraries/Components/TextInput/TextInputState").default;
+const styles = StyleSheet.create({
+  viewport: {
+    flexGrow: 1,
+    flexShrink: 1,
+    overflow: "hidden"
+  },
+  content: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    flexShrink: 0
+  }
+});
 export const NativeScroller = /*#__PURE__*/React.forwardRef(function NativeScroller({
+  children,
   nativeID,
-  nestedScrollEnabled = true,
   pagerScrollKey,
+  style,
+  contentContainerStyle,
+  onLayout,
+  onContentSizeChange,
+  refreshControl,
+  nestedScrollEnabled = true,
+  contentInset,
+  decelerationRate = "normal",
+  keyboardShouldPersistTaps = "never",
+  onScroll,
+  onScrollBeginDrag,
+  onMomentumScrollBegin,
+  onMomentumScrollEnd,
+  onStartShouldSetResponder,
+  onStartShouldSetResponderCapture,
+  onResponderGrant,
+  onResponderRelease,
+  onResponderTerminationRequest,
   ...props
-}, ref) {
+}, forwardedRef) {
+  const hostRef = React.useRef(null);
   const generatedId = React.useId();
-  const scrollKey = pagerScrollKey ?? nativeID ?? generatedId;
-  return /*#__PURE__*/_jsx(ScrollView, {
+  const [contentViewportHeight, setContentViewportHeight] = React.useState(0);
+  const [contentSize, setContentSize] = React.useState({
+    width: 0,
+    height: 0
+  });
+  const [refreshEpoch, requestRefreshSync] = React.useReducer(value => value + 1, 0);
+  const contentSizeRef = React.useRef(contentSize);
+  const scrolledSinceGrant = React.useRef(false);
+  const momentum = React.useRef(false);
+  const grantedDuringMomentum = React.useRef(false);
+  const persistTaps = keyboardShouldPersistTaps === true ? "always" : keyboardShouldPersistTaps === false ? "never" : keyboardShouldPersistTaps;
+  const contentStyle = StyleSheet.flatten(contentContainerStyle);
+  const refresh = refreshControl?.props;
+  const rate = typeof decelerationRate === "number" ? decelerationRate : decelerationRate === "fast" ? Platform.OS === "ios" ? 0.99 : 0.9 : Platform.OS === "ios" ? 0.998 : 0.985;
+  React.useEffect(() => {
+    if (hostRef.current) Commands.setRefreshState(hostRef.current, refresh?.refreshing ?? false);
+  }, [refresh?.refreshing, refreshEpoch]);
+  React.useImperativeHandle(forwardedRef, () => ({
+    scrollTo(options, x, animated) {
+      const host = hostRef.current;
+      if (!host) return;
+      if (typeof options === "number") {
+        Commands.scrollTo(host, x ?? 0, options, animated !== false);
+      } else {
+        Commands.scrollTo(host, options?.x ?? 0, options?.y ?? 0, options?.animated !== false);
+      }
+    },
+    scrollToEnd(options) {
+      if (hostRef.current) Commands.scrollToEnd(hostRef.current, options?.animated !== false);
+    },
+    flashScrollIndicators() {
+      if (hostRef.current) Commands.flashScrollIndicators(hostRef.current);
+    },
+    getNativeScrollRef: () => hostRef.current,
+    getScrollableNode: () => findNodeHandle(hostRef.current) ?? null,
+    measure: (...args) => hostRef.current?.measure(...args),
+    measureInWindow: (...args) => hostRef.current?.measureInWindow(...args),
+    measureLayout: (...args) => hostRef.current?.measureLayout(...args),
+    setNativeProps: nativeProps => hostRef.current?.setNativeProps(nativeProps),
+    focus: () => hostRef.current?.focus(),
+    blur: () => hostRef.current?.blur()
+  }), []);
+  const keyboardIsDismissible = () => Boolean(TextInput.State.currentlyFocusedInput() && (Keyboard.isVisible() || Platform.OS === "android" && Number(Platform.Version) < 30) && Keyboard.metrics()?.height !== 0);
+  return /*#__PURE__*/_jsx(NativeScrollerHost, {
     ...props,
-    ref: ref,
-    nativeID: `${NATIVE_SCROLLER_NATIVE_ID_PREFIX}:${scrollKey}`,
-    nestedScrollEnabled: nestedScrollEnabled
+    ref: hostRef,
+    nativeID: `${NATIVE_SCROLLER_NATIVE_ID_PREFIX}:${pagerScrollKey ?? nativeID ?? generatedId}`,
+    style: [styles.viewport, style],
+    nestedScrollEnabled: nestedScrollEnabled,
+    contentWidth: contentSize.width,
+    contentHeight: contentSize.height,
+    contentInsetTop: contentInset?.top ?? 0,
+    contentInsetRight: contentInset?.right ?? 0,
+    contentInsetBottom: contentInset?.bottom ?? 0,
+    contentInsetLeft: contentInset?.left ?? 0,
+    decelerationRate: rate,
+    keyboardShouldPersistTaps: persistTaps,
+    refreshEnabled: Boolean(refresh) && refresh?.enabled !== false,
+    refreshing: refresh?.refreshing ?? false,
+    refreshTintColor: refresh?.tintColor,
+    refreshColors: refresh?.colors,
+    refreshProgressBackgroundColor: refresh?.progressBackgroundColor,
+    refreshProgressViewOffset: refresh?.progressViewOffset ?? 0,
+    refreshTitle: refresh?.title,
+    refreshTitleColor: refresh?.titleColor,
+    refreshSize: refresh?.size === "large" ? "large" : "default",
+    onRefresh: () => {
+      try {
+        refresh?.onRefresh?.();
+      } finally {
+        requestRefreshSync();
+      }
+    },
+    onLayout: onLayout,
+    onContentViewportChange: event => {
+      const height = event.nativeEvent.height;
+      if (!Number.isFinite(height) || height < 0) return;
+      setContentViewportHeight(previous => previous === height ? previous : height);
+    },
+    onScroll: event => {
+      scrolledSinceGrant.current = true;
+      onScroll?.(event);
+    },
+    onScrollBeginDrag: event => {
+      scrolledSinceGrant.current = true;
+      onScrollBeginDrag?.(event);
+    },
+    onMomentumScrollBegin: event => {
+      momentum.current = true;
+      onMomentumScrollBegin?.(event);
+    },
+    onMomentumScrollEnd: event => {
+      momentum.current = false;
+      onMomentumScrollEnd?.(event);
+    },
+    onStartShouldSetResponder: event => onStartShouldSetResponder?.(event) ?? (persistTaps === "handled" && keyboardIsDismissible() && event.target !== TextInput.State.currentlyFocusedInput()),
+    onStartShouldSetResponderCapture: event => onStartShouldSetResponderCapture?.(event) ?? (momentum.current || persistTaps === "never" && keyboardIsDismissible() && typeof event.target !== "number" && !textInputState.isTextInput(event.target)),
+    onResponderGrant: event => {
+      scrolledSinceGrant.current = false;
+      grantedDuringMomentum.current = momentum.current;
+      onResponderGrant?.(event);
+    },
+    onResponderRelease: event => {
+      onResponderRelease?.(event);
+      if (persistTaps !== "always" && keyboardIsDismissible() && event.target !== TextInput.State.currentlyFocusedInput() && !scrolledSinceGrant.current && !grantedDuringMomentum.current) Keyboard.dismiss();
+    },
+    onResponderTerminationRequest: event => onResponderTerminationRequest?.(event) ?? true,
+    children: /*#__PURE__*/_jsx(View, {
+      collapsable: false,
+      style: [contentContainerStyle, (contentStyle?.flexGrow ?? 0) > 0 && (contentStyle?.minHeight === undefined || typeof contentStyle.minHeight === "number") ? {
+        minHeight: Math.max(contentViewportHeight, contentStyle?.minHeight ?? 0)
+      } : undefined, styles.content],
+      onLayout: event => {
+        const {
+          width,
+          height
+        } = event.nativeEvent.layout;
+        const previous = contentSizeRef.current;
+        if (previous.width === width && previous.height === height) return;
+        const next = {
+          width,
+          height
+        };
+        contentSizeRef.current = next;
+        setContentSize(next);
+        onContentSizeChange?.(width, height);
+      },
+      children: children
+    })
   });
 });
 NativeScroller.displayName = "NativeScroller";

package/lib/module/NativeScrollerNativeComponent.ts

@@ -0,0 +1,101 @@
+import type * as React from "react";
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type ColorValue,
+  type HostComponent,
+  type ViewProps,
+} from "react-native";
+import type {
+  DirectEventHandler,
+  Double,
+  WithDefault,
+} from "react-native/Libraries/Types/CodegenTypes";
+
+export type NativeScrollerScrollEvent = Readonly<{
+  contentInset: Readonly<{
+    top: Double;
+    right: Double;
+    bottom: Double;
+    left: Double;
+  }>;
+  contentOffset: Readonly<{ x: Double; y: Double }>;
+  contentSize: Readonly<{ width: Double; height: Double }>;
+  layoutMeasurement: Readonly<{ width: Double; height: Double }>;
+  velocity: Readonly<{ x: Double; y: Double }>;
+  targetContentOffset: Readonly<{ x: Double; y: Double }>;
+  zoomScale: Double;
+}>;
+
+export interface NativeProps extends ViewProps {
+  contentWidth?: WithDefault<Double, 0>;
+  contentHeight?: WithDefault<Double, 0>;
+  scrollEnabled?: WithDefault<boolean, true>;
+  nestedScrollEnabled?: WithDefault<boolean, true>;
+  showsVerticalScrollIndicator?: WithDefault<boolean, true>;
+  showsHorizontalScrollIndicator?: WithDefault<boolean, false>;
+  bounces?: WithDefault<boolean, true>;
+  alwaysBounceVertical?: WithDefault<boolean, true>;
+  keyboardDismissMode?: WithDefault<"none" | "on-drag" | "interactive", "none">;
+  keyboardShouldPersistTaps?: WithDefault<
+    "never" | "always" | "handled",
+    "never"
+  >;
+  scrollEventThrottle?: WithDefault<Double, 0>;
+  decelerationRate?: WithDefault<Double, 0.998>;
+  contentInsetTop?: WithDefault<Double, 0>;
+  contentInsetRight?: WithDefault<Double, 0>;
+  contentInsetBottom?: WithDefault<Double, 0>;
+  contentInsetLeft?: WithDefault<Double, 0>;
+  refreshEnabled?: WithDefault<boolean, false>;
+  refreshing?: WithDefault<boolean, false>;
+  refreshTintColor?: ColorValue;
+  refreshColors?: ReadonlyArray<ColorValue>;
+  refreshProgressBackgroundColor?: ColorValue;
+  refreshProgressViewOffset?: WithDefault<Double, 0>;
+  refreshTitle?: string;
+  refreshTitleColor?: ColorValue;
+  refreshSize?: WithDefault<"default" | "large", "default">;
+  onContentViewportChange?: DirectEventHandler<Readonly<{ height: Double }>>;
+  onRefresh?: DirectEventHandler<null>;
+  onScroll?: DirectEventHandler<NativeScrollerScrollEvent>;
+  onScrollBeginDrag?: DirectEventHandler<NativeScrollerScrollEvent>;
+  onScrollEndDrag?: DirectEventHandler<NativeScrollerScrollEvent>;
+  onMomentumScrollBegin?: DirectEventHandler<NativeScrollerScrollEvent>;
+  onMomentumScrollEnd?: DirectEventHandler<NativeScrollerScrollEvent>;
+}
+
+type NativeScrollerHost = HostComponent<NativeProps>;
+
+export interface NativeCommands {
+  scrollTo: (
+    viewRef: React.ElementRef<NativeScrollerHost>,
+    x: Double,
+    y: Double,
+    animated: boolean
+  ) => void;
+  scrollToEnd: (
+    viewRef: React.ElementRef<NativeScrollerHost>,
+    animated: boolean
+  ) => void;
+  flashScrollIndicators: (
+    viewRef: React.ElementRef<NativeScrollerHost>
+  ) => void;
+  setRefreshState: (
+    viewRef: React.ElementRef<NativeScrollerHost>,
+    refreshing: boolean
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    "scrollTo",
+    "scrollToEnd",
+    "flashScrollIndicators",
+    "setRefreshState",
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>("RNCNativeScroller", {
+  interfaceOnly: true,
+}) as NativeScrollerHost;

package/lib/typescript/src/CollapsiblePagerView.d.ts

@@ -80,9 +80,8 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
     nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
     onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
     /**
-     * Animates the page change started by a native tab press. Defaults to true.
-     * Set false to jump straight to the pressed page, so a distant tab does not
-     * scroll through every page in between, including unmounted ones.
+     * Defaults to animating adjacent native tab presses and jumping directly to
+     * non-adjacent pages. Set true to always animate, or false to always jump.
      */
     nativeTabPressAnimationEnabled?: boolean;
     /** Optional native secondary sticky header for iOS and Android. */
@@ -106,6 +105,7 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private lastMountSignature;
     private nativeTabCommandId;
     private latestNativeTabTarget;
+    private dispatchedNativeTabTarget;
     private latestNativeSelectedPage;
     private nativePagerScrollState;
     private nativeTabCommandQueuedDuringScroll;

package/lib/typescript/src/NativeScroller.d.ts

@@ -1,12 +1,20 @@
 import * as React from "react";
-import { type ScrollViewProps } from "react-native";
+import { type NativeMethods, type RefreshControlProps, type ScrollView, type ScrollViewProps, type ViewProps } from "react-native";
+import NativeScrollerHost from "./NativeScrollerNativeComponent";
 export declare const NATIVE_SCROLLER_NATIVE_ID_PREFIX = "rnc-collapsible-pager-native-scroller";
-export interface NativeScrollerProps extends ScrollViewProps {
-    /** Stable identity used when a page replaces or remounts its primary scroller. */
+/** Supported vertical subset; horizontal, snapping, zoom and sticky rows are not supported. */
+export interface NativeScrollerProps extends ViewProps, Pick<ScrollViewProps, "contentContainerStyle" | "onContentSizeChange" | "scrollEnabled" | "nestedScrollEnabled" | "showsVerticalScrollIndicator" | "showsHorizontalScrollIndicator" | "bounces" | "alwaysBounceVertical" | "contentInset" | "keyboardDismissMode" | "keyboardShouldPersistTaps" | "scrollEventThrottle" | "decelerationRate" | "onScroll" | "onScrollBeginDrag" | "onScrollEndDrag" | "onMomentumScrollBegin" | "onMomentumScrollEnd"> {
     pagerScrollKey?: string;
+    /** iOS only. Android retains AndroidX's native fling physics. */
+    decelerationRate?: ScrollViewProps["decelerationRate"];
+    /** Standard RefreshControl props are mapped to the independently owned native controller. */
+    refreshControl?: React.ReactElement<RefreshControlProps>;
 }
-/**
- * Primary non-virtualized vertical scroller for a CollapsiblePagerView page.
- */
-export declare const NativeScroller: React.ForwardRefExoticComponent<NativeScrollerProps & React.RefAttributes<import("react-native/types_generated/Libraries/Components/ScrollView/ScrollView").PublicScrollViewInstance>>;
+type HostRef = React.ElementRef<typeof NativeScrollerHost>;
+export interface NativeScrollerRef extends NativeMethods, Pick<React.ElementRef<typeof ScrollView>, "scrollTo" | "scrollToEnd" | "flashScrollIndicators"> {
+    getNativeScrollRef(): HostRef | null;
+    getScrollableNode(): number | null;
+}
+export declare const NativeScroller: React.ForwardRefExoticComponent<NativeScrollerProps & React.RefAttributes<NativeScrollerRef>>;
+export {};
 //# sourceMappingURL=NativeScroller.d.ts.map

package/lib/typescript/src/NativeScrollerNativeComponent.d.ts

@@ -0,0 +1,79 @@
+import type * as React from "react";
+import { type ColorValue, type HostComponent, type ViewProps } from "react-native";
+import type { DirectEventHandler, Double, WithDefault } from "react-native/Libraries/Types/CodegenTypes";
+export type NativeScrollerScrollEvent = Readonly<{
+    contentInset: Readonly<{
+        top: Double;
+        right: Double;
+        bottom: Double;
+        left: Double;
+    }>;
+    contentOffset: Readonly<{
+        x: Double;
+        y: Double;
+    }>;
+    contentSize: Readonly<{
+        width: Double;
+        height: Double;
+    }>;
+    layoutMeasurement: Readonly<{
+        width: Double;
+        height: Double;
+    }>;
+    velocity: Readonly<{
+        x: Double;
+        y: Double;
+    }>;
+    targetContentOffset: Readonly<{
+        x: Double;
+        y: Double;
+    }>;
+    zoomScale: Double;
+}>;
+export interface NativeProps extends ViewProps {
+    contentWidth?: WithDefault<Double, 0>;
+    contentHeight?: WithDefault<Double, 0>;
+    scrollEnabled?: WithDefault<boolean, true>;
+    nestedScrollEnabled?: WithDefault<boolean, true>;
+    showsVerticalScrollIndicator?: WithDefault<boolean, true>;
+    showsHorizontalScrollIndicator?: WithDefault<boolean, false>;
+    bounces?: WithDefault<boolean, true>;
+    alwaysBounceVertical?: WithDefault<boolean, true>;
+    keyboardDismissMode?: WithDefault<"none" | "on-drag" | "interactive", "none">;
+    keyboardShouldPersistTaps?: WithDefault<"never" | "always" | "handled", "never">;
+    scrollEventThrottle?: WithDefault<Double, 0>;
+    decelerationRate?: WithDefault<Double, 0.998>;
+    contentInsetTop?: WithDefault<Double, 0>;
+    contentInsetRight?: WithDefault<Double, 0>;
+    contentInsetBottom?: WithDefault<Double, 0>;
+    contentInsetLeft?: WithDefault<Double, 0>;
+    refreshEnabled?: WithDefault<boolean, false>;
+    refreshing?: WithDefault<boolean, false>;
+    refreshTintColor?: ColorValue;
+    refreshColors?: ReadonlyArray<ColorValue>;
+    refreshProgressBackgroundColor?: ColorValue;
+    refreshProgressViewOffset?: WithDefault<Double, 0>;
+    refreshTitle?: string;
+    refreshTitleColor?: ColorValue;
+    refreshSize?: WithDefault<"default" | "large", "default">;
+    onContentViewportChange?: DirectEventHandler<Readonly<{
+        height: Double;
+    }>>;
+    onRefresh?: DirectEventHandler<null>;
+    onScroll?: DirectEventHandler<NativeScrollerScrollEvent>;
+    onScrollBeginDrag?: DirectEventHandler<NativeScrollerScrollEvent>;
+    onScrollEndDrag?: DirectEventHandler<NativeScrollerScrollEvent>;
+    onMomentumScrollBegin?: DirectEventHandler<NativeScrollerScrollEvent>;
+    onMomentumScrollEnd?: DirectEventHandler<NativeScrollerScrollEvent>;
+}
+type NativeScrollerHost = HostComponent<NativeProps>;
+export interface NativeCommands {
+    scrollTo: (viewRef: React.ElementRef<NativeScrollerHost>, x: Double, y: Double, animated: boolean) => void;
+    scrollToEnd: (viewRef: React.ElementRef<NativeScrollerHost>, animated: boolean) => void;
+    flashScrollIndicators: (viewRef: React.ElementRef<NativeScrollerHost>) => void;
+    setRefreshState: (viewRef: React.ElementRef<NativeScrollerHost>, refreshing: boolean) => void;
+}
+export declare const Commands: NativeCommands;
+declare const _default: NativeScrollerHost;
+export default _default;
+//# sourceMappingURL=NativeScrollerNativeComponent.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "3.0.158",
+  "version": "3.0.160",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -21,6 +21,7 @@
     "lib",
     "android",
     "ios",
+    "docs",
     "react-native-pager-view.podspec",
     "!ios/build",
     "!android/build",
@@ -32,7 +33,9 @@
     "!**/__fixtures__",
     "!**/__mocks__",
     "!**/.*",
-    "!**/*.map"
+    "!**/*.map",
+    "common",
+    "react-native.config.js"
   ],
   "scripts": {
     "clean": "del-cli lib",
@@ -66,7 +69,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-native-logger": "3.0.158",
+    "@onekeyfe/react-native-native-logger": "3.0.160",
     "react": "*",
     "react-native": "*"
   },
@@ -98,7 +101,8 @@
     "ios": {
       "componentProvider": {
         "RNCViewPager": "RNCPagerViewComponentView",
-        "RNCCollapsiblePagerView": "RNCCollapsiblePagerViewComponentView"
+        "RNCCollapsiblePagerView": "RNCCollapsiblePagerViewComponentView",
+        "RNCNativeScroller": "RNCNativeScrollerComponentView"
       }
     }
   }

package/react-native-pager-view.podspec

@@ -13,7 +13,8 @@ Pod::Spec.new do |s|
   s.ios.deployment_target = "15.1"
   s.source       = { :git => "https://github.com/nicholasxuu/app-modules.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm}"
+  s.source_files = "ios/**/*.{h,m,mm}", "common/cpp/**/*.{h,cpp}"
+  s.pod_target_xcconfig = { "HEADER_SEARCH_PATHS" => '"$(PODS_TARGET_SRCROOT)/common/cpp"' }
   s.exclude_files = "ios/tests/**/*"
 
   s.test_spec "Tests" do |test_spec|

package/react-native.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        libraryName: 'pagerview',
+        componentDescriptors: [
+          'RNCViewPagerComponentDescriptor',
+          'RNCCollapsiblePagerViewComponentDescriptor',
+          'RNCNativeScrollerComponentDescriptor',
+        ],
+        cmakeListsPath: 'src/main/jni/CMakeLists.txt',
+      },
+    },
+  },
+};

package/src/CollapsiblePagerView.tsx

@@ -130,9 +130,8 @@ export interface CollapsiblePagerViewProps
   nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
   onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
   /**
-   * Animates the page change started by a native tab press. Defaults to true.
-   * Set false to jump straight to the pressed page, so a distant tab does not
-   * scroll through every page in between, including unmounted ones.
+   * Defaults to animating adjacent native tab presses and jumping directly to
+   * non-adjacent pages. Set true to always animate, or false to always jump.
    */
   nativeTabPressAnimationEnabled?: boolean;
   /** Optional native secondary sticky header for iOS and Android. */
@@ -191,6 +190,10 @@ export class CollapsiblePagerView extends React.PureComponent<
 
   private latestNativeTabTarget: number | null = null;
 
+  // Target of the last tab command native has received and not yet reported
+  // as selected. Commands superseded before their frame never reach native.
+  private dispatchedNativeTabTarget: number | null = null;
+
   private latestNativeSelectedPage = this.state.selectedPage;
 
   private nativePagerScrollState: OnPageScrollStateChangedEventData["pageScrollState"] =
@@ -283,6 +286,7 @@ export class CollapsiblePagerView extends React.PureComponent<
           if (commandId !== this.nativeTabCommandId || !this.nativeRef) {
             return;
           }
+          this.dispatchedNativeTabTarget = position;
           if (animated) {
             CollapsiblePagerViewNativeCommands.setPage(
               this.nativeRef,
@@ -355,6 +359,7 @@ export class CollapsiblePagerView extends React.PureComponent<
       const transitionComplete = pendingTarget === position;
       if (transitionComplete) {
         this.latestNativeTabTarget = null;
+        this.dispatchedNativeTabTarget = null;
         this.nativeTabCommandQueuedDuringScroll = false;
       }
       this.setState(
@@ -387,6 +392,7 @@ export class CollapsiblePagerView extends React.PureComponent<
     ) {
       ++this.nativeTabCommandId;
       this.latestNativeTabTarget = null;
+      this.dispatchedNativeTabTarget = null;
       this.setState(
         { transientRetainedPages: [] },
         this.notifyMountedPagesChanged
@@ -409,9 +415,13 @@ export class CollapsiblePagerView extends React.PureComponent<
       (position !== this.state.selectedPage ||
         this.latestNativeTabTarget !== null)
     ) {
+      // Selection state lags an in-flight transition until native reports it.
+      const currentPage =
+        this.dispatchedNativeTabTarget ?? this.state.selectedPage;
       this.dispatchNativeTabPageCommand(
         position,
-        this.props.nativeTabPressAnimationEnabled ?? true
+        this.props.nativeTabPressAnimationEnabled ??
+          Math.abs(position - currentPage) <= 1
       );
     }
     this.props.onNativeTabPress?.(event);