@onekeyfe/react-native-pager-view 3.0.157-alpha.258 → 3.0.157-alpha.273

package/lib/module/CollapsiblePagerView.js

@@ -30,6 +30,10 @@ export class CollapsiblePagerView extends React.PureComponent {
   lastMountSignature = null;
   nativeTabCommandId = 0;
   latestNativeTabTarget = null;
+
+  // Target of the last tab command native has received and not yet reported
+  // as selected. Commands superseded before their frame never reach native.
+  dispatchedNativeTabTarget = null;
   latestNativeSelectedPage = this.state.selectedPage;
   nativePagerScrollState = "idle";
   nativeTabCommandQueuedDuringScroll = false;
@@ -89,6 +93,7 @@ export class CollapsiblePagerView extends React.PureComponent {
         if (commandId !== this.nativeTabCommandId || !this.nativeRef) {
           return;
         }
+        this.dispatchedNativeTabTarget = position;
         if (animated) {
           CollapsiblePagerViewNativeCommands.setPage(this.nativeRef, position);
         } else {
@@ -136,6 +141,7 @@ export class CollapsiblePagerView extends React.PureComponent {
       const transitionComplete = pendingTarget === position;
       if (transitionComplete) {
         this.latestNativeTabTarget = null;
+        this.dispatchedNativeTabTarget = null;
         this.nativeTabCommandQueuedDuringScroll = false;
       }
       this.setState({
@@ -154,6 +160,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (scrollState === "idle" && this.latestNativeTabTarget !== null && this.latestNativeTabTarget !== this.latestNativeSelectedPage && !queuedDuringPreviousScroll) {
       ++this.nativeTabCommandId;
       this.latestNativeTabTarget = null;
+      this.dispatchedNativeTabTarget = null;
       this.setState({
         transientRetainedPages: []
       }, this.notifyMountedPagesChanged);
@@ -166,7 +173,9 @@ export class CollapsiblePagerView extends React.PureComponent {
   onNativeTabPress = event => {
     const position = pageIndex(event.nativeEvent.position);
     if (position !== null && position >= 0 && position < this.pages().length && (position !== this.state.selectedPage || this.latestNativeTabTarget !== null)) {
-      this.dispatchNativeTabPageCommand(position, this.props.nativeTabPressAnimationEnabled ?? Math.abs(position - this.state.selectedPage) <= 1);
+      // Selection state lags an in-flight transition until native reports it.
+      const currentPage = this.dispatchedNativeTabTarget ?? this.state.selectedPage;
+      this.dispatchNativeTabPageCommand(position, this.props.nativeTabPressAnimationEnabled ?? Math.abs(position - currentPage) <= 1);
     }
     this.props.onNativeTabPress?.(event);
   };

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

@@ -105,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "3.0.157-alpha.258",
+  "version": "3.0.157-alpha.273",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -69,7 +69,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-native-logger": "3.0.157-alpha.255",
+    "@onekeyfe/react-native-native-logger": "3.0.157-alpha.273",
     "react": "*",
     "react-native": "*"
   },

package/src/CollapsiblePagerView.tsx

@@ -190,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"] =
@@ -282,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,
@@ -354,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(
@@ -386,6 +392,7 @@ export class CollapsiblePagerView extends React.PureComponent<
     ) {
       ++this.nativeTabCommandId;
       this.latestNativeTabTarget = null;
+      this.dispatchedNativeTabTarget = null;
       this.setState(
         { transientRetainedPages: [] },
         this.notifyMountedPagesChanged
@@ -408,10 +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 ??
-          Math.abs(position - this.state.selectedPage) <= 1
+          Math.abs(position - currentPage) <= 1
       );
     }
     this.props.onNativeTabPress?.(event);