@onekeyfe/react-native-pager-view 3.0.172 → 3.0.174

package/ios/RNCNativeScrollerComponentView.mm

@@ -345,6 +345,8 @@ static Event RNCScrollerMetrics(UIScrollView *scroll, CGPoint velocity, CGPoint
 {
   if (!_momentumActive) return;
   _momentumActive = NO;
+  [[NSNotificationCenter defaultCenter] postNotificationName:@"OneKeyNativeListScrollCommandAccepted"
+    object:_scrollView userInfo:@{@"phase": @2}];
   [self emitScrollEvent:4 velocity:CGPointZero target:_scrollView.contentOffset];
 }
 
@@ -443,11 +445,15 @@ static Event RNCScrollerMetrics(UIScrollView *scroll, CGPoint velocity, CGPoint
     MAX(-inset.top, MIN(y,
     MAX(-inset.top, _scrollView.contentSize.height - _scrollView.bounds.size.height + inset.bottom))));
   if (CGPointEqualToPoint(target, _scrollView.contentOffset)) return;
+  [[NSNotificationCenter defaultCenter] postNotificationName:@"OneKeyNativeListScrollCommandAccepted"
+    object:_scrollView userInfo:@{@"phase": @1}];
   if (animated) {
     _momentumActive = YES;
     [self emitScrollEvent:3 velocity:CGPointZero target:target];
   }
   [_scrollView setContentOffset:target animated:animated];
+  if (!animated) [[NSNotificationCenter defaultCenter] postNotificationName:@"OneKeyNativeListScrollCommandAccepted"
+    object:_scrollView userInfo:@{@"phase": @2}];
 }
 
 - (void)scrollToEnd:(BOOL)animated

package/ios/tests/RNCCollapsiblePagerFirstFrameTests.mm

@@ -18,6 +18,7 @@ using namespace facebook::react;
 - (void)beginPageStateTransition;
 - (void)updatePageStateTransitionProgress:(CGFloat)progress;
 - (void)finishPageStateTransition;
+- (void)scrollToTop:(NSInteger)target animated:(BOOL)animated;
 - (void)preparePageForHorizontalTransitionAtIndex:(NSInteger)index;
 - (void)applyInsetsToScrollView:(UIScrollView *)scrollView pageIndex:(NSInteger)index restore:(BOOL)restore;
 @end
@@ -39,6 +40,7 @@ using namespace facebook::react;
     RNCNativeScrollerComponentView *scroller = [self addScrollerToPager:pager atIndex:0];
     NSMutableDictionary *offsets = [pager valueForKey:@"pageOffsets"];
     offsets[@"page-0"] = @660;
+    [pager setValue:@120 forKey:@"headerOffset"];
     scroller.scrollView.contentSize = CGSizeMake(0, 0);
     [pager attachScrollObserverForCurrentPage];
     XCTAssertTrue([[pager valueForKey:@"pendingPageRestoreKeys"] containsObject:@"page-0"]);
@@ -58,14 +60,14 @@ using namespace facebook::react;
       else [scroller scrollTo:0 y:-scroller.scrollView.adjustedContentInset.top animated:NO];
       XCTAssertEqualWithAccuracy(scroller.scrollView.contentOffset.y + scroller.scrollView.contentInset.top, command.integerValue == 2 ? 120 : 0, 0.01);
       XCTAssertFalse([[pager valueForKey:@"pendingPageRestoreKeys"] containsObject:@"page-0"]);
-      XCTAssertEqualWithAccuracy([offsets[@"page-0"] doubleValue], command.integerValue == 2 ? 120 : 0, 0.01);
+      XCTAssertEqualWithAccuracy([offsets[@"page-0"] doubleValue], 0, 0.01);
       XCTAssertEqual([pager valueForKey:@"observedScrollView"], scroller.scrollView);
       XCTAssertEqualObjects([pager valueForKey:@"observedPageKey"], @"page-0");
     }
     // The existing observed content-size path retries the pending restoration.
     scroller.scrollView.contentSize = CGSizeMake(320, 1500);
     XCTAssertFalse([[pager valueForKey:@"pendingPageRestoreKeys"] containsObject:@"page-0"]);
-    CGFloat expected = command.integerValue == 2 ? 120 : (command.boolValue ? 0 : 660);
+    CGFloat expected = command.integerValue == 2 ? 120 : (command.boolValue ? 0 : 780);
     XCTAssertEqualWithAccuracy(scroller.scrollView.contentOffset.y + scroller.scrollView.contentInset.top,
                               expected, 0.01, @"command=%@ must not replay a cancelled reading position", command);
     XCTAssertEqualWithAccuracy([[pager valueForKey:@"headerOffset"] doubleValue], command.integerValue == 1 ? 0 : 120, 0.01);
