@onekeyfe/react-native-pager-view 6.7.0-2 → 6.7.0-20

package/README.md

@@ -66,6 +66,20 @@ 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.
+`isActive` describes route visibility; the pager preserves a pending scroll
+target across a short or temporarily hidden page and retries when real content
+geometry becomes ready. `useWebCollapsiblePagerPage()` exposes the selected
+page's scroll owner, visible metrics, content registration and pending target
+to descendants. These Web-only APIs require a DOM when mounted. Native callers
+continue to use `CollapsiblePagerView`.
 
 On iOS and Android, `nativeTabBar` renders the tab bar natively and
 `onNativeTabPress` reports presses. By default, adjacent tab presses animate and

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,306 @@
+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 androidx.recyclerview.widget.RecyclerView
+import androidx.viewpager2.widget.ViewPager2
+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()
+    }
+  }
+
+  fun testUnmountWithTransitioningPageHoldersSkipsEmptyRecyclerLayout() {
+    val context = instrumentation.targetContext
+    val activity = instrumentation.startActivitySync(
+      Intent(context, CollapsiblePagerHitTestActivity::class.java)
+        .addFlags(Intent.FLAG_ACTIVITY_NEW_TASK),
+    ) as CollapsiblePagerHitTestActivity
+    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 host = CollapsiblePagerHost(context)
+        activity.setContentView(host)
+        val header = View(context)
+        val sticky = View(context)
+        val page0 = View(context)
+        val page1 = View(context)
+        host.addReactChild(header, 0)
+        host.addReactChild(sticky, 1)
+        host.addReactChild(page0, 2)
+        host.addReactChild(page1, 3)
+        host.measure(
+          View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+          View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY),
+        )
+        host.layout(0, 0, width, height)
+        val pager = (0 until host.childCount).map(host::getChildAt).filterIsInstance<ViewPager2>().first()
+        val recycler = pager.getChildAt(0) as RecyclerView
+        assertNull(recycler.itemAnimator)
+        assertTrue(host.attachedPageCount() > 0)
+
+        val transitioningHolders = (0 until recycler.childCount).map(recycler::getChildAt)
+        transitioningHolders.forEach { recycler.startViewTransition(it) }
+
+        host.removeReactChild(page1)
+        host.removeReactChild(page0)
+        host.removeReactChild(sticky)
+        host.removeReactChild(header)
+
+        host.viewTreeObserver.dispatchOnPreDraw()
+        host.measure(
+          View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),
+          View.MeasureSpec.makeMeasureSpec(height, View.MeasureSpec.EXACTLY),
+        )
+        host.layout(0, 0, width, height)
+        assertTrue(host.attachedPageCount() > 0)
+
+        transitioningHolders.forEach { recycler.endViewTransition(it) }
+      }
+      instrumentation.waitForIdleSync()
+    } 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
@@ -311,6 +327,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     pager.id = View.generateViewId()
     pager.adapter = adapter
     pager.isSaveEnabled = false
+    (pager.getChildAt(0) as? RecyclerView)?.itemAnimator = null
     super.addView(
       pager,
       LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT),
@@ -416,7 +433,9 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
   fun applyNativeHeaderStyle() {
     nativeTabBarView.updateStyle(
       nativeTabBarHeight,
+      nativeTabBarVariant,
       nativeTabBarContentPaddingHorizontal,
+      nativeTabBarContentPaddingVertical,
       nativeTabBarItemSpacing,
       nativeTabBarFontSize,
       nativeTabBarFontFamily,
@@ -442,6 +461,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 +709,16 @@ 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 (
+      !shouldDrainCollapsiblePagerLayout(
+        recycler.isLayoutRequested,
+        recycler.isLayoutSuppressed,
+        recycler.isComputingLayout,
+        recycler.width,
+        recycler.height,
+        adapter.itemCount,
+      )
+    ) 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 +741,13 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     layout(left, top, right, bottom)
   }
 
+  private fun isPagerRecyclerLayoutSuppressed(): Boolean =
+    shouldSuppressCollapsiblePagerRecyclerLayout(
+      (pager.getChildAt(0) as? RecyclerView)?.isLayoutSuppressed == true,
+      adapter.itemCount,
+      attachedPageCount(),
+    )
+
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
     val width = MeasureSpec.getSize(widthMeasureSpec)
     val height = MeasureSpec.getSize(heightMeasureSpec)
@@ -722,10 +758,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 +775,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 +796,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 +807,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 +874,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 +1033,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 +1086,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 +1100,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 +1705,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 +2079,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 +2197,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