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

package/README.md

@@ -66,6 +66,11 @@ replacing its delegate. Android coordinates nested scroll with the active
 Web scroll child can opt in by exposing a DOM element with
 `data-collapsible-pager-scroll`. CSS scroll timelines drive header/sticky
 movement, so React is not updated on each vertical scroll frame.
+`pagerRef.current?.scrollHeaderBy(delta)` immediately moves the active page's
+collapsible header by a finite logical distance, clamped to its measured range.
+`scrollHeaderToOffset(offset)` targets an absolute collapse position, so a
+keyboard's own scroll adjustment cannot add a second relative movement.
+It is useful for revealing a focused field above a keyboard.
 
 On Web, `WebCollapsiblePagerView` is an explicit root export of the existing Web
 pager. It measures Header and sticky content when their heights are omitted.

package/android/src/androidTest/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <application android:supportsRtl="true">
+    <activity
+      android:name="com.reactnativepagerview.CollapsiblePagerHitTestActivity"
+      android:exported="false" />
+  </application>
+</manifest>

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

@@ -0,0 +1,247 @@
+package com.reactnativepagerview
+
+import android.app.Activity
+import android.content.Intent
+import android.content.pm.ApplicationInfo
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.Color
+import android.test.InstrumentationTestCase
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import android.widget.HorizontalScrollView
+import android.widget.TextView
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.views.view.ReactViewGroup
+import java.util.concurrent.atomic.AtomicInteger
+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)
+    val activity = instrumentation.startActivitySync(
+      Intent(context, CollapsiblePagerHitTestActivity::class.java)
+        .addFlags(Intent.FLAG_ACTIVITY_NEW_TASK),
+    ) as CollapsiblePagerHitTestActivity
+    val toolbarPresses = AtomicInteger()
+    val tabPresses = AtomicInteger()
+    try {
+      instrumentation.runOnMainSync {
+      val density = context.resources.displayMetrics.density
+      fun dp(value: Int) = (value * density).roundToInt()
+      val width = dp(320)
+      val height = dp(500)
+      val reserved = dp(64)
+      val tabHeight = dp(44)
+      val host = CollapsiblePagerHost(context)
+      activity.setContentView(host)
+      assertTrue(host.isAttachedToWindow)
+      val sticky = ReactViewGroup(context).apply { pointerEvents = PointerEvents.BOX_NONE }
+      val fade = View(context).apply { setBackgroundColor(Color.RED) }
+      val toolbar = View(context).apply {
+        setBackgroundColor(Color.BLUE)
+        isClickable = true
+      }
+      sticky.addView(fade)
+      sticky.addView(toolbar)
+      host.addReactChild(View(context), 0)
+      host.addReactChild(sticky, 1)
+      host.headerHeightPx = 0
+      host.stickyHeaderHeightPx = tabHeight
+      host.nativeTabBarBackgroundColor = Color.GREEN
+      host.applyNativeHeaderStyle()
+      host.updateNativeTabBarItems(
+        """[{"key":"a","title":"Overview"},{"key":"b","title":"Ethereum"},""" +
+          """{"key":"c","title":"BNB Chain"},{"key":"d","title":"Polygon"}]""",
+      )
+      val tab = (0 until host.childCount).map(host::getChildAt)
+        .first { it.javaClass.simpleName == "CollapsiblePagerNativeTabBarView" } as ViewGroup
+      val row = tab.getChildAt(0) as HorizontalScrollView
+      toolbar.setOnClickListener { toolbarPresses.incrementAndGet() }
+      host.onNativeTabPress = { _, _ -> tabPresses.incrementAndGet() }
+
+      fun layout() {
+        host.measure(View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+          View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY))
+        host.layout(0, 0, width, height)
+      }
+      fun tap(x: Int) {
+        val time = android.os.SystemClock.uptimeMillis()
+        val down = MotionEvent.obtain(time, time, MotionEvent.ACTION_DOWN,
+          x.toFloat(), (tabHeight / 2).toFloat(), 0)
+        val up = MotionEvent.obtain(time, time + 20, MotionEvent.ACTION_UP,
+          x.toFloat(), (tabHeight / 2).toFloat(), 0)
+        host.dispatchTouchEvent(down)
+        host.dispatchTouchEvent(up)
+        down.recycle()
+        up.recycle()
+      }
+      fun colorAt(x: Int): Int {
+        val bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
+        host.draw(Canvas(bitmap))
+        val color = bitmap.getPixel(x, tabHeight / 2)
+        bitmap.recycle()
+        return color
+      }
+
+      host.nativeTabBarTrailingReservedWidth = 64.0
+      layout()
+      fade.layout(width - reserved - dp(20), 0, width - reserved, tabHeight)
+      toolbar.layout(width - reserved, 0, width, tabHeight)
+      assertEquals(width - reserved, tab.width)
+      assertEquals(0, tab.left)
+      assertEquals(width, sticky.width)
+      assertEquals(Color.RED, colorAt(width - reserved - dp(10)))
+      tap(width - dp(10))
+      tap(dp(28))
+      host.updateNativeTabProgress(3, 0f)
+      val content = row.getChildAt(0) as ViewGroup
+      val lastTab = (0 until content.childCount).map(content::getChildAt)
+        .filterIsInstance<TextView>().last()
+      assertTrue(lastTab.left >= row.scrollX - dp(1))
+      assertTrue(lastTab.right <= row.scrollX + row.width + dp(1))
+
+      host.setPagerLayoutDirection(View.LAYOUT_DIRECTION_RTL)
+      host.nativeTabBarTrailingReservedWidth = 64.0
+      layout()
+      assertEquals(View.LAYOUT_DIRECTION_RTL, tab.layoutDirection)
+      toolbar.layout(0, 0, reserved, tabHeight)
+      fade.layout(reserved, 0, reserved + dp(20), tabHeight)
+      assertEquals(reserved, tab.left)
+      assertEquals(width, tab.right)
+      assertEquals(Color.RED, colorAt(reserved + dp(10)))
+      tap(dp(10))
+
+      host.nativeTabBarTrailingReservedWidth = 500.0
+      layout()
+      assertEquals(0, tab.width)
+      host.nativeTabBarTrailingReservedWidth = 0.0
+      layout()
+      assertEquals(0, tab.left)
+      assertEquals(width, tab.width)
+      assertTrue(host.indexOfChild(sticky) < host.indexOfChild(tab))
+      }
+      instrumentation.waitForIdleSync()
+      assertEquals(2, toolbarPresses.get())
+      assertEquals(1, tabPresses.get())
+    } finally {
+      instrumentation.runOnMainSync { activity.finish() }
+      instrumentation.waitForIdleSync()
+    }
+  }
+}

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