@@ -80,6 +82,7 @@ using namespace facebook::react;
     RNCNativeScrollerComponentView *other = [self addScrollerToPager:pager atIndex:1];
     NSMutableDictionary *offsets = [pager valueForKey:@"pageOffsets"];
     offsets[@"page-0"] = @660;
+    [pager setValue:@120 forKey:@"headerOffset"];
     offsets[@"page-1"] = @360;
     current.scrollView.contentSize = CGSizeMake(0, 0);
     [pager attachScrollObserverForCurrentPage];
@@ -103,21 +106,51 @@ using namespace facebook::react;
   NSMutableDictionary *offsets = [pager valueForKey:@"pageOffsets"];
   offsets[@"page-0"] = @0;
   offsets[@"page-1"] = @360;
+  [pager setValue:@120 forKey:@"headerOffset"];
   [pager attachScrollObserverForCurrentPage];
   XCTAssertFalse([[pager valueForKey:@"pendingPageRestoreKeys"] containsObject:@"page-0"]);
   [current scrollTo:0 y:200 - current.scrollView.contentInset.top animated:NO];
   XCTAssertEqualWithAccuracy(current.scrollView.contentOffset.y + current.scrollView.contentInset.top, 200, 0.01);
-  XCTAssertEqualWithAccuracy([offsets[@"page-0"] doubleValue], 200, 0.01);
+  XCTAssertEqualWithAccuracy([offsets[@"page-0"] doubleValue], 80, 0.01);
   XCTAssertEqualObjects(offsets[@"page-1"], @360);
 }
 
+- (void)testPagerTopCommandsClearOnlyCurrentReadingMemoryInBothModes
+{
+  for (NSNumber *smooth in @[@NO, @YES]) {
+    for (NSNumber *target in @[@0, @1]) {
+      RNCCollapsiblePagerViewComponentView *pager = [self pagerWithPageCount:2];
+      [pager setValue:smooth forKey:@"nativeSmoothHeaderScrollEnabled"];
+      RNCNativeScrollerComponentView *current = [self addScrollerToPager:pager atIndex:0];
+      [self addScrollerToPager:pager atIndex:1];
+      NSMutableDictionary *offsets = [pager valueForKey:@"pageOffsets"];
+      offsets[@"page-0"] = smooth.boolValue ? @660 : @780;
+      offsets[@"page-1"] = @360;
+      [pager setValue:@120 forKey:@"headerOffset"];
+      [pager attachScrollObserverForCurrentPage];
+      [pager scrollToTop:target.integerValue animated:NO];
+      CGFloat expectedQ = target.boolValue ? 120 : 0;
+      XCTAssertEqualWithAccuracy(current.scrollView.contentOffset.y + current.scrollView.contentInset.top, expectedQ, 0.01);
+      XCTAssertEqualWithAccuracy([[pager valueForKey:@"headerOffset"] doubleValue], expectedQ, 0.01);
+      XCTAssertEqualWithAccuracy([offsets[@"page-0"] doubleValue], smooth.boolValue ? 0 : expectedQ, 0.01);
+      XCTAssertEqualObjects(offsets[@"page-1"], @360);
+      XCTAssertFalse([[pager valueForKey:@"pendingPageRestoreKeys"] containsObject:@"page-0"]);
+      XCTAssertNil([pager valueForKey:@"pagerTopScrollView"]);
+      // A same-target call cannot resurrect the old reading position.
+      [pager scrollToTop:target.integerValue animated:NO];
+      XCTAssertEqualWithAccuracy(current.scrollView.contentOffset.y + current.scrollView.contentInset.top, expectedQ, 0.01);
+      XCTAssertEqualObjects(offsets[@"page-1"], @360);
+    }
+  }
+}
+
 - (void)testTransitionLayoutCannotSaveSourceOffsetIntoDestinationCache
 {
   RNCCollapsiblePagerViewComponentView *pager = [self pagerWithPageCount:2];
   RNCNativeScrollerComponentView *source = [self addScrollerToPager:pager atIndex:0];
   RNCNativeScrollerComponentView *target = [self addScrollerToPager:pager atIndex:1];
   NSMutableDictionary *offsets = [pager valueForKey:@"pageOffsets"];
-  offsets[@"page-0"] = @120;
+  offsets[@"page-0"] = @0;
   offsets[@"page-1"] = @660;
   [pager setValue:@120 forKey:@"headerOffset"];
   [pager attachScrollObserverForCurrentPage];
@@ -131,49 +164,50 @@ using namespace facebook::react;
   [pager setValue:@1 forKey:@"currentIndex"];
   [pager attachScrollObserverForCurrentPageAfterTransition:YES];
   XCTAssertEqualWithAccuracy([offsets[@"page-1"] doubleValue], 660, 0.01);
-  XCTAssertEqualWithAccuracy(target.scrollView.contentOffset.y + target.scrollView.contentInset.top, 660, 0.01);
+  XCTAssertEqualWithAccuracy(target.scrollView.contentOffset.y + target.scrollView.contentInset.top, 780, 0.01);
   XCTAssertNotEqual([pager valueForKey:@"observedScrollView"], source.scrollView);
 }
 
