@onekeyfe/react-native-pager-view 6.7.0-alpha.375 → 6.7.0-alpha.382

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.375",
+  "version": "6.7.0-alpha.382",
   "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.375",
+    "@onekeyfe/react-native-native-logger": "6.7.0-alpha.382",
     "react": "*",
     "react-native": "*"
   },

package/src/CollapsiblePagerView.tsx

@@ -32,8 +32,11 @@ export type CollapsiblePagerNativeTabBarItem = Readonly<{
 }>;
 
 export type CollapsiblePagerNativeTabBarStyle = Readonly<{
+  variant?: "underline" | "segmented";
   height?: number;
+  trailingReservedWidth?: number;
   contentPaddingHorizontal?: number;
+  contentPaddingVertical?: number;
   itemSpacing?: number;
   fontSize?: number;
   fontFamily?: string;
@@ -94,7 +97,10 @@ export interface CollapsiblePagerViewProps
     | "retainedPages"
     | "nativeTabBarItems"
     | "nativeTabBarHeight"
+    | "nativeTabBarVariant"
+    | "nativeTabBarTrailingReservedWidth"
     | "nativeTabBarContentPaddingHorizontal"
+    | "nativeTabBarContentPaddingVertical"
     | "nativeTabBarItemSpacing"
     | "nativeTabBarFontSize"
     | "nativeTabBarFontFamily"
@@ -290,6 +296,22 @@ export class CollapsiblePagerView extends React.PureComponent<
       );
   };
 
+  public scrollHeaderBy = (delta: number) => {
+    if (this.nativeRef && Number.isFinite(delta))
+      CollapsiblePagerViewNativeCommands.scrollHeaderBy(
+        this.nativeRef,
+        delta
+      );
+  };
+
+  public scrollHeaderToOffset = (offset: number) => {
+    if (this.nativeRef && Number.isFinite(offset))
+      CollapsiblePagerViewNativeCommands.scrollHeaderToOffset(
+        this.nativeRef,
+        offset
+      );
+  };
+
   public scrollToStickyTop = (options?: Readonly<{ animated?: boolean }>) => {
     if (this.nativeRef)
       CollapsiblePagerViewNativeCommands.scrollToTop(
@@ -319,7 +341,11 @@ export class CollapsiblePagerView extends React.PureComponent<
     );
   }
 
-  private dispatchNativeTabPageCommand(position: number, animated: boolean) {
+  private dispatchNativeTabPageCommand(
+    position: number,
+    animated: boolean,
+    expectedKey?: string
+  ) {
     const commandId = ++this.nativeTabCommandId;
     this.nativeTabCommandQueuedDuringScroll =
       this.nativePagerScrollState !== "idle";
@@ -332,7 +358,13 @@ export class CollapsiblePagerView extends React.PureComponent<
       }),
       () => {
         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;
@@ -458,7 +490,13 @@ export class CollapsiblePagerView extends React.PureComponent<
   ) => {
     const position = pageIndex(event.nativeEvent.position);
     if (
-      position !== null &&
+      !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 ||
@@ -470,7 +508,8 @@ export class CollapsiblePagerView extends React.PureComponent<
       this.dispatchNativeTabPageCommand(
         position,
         this.props.nativeTabPressAnimationEnabled ??
-          Math.abs(position - currentPage) <= 1
+          Math.abs(position - currentPage) <= 1,
+        event.nativeEvent.key
       );
     }
     this.props.onNativeTabPress?.(event);
@@ -533,6 +572,22 @@ export class CollapsiblePagerView extends React.PureComponent<
       (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;
@@ -586,11 +641,20 @@ export class CollapsiblePagerView extends React.PureComponent<
         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
         }