@@ -142,7 +142,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
   private var transitionSourceRecyclerAnchor: RecyclerReadingAnchor? = null
   private val commandBodyKeys = HashSet<String>()
   private var explicitTopCommand: Pair<String, PageRestoreRequest>? = null
-  private class PagerTopRequest(view: View, val key: String, val pageIndex: Int, val generation: Int, val target: Int, val token: Int) {
+  private class PagerTopRequest(view: View, val key: String, val pageIndex: Int, val generation: Int, val logicalOffset: Int, val token: Int) {
     val view = WeakReference(view)
   }
   private var pagerTopRequest: PagerTopRequest? = null
@@ -293,7 +293,23 @@ 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
+      bringNativeHeadersToFront()
+      requestLayout()
+    }
+
+  private fun nativeTabReservationPx(width: Int): Int {
+    val reserved = nativeTabBarTrailingReservedWidth
+    val density = resources.displayMetrics.density
+    return if (reserved.isFinite() && reserved > 0.0 && width > 0 && density > 0f) {
+      (reserved.coerceAtMost(width / density.toDouble()) * density).roundToInt()
+    } else 0
+  }
   var nativeTabBarContentPaddingHorizontal = 20.0
+  var nativeTabBarContentPaddingVertical = 0.0
   var nativeTabBarItemSpacing = 8.0
   var nativeTabBarFontSize = 16.0
   var nativeTabBarFontFamily: String? = null