-- (void)testSmoothTransitionRestoresWholePagePositionsAndCancellation
+- (void)testSmoothTransitionKeepsGlobalHeaderAndIndependentBodyMemory
 {
-  for (NSNumber *targetQ in @[@0, @60, @660]) {
-    RNCCollapsiblePagerViewComponentView *pager = [self pagerWithPageCount:2];
-    RNCNativeScrollerComponentView *source = [self addScrollerToPager:pager atIndex:0];
-    RNCNativeScrollerComponentView *target = [self addScrollerToPager:pager atIndex:1];
-    NSMutableDictionary *offsets = [pager valueForKey:@"pageOffsets"];
-    offsets[@"page-0"] = @0;
-    offsets[@"page-1"] = targetQ;
-    [pager attachScrollObserverForCurrentPage];
-    [pager beginPageStateTransition];
-    [pager setValue:@YES forKey:@"isPagerDragging"];
-    [pager setValue:@YES forKey:@"transitioning"];
-    [pager updatePageStateTransitionProgress:0.5];
-    CGFloat displayH = MIN(targetQ.doubleValue, 120) / 2;
-    XCTAssertEqualWithAccuracy([[pager valueForKey:@"headerOffset"] doubleValue], displayH, 0.01);
-    XCTAssertEqualWithAccuracy(source.scrollView.contentOffset.y + source.scrollView.contentInset.top, displayH, 0.01);
-    XCTAssertEqualWithAccuracy(target.scrollView.contentOffset.y + target.scrollView.contentInset.top,
-                              MAX(targetQ.doubleValue - 120, 0) + displayH, 0.01);
-    XCTAssertEqualObjects(offsets[@"page-0"], @0);
-    XCTAssertEqualObjects(offsets[@"page-1"], targetQ);
-    // Cancelling the swipe restores both pages, not just the selected source.
-    [pager finishPageStateTransition];
-    XCTAssertEqualWithAccuracy(source.scrollView.contentOffset.y + source.scrollView.contentInset.top, 0, 0.01);
-    XCTAssertEqualWithAccuracy(target.scrollView.contentOffset.y + target.scrollView.contentInset.top, targetQ.doubleValue, 0.01);
-    XCTAssertEqualObjects(offsets[@"page-1"], targetQ);
-    [pager setValue:@NO forKey:@"isPagerDragging"];
-    [pager setValue:@NO forKey:@"transitioning"];
-    [pager attachScrollObserverForCurrentPage];
-    [pager beginPageStateTransition];
-    [pager setValue:@1 forKey:@"destinationIndex"];
-    [pager preparePageForHorizontalTransitionAtIndex:1];
-    [pager updatePageStateTransitionProgress:1];
-    XCTAssertEqualWithAccuracy(source.scrollView.contentOffset.y + source.scrollView.contentInset.top,
-                              MIN(targetQ.doubleValue, 120), 0.01);
-    [pager setValue:@1 forKey:@"currentIndex"];
-    [pager attachScrollObserverForCurrentPageAfterTransition:YES];
-    XCTAssertEqualWithAccuracy(target.scrollView.contentOffset.y + target.scrollView.contentInset.top, targetQ.doubleValue, 0.01);
-    XCTAssertEqualWithAccuracy([[pager valueForKey:@"headerOffset"] doubleValue], MIN(targetQ.doubleValue, 120), 0.01);
+  for (NSNumber *collapse in @[@0, @60, @120]) {
+    for (NSNumber *body in @[@0, @60, @660]) {
+      RNCCollapsiblePagerViewComponentView *pager = [self pagerWithPageCount:2];
+      RNCNativeScrollerComponentView *source = [self addScrollerToPager:pager atIndex:0];
+      RNCNativeScrollerComponentView *target = [self addScrollerToPager:pager atIndex:1];
+      NSMutableDictionary *offsets = [pager valueForKey:@"pageOffsets"];
+      offsets[@"page-0"] = @0;
+      offsets[@"page-1"] = body;
+      [pager setValue:collapse forKey:@"headerOffset"];
+      [pager attachScrollObserverForCurrentPage];
+      [pager beginPageStateTransition];
+      [pager setValue:@YES forKey:@"isPagerDragging"];
+      [pager setValue:@YES forKey:@"transitioning"];
+      [pager updatePageStateTransitionProgress:0.5];
+      CGFloat targetQ = collapse.doubleValue + (collapse.doubleValue == 120 ? body.doubleValue : 0);
+      XCTAssertEqualWithAccuracy([[pager valueForKey:@"headerOffset"] doubleValue], collapse.doubleValue, 0.01);
+      XCTAssertEqualWithAccuracy(source.scrollView.contentOffset.y + source.scrollView.contentInset.top, collapse.doubleValue, 0.01);
+      XCTAssertEqualWithAccuracy(target.scrollView.contentOffset.y + target.scrollView.contentInset.top, targetQ, 0.01);
+      XCTAssertEqualObjects(offsets[@"page-0"], @0);
+      XCTAssertEqualObjects(offsets[@"page-1"], body);
+      // Cancellation restores the source display without consuming either reading memory.
+      [pager finishPageStateTransition];
+      XCTAssertEqualWithAccuracy(source.scrollView.contentOffset.y + source.scrollView.contentInset.top, collapse.doubleValue, 0.01);
+      XCTAssertEqualObjects(offsets[@"page-1"], body);
+      [pager setValue:@NO forKey:@"isPagerDragging"];
+      [pager setValue:@NO forKey:@"transitioning"];
+      [pager attachScrollObserverForCurrentPage];
+      [pager beginPageStateTransition];
+      [pager setValue:@1 forKey:@"destinationIndex"];
+      [pager preparePageForHorizontalTransitionAtIndex:1];
+      [pager updatePageStateTransitionProgress:1];
+      XCTAssertEqualWithAccuracy(source.scrollView.contentOffset.y + source.scrollView.contentInset.top, collapse.doubleValue, 0.01);
+      [pager setValue:@1 forKey:@"currentIndex"];
+      [pager attachScrollObserverForCurrentPageAfterTransition:YES];
+      XCTAssertEqualWithAccuracy(target.scrollView.contentOffset.y + target.scrollView.contentInset.top, targetQ, 0.01);
+      XCTAssertEqualWithAccuracy([[pager valueForKey:@"headerOffset"] doubleValue], collapse.doubleValue, 0.01);
+      XCTAssertEqualObjects(offsets[@"page-1"], body);
+    }
   }
 }
 
@@ -186,12 +220,13 @@ using namespace facebook::react;
   offsets[@"page-1"] = @60;
   offsets[@"page-2"] = @360;
   offsets[@"page-3"] = @660;
+  [pager setValue:@60 forKey:@"headerOffset"];
   [pager attachScrollObserverForCurrentPage];
   [pager beginPageStateTransition];
   [pager setValue:@3 forKey:@"destinationIndex"];
   [pager preparePageForHorizontalTransitionAtIndex:3];
   [pager updatePageStateTransitionProgress:1];
-  XCTAssertEqualWithAccuracy([[pager valueForKey:@"headerOffset"] doubleValue], 40, 0.01);
+  XCTAssertEqualWithAccuracy([[pager valueForKey:@"headerOffset"] doubleValue], 60, 0.01);
   [pager setValue:@3 forKey:@"currentIndex"];
   [pager attachScrollObserverForCurrentPageAfterTransition:YES];
   XCTAssertEqualObjects(offsets[@"page-1"], @60);
@@ -200,23 +235,23 @@ using namespace facebook::react;
   for (NSInteger index = 1; index < 4; index++) {
     UIViewController *page = [pager valueForKey:@"pageControllers"][index];
     RNCNativeScrollerComponentView *scroller = page.view.subviews.firstObject;
-    NSString *key = [NSString stringWithFormat:@"page-%ld", (long)index];
     XCTAssertEqualWithAccuracy(scroller.scrollView.contentOffset.y + scroller.scrollView.contentInset.top,
-                              [offsets[key] doubleValue], 0.01);
+                              60, 0.01);
   }
 }
 
