@onekeyfe/react-native-pager-view 6.7.0-alpha.378 → 6.7.0-alpha.383

package/ios/tests/RNCCollapsiblePagerFirstFrameTests.mm

@@ -1,6 +1,7 @@
 #import <XCTest/XCTest.h>
 #import "RNCCollapsiblePagerViewComponentView.h"
 #import "RNCNativeScrollerComponentView.h"
+#import <React/RCTScrollViewComponentView.h>
 #import <react/renderer/components/pagerview/Props.h>
 #import <react/renderer/mounting/MountingTransaction.h>
 
@@ -13,6 +14,7 @@ using namespace facebook::react;
                withSurfaceTelemetry:(const SurfaceTelemetry &)telemetry;
 - (UIScrollView *)findExplicitNativeScrollerInView:(UIView *)view;
 - (UIScrollView *)findVerticalScrollViewInView:(UIView *)view;
+- (UIScrollView *)verticalScrollViewForPageAtIndex:(NSInteger)pageIndex;
 - (void)attachScrollObserverForCurrentPage;
 - (void)attachScrollObserverForCurrentPageAfterTransition:(BOOL)selectionSettled;
 - (void)detachScrollObserver;
@@ -789,4 +791,85 @@ using namespace facebook::react;
   XCTAssertNil([pager valueForKey:@"releasedPageScrollStates"][@"page-0"]);
 }
 
+- (RCTViewComponentView *)addNativeListToPager:(RNCCollapsiblePagerViewComponentView *)pager
+{
+  Class nativeListClass = NSClassFromString(@"HybridNativeListComponent");
+  XCTAssertNotNil(nativeListClass, @"The real NativeList test dependency must be linked");
+  RCTViewComponentView *component = [[nativeListClass alloc] init];
+  component.tag = 92001;
+  component.frame = CGRectMake(0, 0, 320, 600);
+  component.contentView.frame = component.bounds;
+  UIViewController *page = [pager valueForKey:@"pageControllers"][0];
+  [page.view addSubview:component];
+  [component.contentView layoutIfNeeded];
+  return component;
+}
+
+- (void)testNativeListFooterScrollViewCannotReplacePageOwner
+{
+  RNCCollapsiblePagerViewComponentView *pager = [self pagerWithPageCount:1];
+  RCTViewComponentView *component = [self addNativeListToPager:pager];
+  UICollectionView *list = nil;
+  for (UIView *child in component.contentView.subviews) {
+    if ([child isKindOfClass:UICollectionView.class]) {
+      list = (UICollectionView *)child;
+      break;
+    }
+  }
+  XCTAssertTrue([list isKindOfClass:UICollectionView.class]);
+  XCTAssertGreaterThan(CGRectGetWidth(list.bounds), 0);
+  XCTAssertGreaterThan(CGRectGetHeight(list.bounds), 0);
+  XCTAssertEqual(list.delegate, (id)component.contentView);
+  XCTAssertTrue([list isDescendantOfView:component.contentView]);
+  [pager attachScrollObserverForCurrentPage];
+  UIView *header = [pager valueForKey:@"sharedHeaderHostView"];
+  XCTAssertNotNil(header);
+  XCTAssertEqual([pager valueForKey:@"observedScrollView"], list);
+  XCTAssertEqual(header.superview, list);
+  CGFloat inset = list.contentInset.top;
+  CGFloat offset = list.contentOffset.y;
+
+  RCTScrollViewComponentView *footerList = [RCTScrollViewComponentView new];
+  footerList.tag = 92002;
+  footerList.frame = CGRectMake(0, 0, 320, 400);
+  footerList.scrollView.frame = footerList.bounds;
+  footerList.scrollView.contentSize = CGSizeMake(320, 1000);
+  footerList.scrollView.alwaysBounceHorizontal = NO;
+  for (NSInteger index = 0; index < 6; index++) {
+    UIView *slot = index == 2 ? footerList : [UIView new];
+    [component mountChildComponentView:(id)slot index:index];
+  }
+  XCTAssertTrue([footerList isDescendantOfView:list]);
+  XCTAssertEqual([pager verticalScrollViewForPageAtIndex:0], list);
+  ShadowView inserted;
+  inserted.tag = (Tag)footerList.tag;
+  MountingTransaction transaction(1, 2,
+    {ShadowViewMutation::InsertMutation((Tag)component.tag, inserted, 2)}, {});
+  SurfaceTelemetry telemetry;
+  [pager mountingTransactionDidMount:transaction withSurfaceTelemetry:telemetry];
+  XCTAssertEqual([pager valueForKey:@"observedScrollView"], list);
+  XCTAssertEqual(header.superview, list);
+  XCTAssertEqualWithAccuracy(list.contentInset.top, inset, 0.01);
+  XCTAssertEqualWithAccuracy(list.contentOffset.y, offset, 0.01);
+  XCTAssertEqualWithAccuracy(footerList.scrollView.contentInset.top, 0, 0.01);
+}
+
+- (void)testExplicitScrollerSiblingStillPrecedesNativeList
+{
+  RNCCollapsiblePagerViewComponentView *pager = [self pagerWithPageCount:1];
+  [self addNativeListToPager:pager];
+  RNCNativeScrollerComponentView *scroller = [self addScrollerToPager:pager atIndex:0];
+  XCTAssertEqual([pager verticalScrollViewForPageAtIndex:0], scroller.scrollView);
+}
+
+- (void)testPageWithoutNativeListStillDelegatesToNestedPager
+{
+  RNCCollapsiblePagerViewComponentView *outer = [self pagerWithPageCount:1];
+  RNCCollapsiblePagerViewComponentView *inner = [self pagerWithPageCount:1];
+  RNCNativeScrollerComponentView *scroller = [self addScrollerToPager:inner atIndex:0];
+  UIViewController *page = [outer valueForKey:@"pageControllers"][0];
+  [page.view addSubview:inner];
+  XCTAssertEqual([outer verticalScrollViewForPageAtIndex:0], scroller.scrollView);
+}
+
 @end

