@onekeyfe/react-native-pager-view 6.7.0-alpha.354 → 6.7.0-alpha.359

package/android/src/androidTest/java/com/reactnativepagerview/CollapsiblePagerTabReservationTest.kt

@@ -20,6 +20,117 @@ import kotlin.math.roundToInt
 class CollapsiblePagerHitTestActivity : Activity()
 
 class CollapsiblePagerTabReservationTest : InstrumentationTestCase() {
+  fun testSegmentedNativeTabsTrackFractionalProgressAndReset() {
+    val context = instrumentation.targetContext
+    assertTrue(context.applicationInfo.flags and ApplicationInfo.FLAG_SUPPORTS_RTL != 0)
+    val activity = instrumentation.startActivitySync(
+      Intent(context, CollapsiblePagerHitTestActivity::class.java)
+        .addFlags(Intent.FLAG_ACTIVITY_NEW_TASK),
+    ) as CollapsiblePagerHitTestActivity
+    val density = context.resources.displayMetrics.density
+    fun dp(value: Int) = (value * density).roundToInt()
+    lateinit var tab: CollapsiblePagerNativeTabBarView
+    lateinit var row: HorizontalScrollView
+    lateinit var content: ViewGroup
+    lateinit var track: View
+    lateinit var thumb: View
+    lateinit var buttons: List<TextView>
+    fun layout(width: Int = 320, height: Int = 56) {
+      tab.measure(View.MeasureSpec.makeMeasureSpec(dp(width), View.MeasureSpec.EXACTLY),
+        View.MeasureSpec.makeMeasureSpec(dp(height), View.MeasureSpec.EXACTLY))
+      tab.layout(0, 0, dp(width), dp(height))
+    }
+    try {
+      instrumentation.runOnMainSync {
+      tab = CollapsiblePagerNativeTabBarView(context)
+      activity.setContentView(tab)
+      val presses = mutableListOf<String>()
+      tab.onItemPress = { _, key -> presses.add(key) }
+      tab.updateItemsJSON("""[{"key":"recent","title":"Recents"},""" +
+        """{"key":"account","title":"Accounts"},""" +
+        """{"key":"book","title":"Address Book"}]""")
+      tab.updateStyle(56.0, "segmented", 20.0, 12.0, 0.0, 14.0, null, 2.0, 0.0)
+      tab.updateColors(Color.LTGRAY, Color.BLACK, Color.GRAY, Color.WHITE)
+      layout()
+      row = tab.getChildAt(0) as HorizontalScrollView
+      content = row.getChildAt(0) as ViewGroup
+      track = content.getChildAt(0)
+      thumb = content.getChildAt(1)
+      buttons = (0 until content.childCount).map(content::getChildAt).filterIsInstance<TextView>()
+      assertEquals(3, buttons.size)
+      assertEquals(dp(20), track.left)
+      assertTrue(kotlin.math.abs(dp(32) - track.height) <= 1)
+      assertEquals(0, row.scrollX)
+      assertTrue(kotlin.math.abs(buttons[0].width - buttons[1].width) <= 1)
+      tab.setProgress(0f)
+      val firstX = thumb.left
+      tab.setProgress(1f)
+      val secondX = thumb.left
+      tab.setProgress(0.25f)
+      assertTrue(kotlin.math.abs(thumb.left - (firstX + (secondX - firstX) * 0.25f)) <= 1)
+      tab.setProgress(0.5f)
+      assertTrue(kotlin.math.abs(thumb.left - (firstX + secondX) / 2f) <= 1)
+      tab.setProgress(0f)
+      assertEquals(firstX, thumb.left)
+      buttons[1].performClick()
+      assertEquals(listOf("account"), presses)
+
+      tab.layoutDirection = View.LAYOUT_DIRECTION_RTL
+      }
+      instrumentation.waitForIdleSync()
+      instrumentation.runOnMainSync {
+      layout()
+      assertEquals(View.LAYOUT_DIRECTION_RTL, row.layoutDirection)
+      val rtlFirst = buttons[0].layoutParams as android.widget.FrameLayout.LayoutParams
+      val rtlSecond = buttons[1].layoutParams as android.widget.FrameLayout.LayoutParams
+      assertTrue(rtlFirst.leftMargin > rtlSecond.leftMargin)
+      val rtlGeometry = "rowDir=${row.layoutDirection} contentDir=${content.layoutDirection} " +
+        buttons.mapIndexed { index, button ->
+          val params = button.layoutParams as android.widget.FrameLayout.LayoutParams
+          "$index:${button.left}-${button.right} margin=${params.leftMargin}/${params.rightMargin} gravity=${params.gravity}"
+        }.joinToString(" ")
+      assertTrue(rtlGeometry, buttons[0].left >= buttons[1].right)
+      assertEquals(dp(20), track.left)
+      tab.setProgress(0f)
+      val rtlFirstX = thumb.left
+      tab.setProgress(1f)
+      val rtlSecondX = thumb.left
+      assertTrue(rtlFirstX > rtlSecondX)
+      tab.setProgress(0.5f)
+      assertTrue(kotlin.math.abs(thumb.left - (rtlFirstX + rtlSecondX) / 2f) <= 1)
+      tab.layoutDirection = View.LAYOUT_DIRECTION_LTR
+      }
+      instrumentation.waitForIdleSync()
+      instrumentation.runOnMainSync {
+      layout()
+      assertTrue(buttons[0].right <= buttons[1].left)
+      tab.updateItemsJSON("""[{"key":"recent","title":"Recents (8)"},""" +
+        """{"key":"account","title":"Accounts"}]""")
+      layout()
+      val twoButtons = (0 until content.childCount).map(content::getChildAt).filterIsInstance<TextView>()
+      assertEquals(2, twoButtons.size)
+      assertTrue(kotlin.math.abs(twoButtons[0].width - track.width / 2) <= 1)
+      layout(width = 30)
+      assertEquals(dp(15), track.left)
+      assertEquals(0, track.width)
+      tab.updateStyle(56.0, "segmented", 20.0, 40.0, 0.0, 14.0, null, 2.0, 0.0)
+      layout(width = 30)
+      assertTrue(kotlin.math.abs(dp(28) - track.top) <= 1)
+      assertEquals(0, track.height)
+      assertEquals(View.GONE, thumb.visibility)
+      tab.updateItemsJSON("[]")
+      assertEquals(View.GONE, tab.visibility)
+      tab.updateItemsJSON("""[{"key":"recent","title":"Recents"}]""")
+      tab.updateStyle(44.0, "underline", 20.0, 0.0, 8.0, 16.0, null, 2.0, 0.0)
+      layout(height = 44)
+      assertEquals(View.GONE, track.visibility)
+      assertEquals(dp(2), thumb.height)
+      }
+    } finally {
+      instrumentation.runOnMainSync { activity.finish() }
+    }
+  }
+
   fun testTabViewportToolbarHitAndResetInBothDirections() {
     val context = instrumentation.targetContext
     assertTrue(context.applicationInfo.flags and ApplicationInfo.FLAG_SUPPORTS_RTL != 0)

package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerHost.kt

@@ -293,6 +293,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
   var onNativeSubHeaderPress: ((Int, String) -> Unit)? = null
 
   var nativeTabBarHeight = 44.0
+  var nativeTabBarVariant = "underline"
   var nativeTabBarTrailingReservedWidth = 0.0
     set(value) {
       field = if (value.isFinite() && value >= 0.0) value else 0.0
@@ -308,6 +309,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     } else 0
   }
   var nativeTabBarContentPaddingHorizontal = 20.0
+  var nativeTabBarContentPaddingVertical = 0.0
   var nativeTabBarItemSpacing = 8.0
   var nativeTabBarFontSize = 16.0
   var nativeTabBarFontFamily: String? = null
@@ -430,7 +432,9 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
   fun applyNativeHeaderStyle() {
     nativeTabBarView.updateStyle(
       nativeTabBarHeight,
+      nativeTabBarVariant,
       nativeTabBarContentPaddingHorizontal,
+      nativeTabBarContentPaddingVertical,
       nativeTabBarItemSpacing,
       nativeTabBarFontSize,
       nativeTabBarFontFamily,

package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerNativeHeaders.kt

@@ -65,7 +65,11 @@ private class CollapsiblePagerHorizontalItemsView(
 ) : HorizontalScrollView(context) {
   private val density = resources.displayMetrics.density
   private val content = FrameLayout(context)
+  private val track = View(context)
   private val indicator = View(context)
+  private val trackBackground = GradientDrawable().apply {
+    shape = GradientDrawable.RECTANGLE
+  }
   private val indicatorBackground = GradientDrawable().apply {
     shape = GradientDrawable.RECTANGLE
   }
@@ -75,6 +79,8 @@ private class CollapsiblePagerHorizontalItemsView(
   private var selectedKey = ""
   private var rowHeightPx = dp(if (showsProgressIndicator) 44.0 else 42.0)
   private var contentPaddingPx = dp(20.0)
+  private var contentPaddingVerticalPx = 0
+  private var segmented = false
   private var itemSpacingPx = dp(8.0)
   private var fontSize = if (showsProgressIndicator) 16.0 else 14.0
   private var fontFamily: String? = null
@@ -96,7 +102,9 @@ private class CollapsiblePagerHorizontalItemsView(
     isFillViewport = true
     overScrollMode = OVER_SCROLL_NEVER
     clipToPadding = false
+    track.background = trackBackground
     indicator.background = indicatorBackground
+    content.addView(track, FrameLayout.LayoutParams(0, 0))
     content.addView(indicator, FrameLayout.LayoutParams(0, 0))
     addView(
       content,
@@ -149,17 +157,24 @@ private class CollapsiblePagerHorizontalItemsView(
     fontFamily: String?,
     indicatorHeight: Double = 0.0,
     indicatorBottom: Double = 0.0,
+    variant: String = "underline",
+    contentPaddingVertical: Double = 0.0,
   ) {
     rowHeightPx = max(1, dp(rowHeight))
     contentPaddingPx = max(0, dp(contentPadding))
+    contentPaddingVerticalPx = max(0, dp(contentPaddingVertical))
+    val wasSegmented = segmented
+    segmented = showsProgressIndicator && variant == "segmented"
     itemSpacingPx = max(0, dp(itemSpacing))
     this.fontSize = max(1.0, fontSize)
     this.fontFamily = fontFamily
     if (showsProgressIndicator) {
       indicatorHeightPx = max(0, dp(indicatorHeight))
       indicatorBottomPx = max(0, dp(indicatorBottom))
-      indicatorBackground.cornerRadius = indicatorHeightPx / 2f
+      indicatorBackground.cornerRadius = if (segmented) dp(14.0).toFloat() else indicatorHeightPx / 2f
     }
+    track.visibility = if (segmented) VISIBLE else GONE
+    if (segmented && !wasSegmented) scrollTo(0, 0)
     applyTypeface()
     requestLayout()
   }
@@ -171,8 +186,9 @@ private class CollapsiblePagerHorizontalItemsView(
     selectedBackgroundColor: Int,
     indicatorColor: Int,
   ) {
-    setBackgroundColor(backgroundColor)
-    content.setBackgroundColor(backgroundColor)
+    setBackgroundColor(if (segmented) Color.TRANSPARENT else backgroundColor)
+    content.setBackgroundColor(if (segmented) Color.TRANSPARENT else backgroundColor)
+    trackBackground.setColor(backgroundColor)
     this.activeTextColor = activeTextColor
     this.inactiveTextColor = inactiveTextColor
     this.selectedBackgroundColor = selectedBackgroundColor
@@ -213,6 +229,46 @@ private class CollapsiblePagerHorizontalItemsView(
     }
     applyTypeface()
     itemFrames.clear()
+    if (segmented) {
+      val actualPaddingHorizontal = min(contentPaddingPx, width / 2)
+      val actualPaddingVertical = min(contentPaddingVerticalPx, height / 2)
+      val trackLeft = actualPaddingHorizontal
+      val trackRight = max(trackLeft, width - contentPaddingPx)
+      val trackTop = actualPaddingVertical
+      val trackBottom = max(trackTop, height - contentPaddingVerticalPx)
+      val trackWidth = trackRight - trackLeft
+      val trackHeight = trackBottom - trackTop
+      trackBackground.cornerRadius = trackHeight / 2f
+      indicatorBackground.cornerRadius = max(0, trackHeight - dp(4.0)) / 2f
+      track.layoutParams = FrameLayout.LayoutParams(trackWidth, trackHeight).apply {
+        gravity = Gravity.TOP or Gravity.LEFT
+        leftMargin = trackLeft
+        topMargin = trackTop
+      }
+      buttons.forEachIndexed { index, button ->
+        val count = buttons.size
+        val first = trackLeft + trackWidth * index / count
+        val last = trackLeft + trackWidth * (index + 1) / count
+        val start = if (layoutDirection == View.LAYOUT_DIRECTION_RTL) trackRight - (last - trackLeft) else first
+        val end = if (layoutDirection == View.LAYOUT_DIRECTION_RTL) trackRight - (first - trackLeft) else last
+        val buttonWidth = max(0, end - start)
+        val thumbInset = dp(2.0)
+        itemFrames.add(intArrayOf(start, buttonWidth, start + thumbInset, max(0, buttonWidth - 2 * thumbInset)))
+        button.layoutParams = FrameLayout.LayoutParams(buttonWidth, trackHeight).apply {
+          gravity = Gravity.TOP or Gravity.LEFT
+          leftMargin = start
+          topMargin = trackTop
+        }
+      }
+      content.layoutParams = LayoutParams(width, height)
+      content.measure(
+        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+      )
+      setMeasuredDimension(width, height)
+      return
+    }
+    track.layoutParams = FrameLayout.LayoutParams(0, 0)
     var x = contentPaddingPx
     buttons.forEachIndexed { index, button ->
       val textWidth = ceil(button.paint.measureText(button.text.toString()).toDouble()).toInt()
@@ -260,6 +316,9 @@ private class CollapsiblePagerHorizontalItemsView(
     return super.onTouchEvent(event)
   }
 
+  override fun onInterceptTouchEvent(event: MotionEvent): Boolean =
+    if (segmented) false else super.onInterceptTouchEvent(event)
+
   private fun updatePresentation() {
     if (buttons.isEmpty() || itemFrames.size != buttons.size) return
     val selectedIndex: Int
@@ -275,14 +334,16 @@ private class CollapsiblePagerHorizontalItemsView(
       val interpolatedIndicatorWidth = from[3] + (to[3] - from[3]) * fraction
       val indicatorX = interpolatedIndicatorX.roundToInt()
       val indicatorWidth = interpolatedIndicatorWidth.roundToInt()
-      val indicatorTop = max(0, measuredHeight - indicatorBottomPx - indicatorHeightPx)
+      val actualPaddingVertical = min(contentPaddingVerticalPx, measuredHeight / 2)
+      val indicatorHeight = if (segmented) max(0, measuredHeight - 2 * actualPaddingVertical - dp(4.0)) else indicatorHeightPx
+      val indicatorTop = if (segmented) actualPaddingVertical + dp(2.0) else max(0, measuredHeight - indicatorBottomPx - indicatorHeightPx)
       indicator.layout(
         indicatorX,
         indicatorTop,
         indicatorX + indicatorWidth,
-        indicatorTop + indicatorHeightPx,
+        indicatorTop + indicatorHeight,
       )
-      indicator.visibility = if (indicatorHeightPx > 0) VISIBLE else GONE
+      indicator.visibility = if (indicatorHeight > 0) VISIBLE else GONE
       scrollTargetCenterX = interpolatedIndicatorX + interpolatedIndicatorWidth / 2f
       selectedIndex = clamped.roundToInt()
       buttons.forEachIndexed { index, button ->
@@ -304,7 +365,7 @@ private class CollapsiblePagerHorizontalItemsView(
       }
     }
 
-    if (centerSelectionWhenIdle && !isTouchDragging && width > 0 && selectedIndex in itemFrames.indices) {
+    if (centerSelectionWhenIdle && !segmented && !isTouchDragging && width > 0 && selectedIndex in itemFrames.indices) {
       val desired = (scrollTargetCenterX - width / 2f).roundToInt()
         .coerceIn(0, max(0, content.measuredWidth - width))
       scrollTo(desired, 0)
@@ -335,7 +396,9 @@ internal class CollapsiblePagerNativeTabBarView(context: Context) : FrameLayout(
 
   fun updateStyle(
     height: Double,
+    variant: String,
     contentPadding: Double,
+    contentPaddingVertical: Double,
     itemSpacing: Double,
     fontSize: Double,
     fontFamily: String?,
@@ -351,6 +414,8 @@ internal class CollapsiblePagerNativeTabBarView(context: Context) : FrameLayout(
       fontFamily,
       indicatorHeight,
       indicatorBottom,
+      variant,
+      contentPaddingVertical,
     )
     requestLayout()
   }

package/android/src/main/java/com/reactnativepagerview/CollapsiblePagerViewManager.kt

@@ -239,6 +239,13 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
     view.applyNativeHeaderStyle()
   }
 
+  @ReactProp(name = "nativeTabBarVariant")
+  override fun setNativeTabBarVariant(view: CollapsiblePagerHost?, value: String?) {
+    view ?: return
+    view.nativeTabBarVariant = if (value == "segmented") "segmented" else "underline"
+    view.applyNativeHeaderStyle()
+  }
+
   @ReactProp(name = "nativeTabBarTrailingReservedWidth", defaultDouble = 0.0)
   override fun setNativeTabBarTrailingReservedWidth(view: CollapsiblePagerHost?, value: Double) {
     view?.nativeTabBarTrailingReservedWidth = value
@@ -254,6 +261,13 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
     view.applyNativeHeaderStyle()
   }
 
+  @ReactProp(name = "nativeTabBarContentPaddingVertical")
+  override fun setNativeTabBarContentPaddingVertical(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarContentPaddingVertical = if (value.isFinite()) value.coerceAtLeast(0.0) else 0.0
+    view.applyNativeHeaderStyle()
+  }
+
   @ReactProp(name = "nativeTabBarItemSpacing")
   override fun setNativeTabBarItemSpacing(view: CollapsiblePagerHost?, value: Double) {
     view ?: return

package/docs/SPEC.md

@@ -496,6 +496,40 @@ The attached UIKit regression intentionally constrains the real pager pan to two
 required touches to prove the no-pan path; it is distinct from natural Home OS
 input, coalesced-event delivery, and physical-device acceptance.
 
+## Native segmented tab bar
+
+Status: implemented locally. Focused production-class iOS XCTest and Android
+instrumentation checks pass; consuming App interaction acceptance is separate.
+`nativeTabBar.style.variant` accepts `"underline"` (the default) or
+`"segmented"` on iOS and Android. The optional
+`nativeTabBar.style.contentPaddingVertical` is a nonnegative logical inset,
+defaulting to zero. Omitting both fields preserves the existing content-width,
+horizontally scrollable underline bar. Web ignores `nativeTabBar` and retains
+its caller-rendered sticky header.
+
+In segmented mode, the existing `height` is the entire tab slot. The track
+fills the space inside `contentPaddingHorizontal` and
+`contentPaddingVertical`, uses `backgroundColor`, and has a fully rounded
+outline. Its visible items divide the track into equal-width segments in their
+current order, including after item insertion, removal, relabeling, or resize.
+The thumb uses `indicatorColor`, is inset two logical points from its segment,
+and is fully rounded. Segment titles use the existing font and active/inactive
+text colors, remain single-line with truncation, and retain their existing
+accessibility labels, test IDs, and native press event keys. The segmented bar
+does not scroll horizontally; `itemSpacing`, `indicatorHeight`, and
+`indicatorBottom` apply only to underline mode. The pager's native fractional
+page progress moves the thumb continuously between equal-width segments and
+interpolates text emphasis without per-frame JavaScript updates. It settles at
+the actual selected page after a completed or cancelled gesture. RTL reverses
+physical segment order without changing logical page keys or indices.
+
+Switching variants or removing the native tab bar clears the previous visual
+state. The existing native press command, page callbacks, retention, vertical
+header geometry, and Web behavior remain unchanged. Acceptance requires
+focused native geometry/progress/press checks on iOS and Android, including
+two or three segments, dynamic labels/items, RTL, narrow widths, and variant
+switching. Type forwarding alone does not prove rendered behavior.
+
 ## Native tab-press animation default
 
 Behavior change: previously an omitted `nativeTabPressAnimationEnabled` animated

package/ios/RNCCollapsiblePagerViewComponentView.mm

@@ -369,7 +369,9 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
 @property (nonatomic, copy) RNCCollapsiblePagerNativeTabPressHandler onTabPress;
 - (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
@@ -386,12 +388,15 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
 
 @implementation RNCCollapsiblePagerNativeTabBarView {
   RNCCollapsiblePagerHorizontalScrollView *_scrollView;
+  UIView *_trackView;
   UIView *_indicatorView;
   NSArray<NSDictionary *> *_items;
   NSMutableArray<UIButton *> *_buttons;
   NSMutableArray<NSValue *> *_indicatorFrames;
   CGFloat _barHeight;
   CGFloat _contentPaddingHorizontal;
+  CGFloat _contentPaddingVertical;
+  BOOL _segmented;
   CGFloat _itemSpacing;
   CGFloat _fontSize;
   NSString *_fontFamily;
@@ -414,6 +419,8 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
     _indicatorFrames = [NSMutableArray new];
     _barHeight = 44;
     _contentPaddingHorizontal = 20;
+    _contentPaddingVertical = 0;
+    _segmented = NO;
     _itemSpacing = 8;
     _fontSize = 16;
     _activeTextColor = UIColor.labelColor;
@@ -435,6 +442,10 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
     _scrollView.delegate = self;
     [self addSubview:_scrollView];
 
+    _trackView = [UIView new];
+    _trackView.userInteractionEnabled = NO;
+    [_scrollView addSubview:_trackView];
+
     _indicatorView = [UIView new];
     _indicatorView.userInteractionEnabled = NO;
     [_scrollView addSubview:_indicatorView];
@@ -489,7 +500,9 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
 }
 
 - (void)updateStyleWithHeight:(CGFloat)height
+                      variant:(NSString *)variant
      contentPaddingHorizontal:(CGFloat)contentPaddingHorizontal
+       contentPaddingVertical:(CGFloat)contentPaddingVertical
                   itemSpacing:(CGFloat)itemSpacing
                      fontSize:(CGFloat)fontSize
                    fontFamily:(NSString *)fontFamily
@@ -501,19 +514,26 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
               indicatorBottom:(CGFloat)indicatorBottom
 {
   _barHeight = MAX(1, height);
+  BOOL wasSegmented = _segmented;
+  _segmented = [variant isEqualToString:@"segmented"];
   _contentPaddingHorizontal = MAX(0, contentPaddingHorizontal);
+  _contentPaddingVertical = MAX(0, contentPaddingVertical);
   _itemSpacing = MAX(0, itemSpacing);
   _fontSize = MAX(1, fontSize);
   _fontFamily = [fontFamily copy];
-  self.backgroundColor = backgroundColor ?: UIColor.clearColor;
+  self.backgroundColor = _segmented ? UIColor.clearColor : (backgroundColor ?: UIColor.clearColor);
   _scrollView.backgroundColor = self.backgroundColor;
+  _scrollView.scrollEnabled = !_segmented;
+  if (_segmented && !wasSegmented) [_scrollView setContentOffset:CGPointZero animated:NO];
+  _trackView.hidden = !_segmented;
+  _trackView.backgroundColor = backgroundColor ?: UIColor.clearColor;
   _activeTextColor = activeTextColor ?: UIColor.labelColor;
   _inactiveTextColor = inactiveTextColor ?: UIColor.secondaryLabelColor;
   _indicatorColor = indicatorColor ?: _activeTextColor;
   _indicatorHeight = MAX(0, indicatorHeight);
   _indicatorBottom = MAX(0, indicatorBottom);
   _indicatorView.backgroundColor = _indicatorColor;
-  _indicatorView.layer.cornerRadius = _indicatorHeight / 2;
+  _indicatorView.layer.cornerRadius = _segmented ? 0 : _indicatorHeight / 2;
   for (UIButton *button in _buttons) button.titleLabel.font = self.tabFont;
   [self setNeedsLayout];
 }
@@ -572,6 +592,33 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
 {
   [super layoutSubviews];
   _scrollView.frame = self.bounds;
+  if (_segmented) {
+    CGFloat width = CGRectGetWidth(self.bounds);
+    CGFloat height = CGRectGetHeight(self.bounds);
+    CGFloat insetX = MIN(_contentPaddingHorizontal, width / 2);
+    CGFloat insetY = MIN(_contentPaddingVertical, height / 2);
+    CGRect trackFrame = CGRectMake(insetX, insetY,
+      MAX(0, width - 2 * insetX), MAX(0, height - 2 * insetY));
+    _trackView.frame = trackFrame;
+    _trackView.layer.cornerRadius = CGRectGetHeight(trackFrame) / 2;
+    _scrollView.contentSize = self.bounds.size;
+    [_indicatorFrames removeAllObjects];
+    NSUInteger count = _buttons.count;
+    [_buttons enumerateObjectsUsingBlock:^(UIButton *button, NSUInteger index, BOOL *stop) {
+      CGFloat first = CGRectGetMinX(trackFrame) + CGRectGetWidth(trackFrame) * index / count;
+      CGFloat last = CGRectGetMinX(trackFrame) + CGRectGetWidth(trackFrame) * (index + 1) / count;
+      CGFloat x = self->_leftToRight ? first : CGRectGetMaxX(trackFrame) - (last - CGRectGetMinX(trackFrame));
+      CGFloat end = self->_leftToRight ? last : CGRectGetMaxX(trackFrame) - (first - CGRectGetMinX(trackFrame));
+      button.frame = CGRectMake(x, CGRectGetMinY(trackFrame), MAX(0, end - x), CGRectGetHeight(trackFrame));
+      CGRect thumbFrame = CGRectMake(x + 2, CGRectGetMinY(trackFrame) + 2,
+        MAX(0, CGRectGetWidth(button.frame) - 4), MAX(0, CGRectGetHeight(trackFrame) - 4));
+      [self->_indicatorFrames addObject:[NSValue valueWithCGRect:thumbFrame]];
+    }];
+    _indicatorView.layer.cornerRadius = MAX(0, CGRectGetHeight(trackFrame) - 4) / 2;
+    [self updatePresentation];
+    return;
+  }
+  _trackView.frame = CGRectZero;
   UIFont *font = self.tabFont;
   NSMutableArray<NSNumber *> *widths = [NSMutableArray arrayWithCapacity:_buttons.count];
   CGFloat itemsWidth = 0;
@@ -635,10 +682,10 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
     CGRectGetMinX(fromFrame) + (CGRectGetMinX(toFrame) - CGRectGetMinX(fromFrame)) * fraction,
     CGRectGetMinY(fromFrame),
     CGRectGetWidth(fromFrame) + (CGRectGetWidth(toFrame) - CGRectGetWidth(fromFrame)) * fraction,
-    _indicatorHeight
+    _segmented ? CGRectGetHeight(fromFrame) : _indicatorHeight
   );
   _indicatorView.frame = indicatorFrame;
-  _indicatorView.hidden = _indicatorHeight <= 0;
+  _indicatorView.hidden = CGRectGetHeight(indicatorFrame) <= 0;
 
   NSInteger selectedIndex = (NSInteger)round(progress);
   [_buttons enumerateObjectsUsingBlock:^(UIButton *button, NSUInteger index, BOOL *stop) {
@@ -655,7 +702,7 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
       : UIAccessibilityTraitButton;
   }];
 
-  if (_shouldCenterSelectedItem && !_scrollView.tracking && !_scrollView.dragging &&
+  if (_shouldCenterSelectedItem && !_segmented && !_scrollView.tracking && !_scrollView.dragging &&
       !_scrollView.decelerating && CGRectGetWidth(_scrollView.bounds) > 0) {
     CGFloat maximumOffset = MAX(0, _scrollView.contentSize.width - CGRectGetWidth(_scrollView.bounds));
     CGFloat desiredOffset = RNCClamp(
@@ -3457,7 +3504,9 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
   }
   if (_needsPropsReapply ||
       oldViewProps.nativeTabBarHeight != newViewProps.nativeTabBarHeight ||
+      oldViewProps.nativeTabBarVariant != newViewProps.nativeTabBarVariant ||
       oldViewProps.nativeTabBarContentPaddingHorizontal != newViewProps.nativeTabBarContentPaddingHorizontal ||
+      oldViewProps.nativeTabBarContentPaddingVertical != newViewProps.nativeTabBarContentPaddingVertical ||
       oldViewProps.nativeTabBarItemSpacing != newViewProps.nativeTabBarItemSpacing ||
       oldViewProps.nativeTabBarFontSize != newViewProps.nativeTabBarFontSize ||
       oldViewProps.nativeTabBarFontFamily != newViewProps.nativeTabBarFontFamily ||
@@ -3474,7 +3523,9 @@ static void RNCLogNativeTabScrollBoundary(NSString *owner,
     NSString *fontFamily = RCTNSStringFromString(newViewProps.nativeTabBarFontFamily);
     [_nativeTabBarView
       updateStyleWithHeight:_nativeTabBarHeight
+      variant:RCTNSStringFromString(newViewProps.nativeTabBarVariant)
       contentPaddingHorizontal:MAX(0, newViewProps.nativeTabBarContentPaddingHorizontal)
+      contentPaddingVertical:MAX(0, newViewProps.nativeTabBarContentPaddingVertical)
       itemSpacing:MAX(0, newViewProps.nativeTabBarItemSpacing)
       fontSize:newViewProps.nativeTabBarFontSize > 0 ? newViewProps.nativeTabBarFontSize : 16
       fontFamily:fontFamily

package/ios/tests/RNCCollapsiblePagerHitTestTests.mm

@@ -16,6 +16,19 @@ using namespace facebook::react;
 
 @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
@@ -143,6 +156,84 @@ using namespace facebook::react;
     [[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

@@ -763,6 +763,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;
@@ -904,6 +924,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

@@ -242,6 +242,8 @@ 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;
@@ -274,8 +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/CollapsiblePagerViewNativeComponent.ts

@@ -67,8 +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;

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

@@ -16,9 +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;
@@ -57,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" | "nativeTabBarTrailingReservedWidth" | "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. */

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

@@ -50,8 +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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "6.7.0-alpha.354",
+  "version": "6.7.0-alpha.359",
   "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.354",
+    "@onekeyfe/react-native-native-logger": "6.7.0-alpha.359",
     "react": "*",
     "react-native": "*"
   },

package/src/CollapsiblePagerView.tsx

@@ -32,9 +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;
@@ -95,8 +97,10 @@ export interface CollapsiblePagerViewProps
     | "retainedPages"
     | "nativeTabBarItems"
     | "nativeTabBarHeight"
+    | "nativeTabBarVariant"
     | "nativeTabBarTrailingReservedWidth"
     | "nativeTabBarContentPaddingHorizontal"
+    | "nativeTabBarContentPaddingVertical"
     | "nativeTabBarItemSpacing"
     | "nativeTabBarFontSize"
     | "nativeTabBarFontFamily"
@@ -568,6 +572,14 @@ 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 =
@@ -629,6 +641,9 @@ export class CollapsiblePagerView extends React.PureComponent<
         nativeTabBarHeight={
           nativeTabBarEnabled ? nativeTabBarStyle?.height ?? 44 : undefined
         }
+        nativeTabBarVariant={
+          nativeTabBarEnabled ? nativeTabBarStyle?.variant ?? "underline" : undefined
+        }
         nativeTabBarTrailingReservedWidth={
           nativeTabBarEnabled ? nativeTabBarTrailingReservedWidth : 0
         }
@@ -637,6 +652,9 @@ export class CollapsiblePagerView extends React.PureComponent<
             ? nativeTabBarStyle?.contentPaddingHorizontal ?? 20
             : undefined
         }
+        nativeTabBarContentPaddingVertical={
+          nativeTabBarEnabled ? nativeTabBarContentPaddingVertical : undefined
+        }
         nativeTabBarItemSpacing={
           nativeTabBarEnabled ? nativeTabBarStyle?.itemSpacing ?? 8 : undefined
         }

package/src/CollapsiblePagerViewNativeComponent.ts

@@ -67,8 +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;