-- (void)testZeroLayoutPreservesPendingWholePageRestore
+- (void)testZeroLayoutPreservesPendingBodyRestore
 {
   RNCCollapsiblePagerViewComponentView *pager = [self pagerWithPageCount:1];
   RNCNativeScrollerComponentView *scroller = [self addScrollerToPager:pager atIndex:0];
   NSMutableDictionary *offsets = [pager valueForKey:@"pageOffsets"];
   offsets[@"page-0"] = @660;
+  [pager setValue:@120 forKey:@"headerOffset"];
   scroller.scrollView.contentSize = CGSizeMake(0, 0);
   [pager attachScrollObserverForCurrentPage];
   XCTAssertEqualObjects(offsets[@"page-0"], @660);
   XCTAssertTrue([[pager valueForKey:@"pendingPageRestoreKeys"] containsObject:@"page-0"]);
-  // Releasing an observed but unmeasured identity must retain its pending Q.
+  // Releasing an observed but unmeasured identity must retain its pending B.
   scroller.tag = 91001;
   ShadowView removedView;
   removedView.tag = (Tag)scroller.tag;
@@ -229,7 +264,7 @@ using namespace facebook::react;
   scroller.scrollView.contentSize = CGSizeMake(320, 1500);
   XCTAssertEqualObjects(offsets[@"page-0"], @660);
   XCTAssertFalse([[pager valueForKey:@"pendingPageRestoreKeys"] containsObject:@"page-0"]);
-  XCTAssertEqualWithAccuracy(scroller.scrollView.contentOffset.y + scroller.scrollView.contentInset.top, 660, 0.01);
+  XCTAssertEqualWithAccuracy(scroller.scrollView.contentOffset.y + scroller.scrollView.contentInset.top, 780, 0.01);
 }
 
 - (void)testUnresolvedReplacementDoesNotCommitTemporaryClamp