package/ios/tests/RNCCollapsiblePagerHitTestTests.mm

@@ -2,13 +2,35 @@
 
 #import "RNCCollapsiblePagerViewComponentView.h"
 #import "RNCPagerViewComponentView.h"
+#import <React/RCTViewComponentView.h>
 #import <react/renderer/components/pagerview/Props.h>
+#import <react/renderer/components/view/ViewProps.h>
 
 using namespace facebook::react;
 
 @interface RNCCollapsiblePagerViewComponentView (ScrollEdgeTesting)
 - (void)updateTopScrollEdgeForScrollView:(UIScrollView *)scrollView;
 - (void)updateScrollEdgeContentMasks;
+- (void)layoutSharedHeaders;
+@end
+
+@interface UIView (NativeTabReservationTesting)
+- (void)updateItemsJSON:(NSString *)itemsJSON;
+- (void)updateStyleWithHeight:(CGFloat)height
+                      variant:(NSString *)variant
+     contentPaddingHorizontal:(CGFloat)contentPaddingHorizontal
+       contentPaddingVertical:(CGFloat)contentPaddingVertical
+                  itemSpacing:(CGFloat)itemSpacing
+                     fontSize:(CGFloat)fontSize
+                   fontFamily:(NSString *)fontFamily
+              backgroundColor:(UIColor *)backgroundColor
+              activeTextColor:(UIColor *)activeTextColor
+            inactiveTextColor:(UIColor *)inactiveTextColor
+               indicatorColor:(UIColor *)indicatorColor
+              indicatorHeight:(CGFloat)indicatorHeight
+              indicatorBottom:(CGFloat)indicatorBottom;
+- (void)setProgress:(CGFloat)progress;
+- (void)setLeftToRight:(BOOL)leftToRight;
 @end
 
 @interface RNCCollapsiblePagerHitTestTests : XCTestCase
@@ -56,6 +78,162 @@ using namespace facebook::react;
   XCTAssertEqual([self.root hitTest:CGPointMake(20, 80) withEvent:nil], self.toolbar);
 }
 