@@ -416,7 +432,9 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
   fun applyNativeHeaderStyle() {
     nativeTabBarView.updateStyle(
       nativeTabBarHeight,
+      nativeTabBarVariant,
       nativeTabBarContentPaddingHorizontal,
+      nativeTabBarContentPaddingVertical,
       nativeTabBarItemSpacing,
       nativeTabBarFontSize,
       nativeTabBarFontFamily,
@@ -442,6 +460,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
   private fun bringNativeHeadersToFront() {
     nativeTabBarView.bringToFront()
     nativeSubHeaderView.bringToFront()
+    if (nativeTabBarTrailingReservedWidth > 0.0) stickyHeaderView?.bringToFront()
   }
 
   fun addReactChild(child: View, index: Int) {
@@ -689,7 +708,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
 
   private fun layoutPagerIfRequested() {
     val recycler = pager.getChildAt(0) as? RecyclerView ?: return
-    if (!recycler.isLayoutRequested || recycler.isComputingLayout || recycler.width <= 0 || recycler.height <= 0) return
+    if (!recycler.isLayoutRequested || recycler.isLayoutSuppressed || recycler.isComputingLayout || recycler.width <= 0 || recycler.height <= 0) return
     // OneKey patch: a non-animated page command queues RecyclerView layout, but RN
     // can stop that request after navigation. Drain it before showing the page.
     recycler.measure(
@@ -712,6 +731,9 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     layout(left, top, right, bottom)
   }
 
+  private fun isPagerRecyclerLayoutSuppressed(): Boolean =
+    (pager.getChildAt(0) as? RecyclerView)?.isLayoutSuppressed == true
+
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
     val width = MeasureSpec.getSize(widthMeasureSpec)
     val height = MeasureSpec.getSize(heightMeasureSpec)
@@ -722,10 +744,12 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
       return
     }
     val pagerHeight = height + headerHeightPx
-    pager.measure(
-      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
-      MeasureSpec.makeMeasureSpec(pagerHeight, MeasureSpec.EXACTLY),
-    )
+    if (!isPagerRecyclerLayoutSuppressed()) {
+      pager.measure(
+        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+        MeasureSpec.makeMeasureSpec(pagerHeight, MeasureSpec.EXACTLY),
+      )
+    }
     headerView?.measure(
       MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
       MeasureSpec.makeMeasureSpec(headerHeightPx, MeasureSpec.EXACTLY),
@@ -737,8 +761,9 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     val nativeTabHeight = if (nativeTabBarView.visibility == View.VISIBLE) {
       nativeTabBarView.preferredHeightPx()
     } else 0
+    val tabReservedWidth = nativeTabReservationPx(width)
     nativeTabBarView.measure(
-      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(width - tabReservedWidth, MeasureSpec.EXACTLY),
       MeasureSpec.makeMeasureSpec(nativeTabHeight, MeasureSpec.EXACTLY),
     )
     val nativeSubHeaderHeight = if (nativeSubHeaderView.visibility == View.VISIBLE) {
@@ -757,7 +782,9 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     // RN ancestors allow overflow; keep translated header content inside this viewport.
     clipBounds = Rect(0, 0, width, height)
     if (width <= 0 || height <= 0) return
-    pager.layout(0, 0, width, height + headerHeightPx)
+    if (!isPagerRecyclerLayoutSuppressed()) {
+      pager.layout(0, 0, width, height + headerHeightPx)
+    }
     headerView?.layout(0, 0, width, headerHeightPx)
     stickyHeaderView?.layout(
       0,
@@ -766,7 +793,12 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
       headerHeightPx + stickyHeaderHeightPx,
     )
     val nativeTabHeight = nativeTabBarView.measuredHeight
-    nativeTabBarView.layout(0, headerHeightPx, width, headerHeightPx + nativeTabHeight)
+    val tabReservedWidth = nativeTabReservationPx(width)
+    val tabLeft = if (nativeTabBarView.layoutDirection == View.LAYOUT_DIRECTION_RTL) {
+      tabReservedWidth
+    } else 0
+    nativeTabBarView.layout(tabLeft, headerHeightPx, tabLeft + width - tabReservedWidth,
+      headerHeightPx + nativeTabHeight)
     nativeSubHeaderView.layout(
       0,
       headerHeightPx + nativeTabHeight,
@@ -828,7 +860,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     }
     if (!reached()) {
       if (!isAttachedToWindow || !view.isAttachedToWindow || width <= 0 || height <= 0 ||
-          view.width <= 0 || view.height <= 0 || isInLayout || view.isInLayout || view.isComputingLayout ||
+          view.width <= 0 || view.height <= 0 || isInLayout || view.isInLayout || view.isLayoutSuppressed || view.isComputingLayout ||
           pageKey(index) != key || primaryScrollableForPage(index) !== view || !isCurrentPageRestore(key, request)) return false
       val previousSynthetic = syntheticPageRestore
       syntheticPageRestore = true
@@ -987,13 +1019,33 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     if (!settled) return
     pageOffsets[request.key] = 0
     if (view is RecyclerView) saveRecyclerReadingAnchor(request.key, view)
-    setHeaderOffset(if (request.target == 1) headerHeightPx else 0)
-    offsetDiag("pager-top-complete-target=${request.target}-token=${request.token}", view, request.key)
+    setHeaderOffset(request.logicalOffset.coerceIn(0, headerHeightPx))
+    offsetDiag("pager-top-complete-offset=${request.logicalOffset}-token=${request.token}", view, request.key)
     cancelPagerTop()
   }
 
   internal fun scrollToTop(target: Int, animated: Boolean) {
-    if (target !in 0..1 || pager.scrollState != ViewPager2.SCROLL_STATE_IDLE || transitionHeaderOffsets != null ||
+    if (target !in 0..1) return
+    scrollHeaderToOffset(if (target == 1) headerHeightPx else 0, animated)
+  }
+
+  internal fun scrollHeaderBy(delta: Double) {
+    if (!delta.isFinite()) return
+    val density = resources.displayMetrics.density.toDouble()
+    val maxDip = headerHeightPx / density
+    val deltaPx = (delta.coerceIn(-maxDip, maxDip) * density).roundToInt()
+    scrollHeaderToOffset((headerOffsetPx.toLong() + deltaPx).coerceIn(0, headerHeightPx.toLong()).toInt(), false)
+  }
+
+  internal fun scrollHeaderToOffset(offset: Double) {
+    if (!offset.isFinite()) return
+    val density = resources.displayMetrics.density.toDouble()
+    val targetPx = (offset.coerceIn(0.0, headerHeightPx / density) * density).roundToInt()
+    scrollHeaderToOffset(targetPx, false)
+  }
+
+  private fun scrollHeaderToOffset(logicalOffset: Int, animated: Boolean) {
+    if (pager.scrollState != ViewPager2.SCROLL_STATE_IDLE || transitionHeaderOffsets != null ||
       syntheticPageRestore || selectedPage !in 0 until adapter.itemCount || !isAttachedToWindow) return
     val view = observedRecyclerView ?: observedOwnedScroller ?: observedNativeScroller ?: return
     val key = currentPageKey()
@@ -1020,11 +1072,12 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     if (view is RecyclerView) deferredRecyclerGeometry.remove(view)
     if (view is ScrollView) deferredScrollerGeometry.remove(view)
     pageOffsets[key] = 0
-    val request = PagerTopRequest(view, key, selectedPage, attachmentGeneration, target, ++pagerTopToken)
+    val targetOffset = logicalOffset.coerceIn(0, headerHeightPx)
+    val request = PagerTopRequest(view, key, selectedPage, attachmentGeneration, targetOffset, ++pagerTopToken)
     pagerTopRequest = request
     commandBodyKeys.add(key)
-    setHeaderOffset(if (target == 1) headerHeightPx else 0)
-    offsetDiag("pager-top-begin-target=$target-animated=$animated-token=${request.token}", view, key)
+    setHeaderOffset(targetOffset)
+    offsetDiag("pager-top-begin-offset=$targetOffset-animated=$animated-token=${request.token}", view, key)
     dispatchingPagerTop = true
     try {
       when (view) {
@@ -1033,7 +1086,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
           if (animated && !recyclerIsAtBodyTop(view)) view.smoothScrollToPosition(0)
           else if (manager != null && manager.orientation == RecyclerView.VERTICAL) {
             manager.scrollToPositionWithOffset(0, 0)
-            if (view.width > 0 && view.height > 0 && !isInLayout && !view.isInLayout && !view.isComputingLayout) {
+            if (view.width > 0 && view.height > 0 && !isInLayout && !view.isInLayout && !view.isLayoutSuppressed && !view.isComputingLayout) {
               view.measure(MeasureSpec.makeMeasureSpec(view.width, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(view.height, MeasureSpec.EXACTLY))
               view.layout(view.left, view.top, view.right, view.bottom)
             }
@@ -1638,7 +1691,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
       if (anchorOffset != null) manager?.scrollToPositionWithOffset(first, anchorOffset)
       // React Native can stop this nested requestLayout at its React-owned parent.
       // Commit the changed inset before drawing instead of waiting for a data update.
-      if (recycler.width > 0 && recycler.height > 0 && !recycler.isComputingLayout) {
+      if (recycler.width > 0 && recycler.height > 0 && !recycler.isLayoutSuppressed && !recycler.isComputingLayout) {
         recycler.forceLayout()
         recycler.measure(
           MeasureSpec.makeMeasureSpec(recycler.width, MeasureSpec.EXACTLY),
@@ -2012,14 +2065,16 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     }
   }
 
-  private fun headerRegionAt(y: Float): String? {
+  private fun headerRegionAt(x: Float, y: Float): String? {
     val headerBottom = headerHeightPx - headerOffsetPx
     val stickyBottom = headerHeightPx + stickyHeaderHeightPx - headerOffsetPx
     return when {
       y < 0 || y >= stickyBottom -> null
       y < headerBottom -> "header"
       y < headerBottom + nativeTabBarView.measuredHeight &&
-        nativeTabBarView.visibility == View.VISIBLE -> "primary-tab"
+        nativeTabBarView.visibility == View.VISIBLE ->
+        if (x >= nativeTabBarView.left && x < nativeTabBarView.right) "primary-tab"
+        else "sticky-controls"
       y < headerBottom + nativeTabBarView.measuredHeight + nativeSubHeaderView.measuredHeight &&
         nativeSubHeaderView.visibility == View.VISIBLE -> "secondary-header"
       else -> "sticky-controls"
@@ -2128,7 +2183,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
         pressCancelled = false
         nativeGestureStarted = false
         nestedNativeGestureStarted = false
-        headerTouchRegion = headerRegionAt(event.y) ?: "none"
+        headerTouchRegion = headerRegionAt(event.x, event.y) ?: "none"
         headerTouchActive = headerTouchRegion != "none"
         if (!headerTouchActive) return super.dispatchTouchEvent(event)
         headerDownX = event.x

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()
   }