@@ -239,6 +274,7 @@ using namespace facebook::react;
   NSMutableDictionary *offsets = [pager valueForKey:@"pageOffsets"];
   offsets[@"page-0"] = @0;
   offsets[@"page-1"] = @660;
+  [pager setValue:@120 forKey:@"headerOffset"];
   [pager attachScrollObserverForCurrentPage];
   [pager beginPageStateTransition];
   [pager setValue:@1 forKey:@"destinationIndex"];

package/ios/tests/RNCCollapsiblePagerRefreshControlTests.mm

@@ -1,6 +1,7 @@
 #import <XCTest/XCTest.h>
 #import <React/RCTViewComponentView.h>
 #import "RNCCollapsiblePagerViewComponentView.h"
+#import "RNCNativeScrollerComponentView.h"
 
 @interface RNCCollapsiblePagerViewComponentView (RefreshControlTesting)
 - (void)updateRefreshControlForScrollView:(UIScrollView *)scrollView;
@@ -8,6 +9,10 @@
 - (void)attachScrollObserverForCurrentPage;
 @end
 
+@interface RNCNativeScrollerComponentView (RefreshControlScrollCommandTesting)
+- (void)scrollTo:(double)x y:(double)y animated:(BOOL)animated;
+@end
+
 @interface RNCCollapsiblePagerRefreshControlTests : XCTestCase
 @end
 
@@ -184,14 +189,18 @@
   RNCCollapsiblePagerViewComponentView *pager = [self pagerWithHeader:64];
   [pager mountChildComponentView:[RCTViewComponentView new] index:0];
   [pager mountChildComponentView:[RCTViewComponentView new] index:1];
-  UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 600)];
+  RNCNativeScrollerComponentView *scroller = [RNCNativeScrollerComponentView new];
+  scroller.frame = CGRectMake(0, 0, 320, 600);
+  scroller.scrollView.frame = scroller.bounds;
+  UIScrollView *scroll = scroller.scrollView;
   scroll.refreshControl = [UIRefreshControl new];
   scroll.contentSize = CGSizeMake(320, 2000);
   scroll.contentInset = UIEdgeInsetsMake(232, 0, 0, 0);
   UIView *content = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 2000)];
   [scroll addSubview:content];
   UIViewController *page = [UIViewController new];
-  [page.view addSubview:scroll];
+  [page.view addSubview:scroller];
+  [pager addSubview:page.view];
   NSMutableArray<UIViewController *> *pages = [pager valueForKey:@"pageControllers"];
   [pages addObject:page];
   [pager attachScrollObserverForCurrentPage];