+- (void)testNativeTabReservationKeepsReactToolbarAboveTabsAndResetsInRTL
+{
+  UIView *sharedHost = [self.pager valueForKey:@"sharedHeaderHostView"];
+  UIView *tabBar = [self.pager valueForKey:@"nativeTabBarView"];
+  [tabBar updateItemsJSON:@"[{\"key\":\"a\",\"title\":\"Overview\"},"
+    @"{\"key\":\"b\",\"title\":\"Ethereum\"},"
+    @"{\"key\":\"c\",\"title\":\"BNB Chain\"},"
+    @"{\"key\":\"d\",\"title\":\"Polygon\"}]"];
+  RCTViewComponentView *sticky = [RCTViewComponentView new];
+  auto stickyProps = std::make_shared<ViewProps>();
+  stickyProps->pointerEvents = PointerEventsMode::BoxNone;
+  [sticky updateProps:stickyProps oldProps:nullptr];
+  UIButton *trailingControl = [[UIButton alloc] initWithFrame:CGRectMake(250, 0, 70, 44)];
+  [sticky addSubview:trailingControl];
+  [sharedHost addSubview:sticky];
+  [sharedHost addSubview:tabBar];
+  [self.pager setValue:sticky forKey:@"stickyHeaderView"];
+  [self.pager setValue:@0 forKey:@"headerHeight"];
+  [self.pager setValue:@44 forKey:@"stickyHeaderHeight"];
+  tabBar.hidden = NO;
+
+  [self.pager setValue:@64 forKey:@"nativeTabBarTrailingReservedWidth"];
+  [self.pager layoutSharedHeaders];
+  XCTAssertEqualWithAccuracy(CGRectGetWidth(sticky.frame), 320, 0.001);
+  XCTAssertEqualWithAccuracy(CGRectGetWidth(tabBar.frame), 256, 0.001);
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(tabBar.frame), 0, 0.001);
+  XCTAssertEqual(sharedHost.subviews.lastObject, sticky);
+  XCTAssertEqual([sharedHost hitTest:CGPointMake(300, 22) withEvent:nil], trailingControl);
+  XCTAssertTrue([tabBar pointInside:CGPointMake(250, 22) withEvent:nil]);
+  [tabBar layoutIfNeeded];
+  [tabBar setProgress:3];
+  UIScrollView *tabScroll = (UIScrollView *)tabBar.subviews.firstObject;
+  NSArray<UIButton *> *buttons = [tabScroll.subviews filteredArrayUsingPredicate:
+    [NSPredicate predicateWithBlock:^BOOL(UIView *view, NSDictionary *bindings) {
+      return [view isKindOfClass:UIButton.class];
+    }]];
+  UIButton *lastTab = buttons.lastObject;
+  XCTAssertNotNil(lastTab);
+  XCTAssertGreaterThanOrEqual(CGRectGetMinX(lastTab.frame), tabScroll.contentOffset.x - 1);
+  XCTAssertLessThanOrEqual(CGRectGetMaxX(lastTab.frame),
+    tabScroll.contentOffset.x + CGRectGetWidth(tabScroll.bounds) + 1);
+
+  [self.pager setValue:@"rtl" forKey:@"layoutDirection"];
+  [tabBar setLeftToRight:NO];
+  trailingControl.frame = CGRectMake(0, 0, 70, 44);
+  [self.pager layoutSharedHeaders];
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(tabBar.frame), 64, 0.001);
+  XCTAssertEqualWithAccuracy(CGRectGetMaxX(tabBar.frame), 320, 0.001);
+  XCTAssertEqual([sharedHost hitTest:CGPointMake(20, 22) withEvent:nil], trailingControl);
+
+  [self.pager setValue:@500 forKey:@"nativeTabBarTrailingReservedWidth"];
+  [self.pager layoutSharedHeaders];
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(tabBar.frame), 320, 0.001);
+  XCTAssertEqualWithAccuracy(CGRectGetWidth(tabBar.frame), 0, 0.001);
+
+  [self.pager setValue:@0 forKey:@"nativeTabBarTrailingReservedWidth"];
+  [self.pager layoutSharedHeaders];
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(tabBar.frame), 0, 0.001);
+  XCTAssertEqualWithAccuracy(CGRectGetWidth(tabBar.frame), 320, 0.001);
+  XCTAssertEqual(sharedHost.subviews.lastObject, tabBar);
+}
+
+- (void)testNativeTabReservationPropsRestoreDefaultOnRemoval
+{
+  auto reservedProps = std::make_shared<RNCCollapsiblePagerViewProps>();
+  reservedProps->nativeSmoothHeaderScrollEnabled = true;
+  reservedProps->nativeTabBarTrailingReservedWidth = 64;
+  [self.pager updateProps:reservedProps oldProps:nullptr];
+  XCTAssertEqualWithAccuracy(
+    [[self.pager valueForKey:@"nativeTabBarTrailingReservedWidth"] doubleValue], 64, 0.001);
+
+  auto defaultProps = std::make_shared<RNCCollapsiblePagerViewProps>();
+  defaultProps->nativeSmoothHeaderScrollEnabled = true;
+  [self.pager updateProps:defaultProps oldProps:reservedProps];
+  XCTAssertEqualWithAccuracy(
+    [[self.pager valueForKey:@"nativeTabBarTrailingReservedWidth"] doubleValue], 0, 0.001);
+}
+
+- (void)testSegmentedNativeTabsFollowFractionalProgressAndResetToUnderline
+{
+  UIView *tabBar = [self.pager valueForKey:@"nativeTabBarView"];
+  [tabBar updateItemsJSON:@"[{\"key\":\"recent\",\"title\":\"Recents\"},"
+    @"{\"key\":\"account\",\"title\":\"Accounts\"},"
+    @"{\"key\":\"book\",\"title\":\"Address Book\"}]"];
+  [tabBar updateStyleWithHeight:56 variant:@"segmented"
+    contentPaddingHorizontal:20 contentPaddingVertical:12 itemSpacing:0
+    fontSize:14 fontFamily:nil backgroundColor:UIColor.lightGrayColor
+    activeTextColor:UIColor.blackColor inactiveTextColor:UIColor.grayColor
+    indicatorColor:UIColor.whiteColor indicatorHeight:2 indicatorBottom:0];
+  tabBar.frame = CGRectMake(0, 0, 320, 56);
+  [tabBar layoutIfNeeded];
+  UIScrollView *scroll = (UIScrollView *)tabBar.subviews.firstObject;
+  UIView *track = scroll.subviews.firstObject;
+  UIView *thumb = [tabBar valueForKey:@"indicatorView"];
+  NSArray<UIButton *> *buttons = [scroll.subviews filteredArrayUsingPredicate:
+    [NSPredicate predicateWithBlock:^BOOL(UIView *view, NSDictionary *bindings) {
+      return [view isKindOfClass:UIButton.class];
+    }]];
+  XCTAssertEqual(buttons.count, 3);
+  XCTAssertFalse(scroll.scrollEnabled);
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(track.frame), 20, 0.01);
+  XCTAssertEqualWithAccuracy(CGRectGetHeight(track.frame), 32, 0.01);
+  XCTAssertEqualWithAccuracy(CGRectGetWidth(buttons[0].frame),
+    CGRectGetWidth(buttons[1].frame), 0.01);
+  [tabBar setProgress:0];
+  CGFloat firstX = CGRectGetMinX(thumb.frame);
+  [tabBar setProgress:1];
+  CGFloat secondX = CGRectGetMinX(thumb.frame);
+  [tabBar setProgress:0.25];
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(thumb.frame), firstX + (secondX - firstX) * 0.25, 0.01);
+  [tabBar setProgress:0.5];
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(thumb.frame), (firstX + secondX) / 2, 0.01);
+  [tabBar setProgress:0];
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(thumb.frame), firstX, 0.01);
+
+  [tabBar setLeftToRight:NO];
+  [tabBar layoutIfNeeded];
+  XCTAssertGreaterThan(CGRectGetMinX(buttons[0].frame), CGRectGetMinX(buttons[1].frame));
+  [tabBar updateItemsJSON:@"[{\"key\":\"recent\",\"title\":\"Recents (8)\"},"
+    @"{\"key\":\"account\",\"title\":\"Accounts\"}]"];
+  [tabBar layoutIfNeeded];
+  NSArray<UIButton *> *twoButtons = [scroll.subviews filteredArrayUsingPredicate:
+    [NSPredicate predicateWithBlock:^BOOL(UIView *view, NSDictionary *bindings) {
+      return [view isKindOfClass:UIButton.class];
+    }]];
+  XCTAssertEqual(twoButtons.count, 2);
+  XCTAssertEqualWithAccuracy(CGRectGetWidth(twoButtons[0].frame),
+    CGRectGetWidth(track.frame) / 2, 0.01);
+  [tabBar updateStyleWithHeight:56 variant:@"segmented"
+    contentPaddingHorizontal:20 contentPaddingVertical:40 itemSpacing:0
+    fontSize:14 fontFamily:nil backgroundColor:UIColor.lightGrayColor
+    activeTextColor:UIColor.blackColor inactiveTextColor:UIColor.grayColor
+    indicatorColor:UIColor.whiteColor indicatorHeight:2 indicatorBottom:0];
+  tabBar.frame = CGRectMake(0, 0, 30, 56);
+  [tabBar layoutIfNeeded];
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(track.frame), 15, 0.01);
+  XCTAssertEqualWithAccuracy(CGRectGetWidth(track.frame), 0, 0.01);
+  XCTAssertEqualWithAccuracy(CGRectGetMinY(track.frame), 28, 0.01);
+  XCTAssertEqualWithAccuracy(CGRectGetHeight(track.frame), 0, 0.01);
+  XCTAssertTrue(thumb.hidden);
+  [tabBar updateItemsJSON:@"[]"];
+  XCTAssertTrue(tabBar.hidden);
+
+  [tabBar updateItemsJSON:@"[{\"key\":\"recent\",\"title\":\"Recents\"}]"];
+  [tabBar updateStyleWithHeight:44 variant:@"underline"
+    contentPaddingHorizontal:20 contentPaddingVertical:0 itemSpacing:8
+    fontSize:16 fontFamily:nil backgroundColor:UIColor.clearColor
+    activeTextColor:UIColor.blackColor inactiveTextColor:UIColor.grayColor
+    indicatorColor:UIColor.blackColor indicatorHeight:2 indicatorBottom:0];
+  tabBar.frame = CGRectMake(0, 0, 320, 44);
+  [tabBar layoutIfNeeded];
+  XCTAssertTrue(scroll.scrollEnabled);
+  XCTAssertTrue(track.hidden);
+  XCTAssertEqualWithAccuracy(CGRectGetHeight(thumb.frame), 2, 0.01);
+}
+
 - (void)testPinnedChildOutsideHeaderHostStillReceivesViewportTouches
 {
   XCTAssertEqual([self.pager hitTest:CGPointMake(20, 90) withEvent:nil], self.sticky);

package/ios/tests/RNCCollapsiblePagerPressCancellationTests.mm

@@ -764,6 +764,26 @@ typedef struct __IOHIDEvent *RNCTestHIDEventRef;
   XCTAssertTrue([pager isKindOfClass:NSClassFromString(@"RNCCollapsiblePagerDirectScrollView")]);
 }
 
+- (void)configureSegmentedTabsForTwoPages
+{
+  auto baseline = std::make_shared<RNCCollapsiblePagerViewProps>();
+  baseline->nativeSmoothHeaderScrollEnabled = true;
+  baseline->headerHeight = 120;
+  baseline->stickyHeaderHeight = 44;
+  auto segmented = std::make_shared<RNCCollapsiblePagerViewProps>();
+  segmented->nativeSmoothHeaderScrollEnabled = true;
+  segmented->headerHeight = 120;
+  segmented->stickyHeaderHeight = 56;
+  segmented->nativeTabBarItems =
+    R"([{"key":"recent","title":"Recents"},{"key":"account","title":"Accounts"}])";
+  segmented->nativeTabBarVariant = "segmented";
+  segmented->nativeTabBarHeight = 56;
+  segmented->nativeTabBarContentPaddingHorizontal = 20;
+  segmented->nativeTabBarContentPaddingVertical = 12;
+  [self.pager updateProps:segmented oldProps:baseline];
+  [self.window layoutIfNeeded];
+}
+
 - (void)recordPagerPan:(UIPanGestureRecognizer *)pan
 {
   if (pan.state == UIGestureRecognizerStateBegan) self.pagerPanBegins += 1;
@@ -905,6 +925,51 @@ typedef struct __IOHIDEvent *RNCTestHIDEventRef;
   XCTAssertEqual(self.handler.events.count, eventsBeforeLift);
 }
 