@@ -204,7 +213,7 @@
   XCTAssertEqualWithAccuracy(scroll.contentInset.top, 340, 0.001);
   XCTAssertEqualWithAccuracy(headerHost.transform.ty, 0, 0.001);
 
-  scroll.contentOffset = CGPointMake(0, 500);
+  [scroller scrollTo:0 y:500 animated:NO];
   CGFloat baselineStickyTranslation = stickyHeader.transform.ty;
   CGFloat baselineTabBarTranslation = tabBar.transform.ty;
   XCTAssertEqualWithAccuracy(baselineStickyTranslation, 776, 0.001);
@@ -217,11 +226,11 @@
   XCTAssertEqualWithAccuracy(tabBar.transform.ty, baselineTabBarTranslation, 0.001);
   XCTAssertEqualWithAccuracy(CGRectGetMaxY(headerHost.frame), CGRectGetMinY(content.frame), 0.001);
 
-  // Exercise actual scroll notifications while the temporary refresh inset is
+  // Exercise accepted native commands while the temporary refresh inset is
   // present, including direction reversals and the sticky/unpinned boundary.
   // The pre-fix formula adds the extra 60 points on these scroll updates.
   for (NSNumber *nextOffset in @[@620, @450, @-300, @-340, @500]) {
-    scroll.contentOffset = CGPointMake(0, nextOffset.doubleValue);
+    [scroller scrollTo:0 y:nextOffset.doubleValue animated:NO];
     CGFloat expectedTranslation = MAX(0, nextOffset.doubleValue + 340 - 64);
     XCTAssertEqualWithAccuracy(headerHost.transform.ty, 0, 0.001);
     XCTAssertEqualWithAccuracy(stickyHeader.transform.ty, expectedTranslation, 0.001);

package/lib/module/CollapsiblePagerView.js

@@ -71,6 +71,12 @@ export class CollapsiblePagerView extends React.PureComponent {
       }
     }
   };
+  scrollToPageTop = options => {
+    if (this.nativeRef) CollapsiblePagerViewNativeCommands.scrollToTop(this.nativeRef, 0, options?.animated ?? true);
+  };
+  scrollToStickyTop = options => {
+    if (this.nativeRef) CollapsiblePagerViewNativeCommands.scrollToTop(this.nativeRef, 1, options?.animated ?? true);
+  };
   setScrollEnabled = scrollEnabled => {
     if (this.nativeRef) {
       CollapsiblePagerViewNativeCommands.setScrollEnabledImperatively(this.nativeRef, scrollEnabled);

package/lib/module/CollapsiblePagerView.web.js

@@ -47,6 +47,7 @@ export class CollapsiblePagerView extends React.PureComponent {
   scrollEnabled = this.props.scrollEnabled ?? true;
   lastMountSignature = null;
   configureFrame = null;
+  pendingTopFrame = null;
   transitionTimer = null;
   pageScrollState = "idle";
   configuredScrollElement = null;
@@ -70,6 +71,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     const pageCount = this.pages().length;
     const selectedPage = clampedPageIndex(this.state.selectedPage, pageCount);
     if (selectedPage !== this.state.selectedPage) {
+      this.cancelPendingTopFrame();
       this.finishPageTransition();
       this.setState({
         selectedPage,
@@ -81,6 +83,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     this.notifyMountedPagesChanged();
   }
   componentWillUnmount() {
+    this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
     if (this.configureFrame !== null) {
       cancelAnimationFrame(this.configureFrame);
@@ -99,6 +102,55 @@ export class CollapsiblePagerView extends React.PureComponent {
   setPageWithoutAnimation = selectedPage => {
     this.selectPage(selectedPage, false);
   };
+  scrollToPageTop = options => {
+    this.scrollCurrentPageToTop(0, options?.animated ?? true);
+  };
+  scrollToStickyTop = options => {
+    this.scrollCurrentPageToTop(Math.max(0, this.props.headerHeight), options?.animated ?? true);
+  };
+  cancelPendingTopFrame = () => {
+    if (!this.pendingTopFrame) return;
+    const pending = this.pendingTopFrame;
+    cancelAnimationFrame(pending.frame);
+    this.pendingTopFrame = null;
+    if (this.pageScrollElement(this.state.selectedPage) === pending.element && this.pages().map(pageKey)[this.state.selectedPage] === pending.key) this.savePageOffset(this.state.selectedPage);
+  };
+  onQueuedTopWheel = event => {
+    if (event.deltaY !== 0) this.cancelPendingTopFrame();
+  };
+  onQueuedTopKey = event => {
+    if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(event.key)) this.cancelPendingTopFrame();
+  };
+  scrollCurrentPageToTop(offset, animated) {
+    if (this.horizontalTouch || this.transitionTimer !== null) return;
+    const element = this.pageScrollElement(this.state.selectedPage);
+    const key = this.pages().map(pageKey)[this.state.selectedPage];
+    if (!element?.isConnected || !key) return;
+    this.cancelPendingTopFrame();
+    const EventConstructor = element.ownerDocument.defaultView?.Event;
+    if (EventConstructor) element.dispatchEvent(new EventConstructor("ok-collapsible-pager-cancel-scroll-command"));
+    element.scrollTo({
+      left: element.scrollLeft,
+      top: element.scrollTop,
+      behavior: "instant"
+    });
+    const frame = requestAnimationFrame(() => {
+      if (this.pendingTopFrame?.frame !== frame) return;
+      this.pendingTopFrame = null;
+      if (!element.isConnected || this.horizontalTouch || this.transitionTimer !== null || this.pageScrollElement(this.state.selectedPage) !== element || this.pages().map(pageKey)[this.state.selectedPage] !== key) return;
+      this.pageOffsets.set(key, offset);
+      this.sharedHeaderOffset = offset;
+      element.scrollTo({
+        top: offset,
+        behavior: animated ? "smooth" : "instant"
+      });
+    });
+    this.pendingTopFrame = {
+      frame,
+      element,
+      key
+    };
+  }
   setScrollEnabled = scrollEnabled => {
     this.scrollEnabled = scrollEnabled;
   };
@@ -165,8 +217,14 @@ export class CollapsiblePagerView extends React.PureComponent {
   restoreConfiguredScrollElement() {
     const configured = this.configuredScrollElement;
     if (!configured) return;
+    this.cancelPendingTopFrame();
+    configured.element.removeEventListener("ok-native-list-scroll-command-accepted", this.cancelPendingTopFrame);
+    configured.element.removeEventListener("wheel", this.onQueuedTopWheel);
+    configured.element.removeEventListener("keydown", this.onQueuedTopKey);
     configured.element.removeEventListener("scrollend", this.onVerticalScrollSettled);
     const style = timelineStyle(configured.element);
+    configured.rangeSpacer.remove();
+    style.position = configured.position;
     style.paddingTop = configured.paddingTop;
     style.boxSizing = configured.boxSizing;
     style.scrollTimelineName = configured.scrollTimelineName;
@@ -185,8 +243,23 @@ export class CollapsiblePagerView extends React.PureComponent {
       this.restoreConfiguredScrollElement();
       const style = timelineStyle(element);
       const computedPaddingTop = element.ownerDocument.defaultView?.getComputedStyle(element).paddingTop || style.paddingTop || "0px";
+      const rangeSpacer = element.ownerDocument.createElement("div");
+      Object.assign(rangeSpacer.style, {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "1px",
+        pointerEvents: "none",
+        opacity: "0"
+      });
+      rangeSpacer.setAttribute("aria-hidden", "true");
+      const position = style.position;
+      if (element.ownerDocument.defaultView?.getComputedStyle(element).position === "static") style.position = "relative";
+      element.appendChild(rangeSpacer);
       this.configuredScrollElement = {
         element,
+        rangeSpacer,
+        position,
         paddingTop: style.paddingTop,
         basePaddingTop: computedPaddingTop,
         boxSizing: style.boxSizing,
@@ -196,10 +269,14 @@ export class CollapsiblePagerView extends React.PureComponent {
         pagerStickyInset: style.getPropertyValue(PAGER_STICKY_INSET)
       };
       element.addEventListener("scrollend", this.onVerticalScrollSettled);
+      element.addEventListener("ok-native-list-scroll-command-accepted", this.cancelPendingTopFrame);
+      element.addEventListener("wheel", this.onQueuedTopWheel);
+      element.addEventListener("keydown", this.onQueuedTopKey);
     }
     const style = timelineStyle(element);
     const headerInset = Math.max(0, this.props.headerHeight);
     const stickyInset = Math.max(0, this.props.stickyHeaderHeight);
+    if (this.configuredScrollElement) this.configuredScrollElement.rangeSpacer.style.height = `calc(100% + ${headerInset}px)`;
     const basePaddingTop = this.configuredScrollElement?.basePaddingTop ?? "0px";
     const paddingTop = `calc(${basePaddingTop} + ${headerInset + stickyInset}px)`;
     const headerInsetValue = `${headerInset}px`;
@@ -223,6 +300,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     }
   }
   onVerticalScrollSettled = () => {
+    if (this.pendingTopFrame) return;
     this.savePageOffset(this.state.selectedPage);
     this.emitDiagnostics("scroll-settled");
   };
@@ -246,6 +324,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (position === null || position < 0 || position >= pages.length || position === this.state.selectedPage) {
       return;
     }
+    this.cancelPendingTopFrame();
     this.savePageOffset(this.state.selectedPage);
     if (animated) this.beginPageTransition();else this.finishPageTransition();
     this.setState({
@@ -313,7 +392,9 @@ export class CollapsiblePagerView extends React.PureComponent {
     if (!touch) return;
     const deltaX = touch.pageX - this.touchStartX;
     const deltaY = touch.pageY - (this.touchStartY ?? touch.pageY);
+    if (Math.abs(deltaY) >= 8 && Math.abs(deltaY) > Math.abs(deltaX)) this.cancelPendingTopFrame();
     if (Math.abs(deltaX) >= 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+      this.cancelPendingTopFrame();
       this.horizontalTouch = true;
       this.emitPageScrollState("dragging");
     }

package/lib/module/CollapsiblePagerViewNativeComponent.ts

@@ -83,6 +83,11 @@ export interface NativeProps extends ViewProps {
 type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
 
 export interface NativeCommands {
+  scrollToTop: (
+    viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
+    target: Int32,
+    animated: boolean
+  ) => void;
   setPage: (
     viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
     selectedPage: Int32
@@ -99,6 +104,7 @@ export interface NativeCommands {
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: [
+    "scrollToTop",
     "setPage",
     "setPageWithoutAnimation",
     "setScrollEnabledImperatively",

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

@@ -113,6 +113,12 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     componentDidUpdate(): void;
     setPage: (selectedPage: number) => void;
     setPageWithoutAnimation: (selectedPage: number) => void;
+    scrollToPageTop: (options?: Readonly<{
+        animated?: boolean;
+    }>) => void;
+    scrollToStickyTop: (options?: Readonly<{
+        animated?: boolean;
+    }>) => void;
     setScrollEnabled: (scrollEnabled: boolean) => void;
     private pages;
     private nativeTabBarEnabled;

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

@@ -62,6 +62,7 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     private scrollEnabled;
     private lastMountSignature;
     private configureFrame;
+    private pendingTopFrame;
     private transitionTimer;
     private pageScrollState;
     private configuredScrollElement;
@@ -71,6 +72,16 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     componentWillUnmount(): void;
     setPage: (selectedPage: number) => void;
     setPageWithoutAnimation: (selectedPage: number) => void;
+    scrollToPageTop: (options?: Readonly<{
+        animated?: boolean;
+    }>) => void;
+    scrollToStickyTop: (options?: Readonly<{
+        animated?: boolean;
+    }>) => void;
+    private cancelPendingTopFrame;
+    private onQueuedTopWheel;
+    private onQueuedTopKey;
+    private scrollCurrentPageToTop;
     setScrollEnabled: (scrollEnabled: boolean) => void;
     private pages;
     private retentionDistance;

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

@@ -62,6 +62,7 @@ export interface NativeProps extends ViewProps {
 }
 type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
 export interface NativeCommands {
+    scrollToTop: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, target: Int32, animated: boolean) => void;
     setPage: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, selectedPage: Int32) => void;
     setPageWithoutAnimation: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, selectedPage: Int32) => void;
     setScrollEnabledImperatively: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, scrollEnabled: boolean) => void;

package/package.json

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

package/src/CollapsiblePagerView.tsx

@@ -250,6 +250,24 @@ export class CollapsiblePagerView extends React.PureComponent<
     }
   };
 
+  public scrollToPageTop = (options?: Readonly<{ animated?: boolean }>) => {
+    if (this.nativeRef)
+      CollapsiblePagerViewNativeCommands.scrollToTop(
+        this.nativeRef,
+        0,
+        options?.animated ?? true
+      );
+  };
+
+  public scrollToStickyTop = (options?: Readonly<{ animated?: boolean }>) => {
+    if (this.nativeRef)
+      CollapsiblePagerViewNativeCommands.scrollToTop(
+        this.nativeRef,
+        1,
+        options?.animated ?? true
+      );
+  };
+
   public setScrollEnabled = (scrollEnabled: boolean) => {
     if (this.nativeRef) {
       CollapsiblePagerViewNativeCommands.setScrollEnabledImperatively(