+- (void)testSegmentedThumbTracksDeliveredPagerDragAndReverseBeforeLift
+{
+  [self assertFixtureIsReadyForDelivery];
+  [self assertDirectPagerForRegression];
+  [self configureSegmentedTabsForTwoPages];
+
+  UIScrollView *pagerScrollView = [self.pager valueForKey:@"pagerScrollView"];
+  UIView *tabBar = [self.pager valueForKey:@"nativeTabBarView"];
+  UIView *thumb = [tabBar valueForKey:@"indicatorView"];
+  NSArray<UIButton *> *buttons = [tabBar valueForKey:@"buttons"];
+  XCTAssertEqual(buttons.count, 2);
+  XCTAssertFalse(tabBar.hidden);
+  XCTAssertEqualWithAccuracy(CGRectGetHeight(tabBar.bounds), 56, 0.01);
+  CGFloat firstThumbX = CGRectGetMinX(buttons[0].frame) + 2;
+  CGFloat secondThumbX = CGRectGetMinX(buttons[1].frame) + 2;
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(thumb.frame), firstThumbX, 1);
+
+  CGPoint point = CGPointMake(350, 600);
+  UITouch *touch = [self.driver beginAt:point];
+  CGFloat largestOffset = 0;
+  NSUInteger intermediateFrames = 0;
+  for (NSInteger step = 1; step <= 18; ++step) {
+    [self.driver move:touch to:CGPointMake(point.x - 14 * step, point.y)];
+    CGFloat offset = pagerScrollView.contentOffset.x;
+    largestOffset = MAX(largestOffset, offset);
+    if (offset > 1 && offset < CGRectGetWidth(pagerScrollView.bounds) - 1) {
+      CGFloat progress = offset / CGRectGetWidth(pagerScrollView.bounds);
+      XCTAssertEqualWithAccuracy(CGRectGetMinX(thumb.frame),
+        firstThumbX + (secondThumbX - firstThumbX) * progress, 1);
+      intermediateFrames += 1;
+    }
+  }
+  XCTAssertTrue(pagerScrollView.isDragging);
+  XCTAssertGreaterThan(largestOffset, 80);
+  XCTAssertGreaterThan(intermediateFrames, 2);
+
+  for (NSInteger step = 17; step >= 0; --step) {
+    [self.driver move:touch to:CGPointMake(point.x - 14 * step, point.y)];
+  }
+  // UIKit can briefly bounce past the leading edge before the finger lifts.
+  XCTAssertLessThan(fabs(pagerScrollView.contentOffset.x), 10);
+  XCTAssertEqualWithAccuracy(CGRectGetMinX(thumb.frame), firstThumbX, 1);
+  [self.driver end:touch];
+}
+
 - (void)testStationaryTapKeepsReactPress
 {
   [self assertFixtureIsReadyForDelivery];

package/lib/module/CollapsiblePagerView.js

@@ -82,6 +82,12 @@ export class CollapsiblePagerView extends React.PureComponent {
   scrollToPageTop = options => {
     if (this.nativeRef) CollapsiblePagerViewNativeCommands.scrollToTop(this.nativeRef, 0, options?.animated ?? true);
   };
+  scrollHeaderBy = delta => {
+    if (this.nativeRef && Number.isFinite(delta)) CollapsiblePagerViewNativeCommands.scrollHeaderBy(this.nativeRef, delta);
+  };
+  scrollHeaderToOffset = offset => {
+    if (this.nativeRef && Number.isFinite(offset)) CollapsiblePagerViewNativeCommands.scrollHeaderToOffset(this.nativeRef, offset);
+  };
   scrollToStickyTop = options => {
     if (this.nativeRef) CollapsiblePagerViewNativeCommands.scrollToTop(this.nativeRef, 1, options?.animated ?? true);
   };
@@ -96,7 +102,7 @@ export class CollapsiblePagerView extends React.PureComponent {
   nativeTabBarEnabled() {
     return (Platform.OS === "ios" || Platform.OS === "android") && !!this.props.nativeTabBar?.items.length;
   }
-  dispatchNativeTabPageCommand(position, animated) {
+  dispatchNativeTabPageCommand(position, animated, expectedKey) {
     const commandId = ++this.nativeTabCommandId;
     this.nativeTabCommandQueuedDuringScroll = this.nativePagerScrollState !== "idle";
     this.latestNativeTabTarget = position;
@@ -104,7 +110,7 @@ export class CollapsiblePagerView extends React.PureComponent {
       transientRetainedPages: state.transientRetainedPages.includes(position) ? state.transientRetainedPages : [...state.transientRetainedPages, position]
     }), () => {
       requestAnimationFrame(() => {
-        if (commandId !== this.nativeTabCommandId || !this.nativeRef) {
+        if (commandId !== this.nativeTabCommandId || !this.nativeRef || expectedKey !== undefined && (!this.nativeTabBarEnabled() || this.props.nativeTabBar?.items[position]?.key !== expectedKey)) {
           return;
         }
         this.dispatchedNativeTabTarget = position;
@@ -186,10 +192,13 @@ 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)) {
+    if (!this.nativeTabBarEnabled() || position === null || this.props.nativeTabBar?.items[position]?.key !== event.nativeEvent.key) {
+      return;
+    }
+    if (position >= 0 && position < this.pages().length && (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 - currentPage) <= 1);
+      this.dispatchNativeTabPageCommand(position, this.props.nativeTabPressAnimationEnabled ?? Math.abs(position - currentPage) <= 1, event.nativeEvent.key);
     }
     this.props.onNativeTabPress?.(event);
   };
@@ -233,6 +242,10 @@ export class CollapsiblePagerView extends React.PureComponent {
     const deducedLayoutDirection = !layoutDirection || layoutDirection === "locale" ? I18nManager.isRTL ? "rtl" : "ltr" : layoutDirection;
     const nativeTabBarEnabled = (Platform.OS === "ios" || Platform.OS === "android") && !!nativeTabBar?.items.length;
     const nativeTabBarStyle = nativeTabBar?.style;
+    const requestedContentPaddingVertical = nativeTabBarStyle?.contentPaddingVertical;
+    const nativeTabBarContentPaddingVertical = typeof requestedContentPaddingVertical === "number" && Number.isFinite(requestedContentPaddingVertical) && requestedContentPaddingVertical >= 0 ? requestedContentPaddingVertical : 0;
+    const requestedTrailingReservedWidth = nativeTabBarStyle?.trailingReservedWidth;
+    const nativeTabBarTrailingReservedWidth = typeof requestedTrailingReservedWidth === "number" && Number.isFinite(requestedTrailingReservedWidth) && requestedTrailingReservedWidth >= 0 ? requestedTrailingReservedWidth : 0;
     const nativeSubHeaderEnabled = (Platform.OS === "ios" || Platform.OS === "android") && !!nativeSubHeader?.items.length;
     const nativeSubHeaderStyle = nativeSubHeader?.style;
     const nativeSubHeaderConfig = nativeSubHeaderEnabled ? JSON.stringify({
@@ -263,7 +276,10 @@ export class CollapsiblePagerView extends React.PureComponent {
       onPageScrollStateChanged: this.onPageScrollStateChanged,
       nativeTabBarItems: nativeTabBarEnabled ? JSON.stringify(nativeTabBar.items) : undefined,
       nativeTabBarHeight: nativeTabBarEnabled ? nativeTabBarStyle?.height ?? 44 : undefined,
+      nativeTabBarVariant: nativeTabBarEnabled ? nativeTabBarStyle?.variant ?? "underline" : undefined,
+      nativeTabBarTrailingReservedWidth: nativeTabBarEnabled ? nativeTabBarTrailingReservedWidth : 0,
       nativeTabBarContentPaddingHorizontal: nativeTabBarEnabled ? nativeTabBarStyle?.contentPaddingHorizontal ?? 20 : undefined,
+      nativeTabBarContentPaddingVertical: nativeTabBarEnabled ? nativeTabBarContentPaddingVertical : undefined,
       nativeTabBarItemSpacing: nativeTabBarEnabled ? nativeTabBarStyle?.itemSpacing ?? 8 : undefined,
       nativeTabBarFontSize: nativeTabBarEnabled ? nativeTabBarStyle?.fontSize ?? 16 : undefined,
       nativeTabBarFontFamily: nativeTabBarEnabled ? nativeTabBarStyle?.fontFamily : undefined,

package/lib/module/CollapsiblePagerView.web.js

@@ -335,6 +335,15 @@ export class CollapsiblePagerView extends React.PureComponent {
   scrollToPageTop = options => {
     this.scrollCurrentPageToTop(0, options?.animated ?? true);
   };
+  scrollHeaderBy = delta => {
+    if (!Number.isFinite(delta)) return;
+    const offset = Math.min(this.headerHeight, Math.max(0, this.sharedHeaderOffset + delta));
+    this.scrollCurrentPageToTop(offset, false);
+  };
+  scrollHeaderToOffset = offset => {
+    if (!Number.isFinite(offset)) return;
+    this.scrollCurrentPageToTop(Math.min(this.headerHeight, Math.max(0, offset)), false);
+  };
   scrollToStickyTop = options => {
     this.scrollCurrentPageToTop(this.headerHeight, options?.animated ?? true);
   };
@@ -386,13 +395,13 @@ export class CollapsiblePagerView extends React.PureComponent {
       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, 0);
-      this.sharedHeaderOffset = offset;
+      this.sharedHeaderOffset = Math.min(this.headerHeight, Math.max(0, offset));
       this.bodyAlignment = {
         element,
         key
       };
       scrollElementTo(element, {
-        top: offset,
+        top: this.sharedHeaderOffset,
         behavior: animated ? "smooth" : "instant"
       });
       this.syncFallbackHeader();

package/lib/module/CollapsiblePagerViewNativeComponent.ts

@@ -67,7 +67,10 @@ export interface NativeProps extends ViewProps {
   retainedPages?: string;
   nativeTabBarItems?: string;
   nativeTabBarHeight?: Double;
+  nativeTabBarVariant?: string;
+  nativeTabBarTrailingReservedWidth?: WithDefault<Double, 0>;
   nativeTabBarContentPaddingHorizontal?: Double;
+  nativeTabBarContentPaddingVertical?: Double;
   nativeTabBarItemSpacing?: Double;
   nativeTabBarFontSize?: Double;
   nativeTabBarFontFamily?: string;
@@ -91,6 +94,14 @@ export interface NativeProps extends ViewProps {
 type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
 
 export interface NativeCommands {
+  scrollHeaderToOffset: (
+    viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
+    offset: Double
+  ) => void;
+  scrollHeaderBy: (
+    viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
+    delta: Double
+  ) => void;
   scrollToTop: (
     viewRef: React.ElementRef<CollapsiblePagerViewNativeType>,
     target: Int32,
@@ -112,6 +123,8 @@ export interface NativeCommands {
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: [
+    "scrollHeaderToOffset",
+    "scrollHeaderBy",
     "scrollToTop",
     "setPage",
     "setPageWithoutAnimation",

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

@@ -16,8 +16,11 @@ export type CollapsiblePagerNativeTabBarItem = Readonly<{
     testID?: string;
 }>;
 export type CollapsiblePagerNativeTabBarStyle = Readonly<{
+    variant?: "underline" | "segmented";
     height?: number;
+    trailingReservedWidth?: number;
     contentPaddingHorizontal?: number;
+    contentPaddingVertical?: number;
     itemSpacing?: number;
     fontSize?: number;
     fontFamily?: string;
@@ -56,7 +59,7 @@ export type CollapsiblePagerNativeSubHeaderConfig = Readonly<{
 }>;
 export type CollapsiblePagerViewOnNativeTabPressEvent = ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>;
 export type CollapsiblePagerViewOnNativeSubHeaderPressEvent = ReactNative.NativeSyntheticEvent<OnNativeTabPressEventData>;
-export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "topScrollEdgeEffect" | "topOverlayHeight" | "externalTopOverlayTag" | "pageKeys" | "retainedPages" | "nativeTabBarItems" | "nativeTabBarHeight" | "nativeTabBarContentPaddingHorizontal" | "nativeTabBarItemSpacing" | "nativeTabBarFontSize" | "nativeTabBarFontFamily" | "nativeTabBarBackgroundColor" | "nativeTabBarActiveTextColor" | "nativeTabBarInactiveTextColor" | "nativeTabBarIndicatorColor" | "nativeTabBarIndicatorHeight" | "nativeTabBarIndicatorBottom" | "nativeSubHeaderConfig" | "nativeSubHeaderSelectedBackgroundColor" | "onNativeTabPress" | "onNativeSubHeaderPress" | "layoutDirection"> {
+export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children" | "headerHeight" | "stickyHeaderHeight" | "topScrollEdgeEffect" | "topOverlayHeight" | "externalTopOverlayTag" | "pageKeys" | "retainedPages" | "nativeTabBarItems" | "nativeTabBarHeight" | "nativeTabBarVariant" | "nativeTabBarTrailingReservedWidth" | "nativeTabBarContentPaddingHorizontal" | "nativeTabBarContentPaddingVertical" | "nativeTabBarItemSpacing" | "nativeTabBarFontSize" | "nativeTabBarFontFamily" | "nativeTabBarBackgroundColor" | "nativeTabBarActiveTextColor" | "nativeTabBarInactiveTextColor" | "nativeTabBarIndicatorColor" | "nativeTabBarIndicatorHeight" | "nativeTabBarIndicatorBottom" | "nativeSubHeaderConfig" | "nativeSubHeaderSelectedBackgroundColor" | "onNativeTabPress" | "onNativeSubHeaderPress" | "layoutDirection"> {
     /** Collapsible content rendered above the sticky bar. */
     header: React.ReactNode;
     /** Bar which remains pinned after the header has collapsed. */
@@ -128,6 +131,8 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     scrollToPageTop: (options?: Readonly<{
         animated?: boolean;
     }>) => void;
+    scrollHeaderBy: (delta: number) => void;
+    scrollHeaderToOffset: (offset: number) => void;
     scrollToStickyTop: (options?: Readonly<{
         animated?: boolean;
     }>) => void;

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

@@ -132,6 +132,8 @@ export declare class CollapsiblePagerView extends React.PureComponent<Collapsibl
     scrollToPageTop: (options?: Readonly<{
         animated?: boolean;
     }>) => void;
+    scrollHeaderBy: (delta: number) => void;
+    scrollHeaderToOffset: (offset: number) => void;
     scrollToStickyTop: (options?: Readonly<{
         animated?: boolean;
     }>) => void;

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

@@ -50,7 +50,10 @@ export interface NativeProps extends ViewProps {
     retainedPages?: string;
     nativeTabBarItems?: string;
     nativeTabBarHeight?: Double;
+    nativeTabBarVariant?: string;
+    nativeTabBarTrailingReservedWidth?: WithDefault<Double, 0>;
     nativeTabBarContentPaddingHorizontal?: Double;
+    nativeTabBarContentPaddingVertical?: Double;
     nativeTabBarItemSpacing?: Double;
     nativeTabBarFontSize?: Double;
     nativeTabBarFontFamily?: string;
@@ -72,6 +75,8 @@ export interface NativeProps extends ViewProps {
 }
 type CollapsiblePagerViewNativeType = HostComponent<NativeProps>;
 export interface NativeCommands {
+    scrollHeaderToOffset: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, offset: Double) => void;
+    scrollHeaderBy: (viewRef: React.ElementRef<CollapsiblePagerViewNativeType>, delta: Double) => void;
     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;

package/package.json

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

package/react-native-pager-view.podspec

@@ -19,6 +19,7 @@ Pod::Spec.new do |s|
 
   s.test_spec "Tests" do |test_spec|
     test_spec.source_files = "ios/tests/**/*.{m,mm}"
+    test_spec.dependency "react-native-native-list"
   end
 
   install_modules_dependencies(s)