@onekeyfe/react-native-pager-view 3.0.119 → 3.0.120

package/android/build.gradle

@@ -226,6 +226,7 @@ dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   implementation 'androidx.viewpager2:viewpager2:1.1.0'
+  implementation project(":onekeyfe_react-native-native-logger")
 }
 
 if (isNewArchitectureEnabled()) {

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

@@ -2,9 +2,13 @@ package com.reactnativepagerview
 
 import android.content.Context
 import android.graphics.Rect
+import android.os.SystemClock
+import android.view.MotionEvent
 import android.view.View
+import android.view.ViewConfiguration
 import android.view.ViewGroup
 import android.view.ViewTreeObserver
+import android.widget.HorizontalScrollView
 // OneKey patch: FrameLayout is inherited through NestedScrollableHost.
 // import android.widget.FrameLayout
 import androidx.core.view.NestedScrollingParent3
@@ -13,6 +17,8 @@ import androidx.core.view.ViewCompat
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import androidx.viewpager2.widget.ViewPager2
+import com.facebook.react.uimanager.events.NativeGestureUtil
+import com.margelo.nitro.nativelogger.OneKeyLog
 import java.util.WeakHashMap
 import kotlin.math.max
 import kotlin.math.min
@@ -72,6 +78,13 @@ internal class CollapsiblePagerAdapter : RecyclerView.Adapter<ViewPagerViewHolde
 // OneKey patch: Match the standard pager's nested horizontal gesture host.
 // Original: class CollapsiblePagerHost(context: Context) : FrameLayout(context), NestedScrollingParent3 {
 class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), NestedScrollingParent3 {
+  private enum class HeaderGestureOwner {
+    NONE,
+    LIST,
+    HORIZONTAL_CHILD,
+    HEADER_GUARD,
+  }
+
   private data class RecyclerPadding(
     var left: Int,
     var top: Int,
@@ -83,6 +96,8 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
 
   val pager = ViewPager2(context)
   internal val adapter = CollapsiblePagerAdapter()
+  private val nativeTabBarView = CollapsiblePagerNativeTabBarView(context)
+  private val nativeSubHeaderView = CollapsiblePagerNativeSubHeaderView(context)
   private val logicalChildren = ArrayList<View>()
   private val nestedScrollingParentHelper = NestedScrollingParentHelper(this)
   private val originalRecyclerPadding = WeakHashMap<RecyclerView, RecyclerPadding>()
@@ -91,8 +106,20 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
   private var observedRecyclerView: RecyclerView? = null
   private var observedScrollListener: RecyclerView.OnScrollListener? = null
   private var attachmentGeneration = 0
+  private val touchSlopPx = ViewConfiguration.get(context).scaledTouchSlop
+  private val hostIdentity = System.identityHashCode(this)
   private var headerView: View? = null
   private var stickyHeaderView: View? = null
+  private var headerTouchActive = false
+  private var headerTouchRegion = "none"
+  private var headerGestureOwner = HeaderGestureOwner.NONE
+  private var headerDownX = 0f
+  private var headerDownY = 0f
+  private var headerDownEvent: MotionEvent? = null
+  private var headerHasHorizontalChild = false
+  private var forwardedRecycler: RecyclerView? = null
+  private var nativeGestureStarted = false
+  private var pressCancelled = false
   private val pageContentLayoutListener = ViewTreeObserver.OnPreDrawListener {
     if (width > 0 && height > 0 && isShown) layoutPagerIfRequested()
     // Fabric can mount a retained list without another Android layout pass.
@@ -128,6 +155,22 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
   var pageKeys: List<String> = emptyList()
   var retainedPages: String = "[]"
   var onHeaderOffsetChanged: (() -> Unit)? = null
+  var nativeSmoothHeaderScrollEnabled = false
+  var onNativeTabPress: ((Int, String) -> Unit)? = null
+  var onNativeSubHeaderPress: ((Int, String) -> Unit)? = null
+
+  var nativeTabBarHeight = 44.0
+  var nativeTabBarContentPaddingHorizontal = 20.0
+  var nativeTabBarItemSpacing = 8.0
+  var nativeTabBarFontSize = 16.0
+  var nativeTabBarFontFamily: String? = null
+  var nativeTabBarBackgroundColor = android.graphics.Color.TRANSPARENT
+  var nativeTabBarActiveTextColor = android.graphics.Color.BLACK
+  var nativeTabBarInactiveTextColor = android.graphics.Color.GRAY
+  var nativeTabBarIndicatorColor = android.graphics.Color.BLACK
+  var nativeTabBarIndicatorHeight = 2.0
+  var nativeTabBarIndicatorBottom = 0.0
+  var nativeSubHeaderSelectedBackgroundColor = android.graphics.Color.TRANSPARENT
 
   init {
     isSaveEnabled = false
@@ -139,6 +182,88 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
       pager,
       LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT),
     )
+    nativeTabBarView.onItemPress = { index, key -> onNativeTabPress?.invoke(index, key) }
+    nativeSubHeaderView.onItemPress = { index, key -> onNativeSubHeaderPress?.invoke(index, key) }
+    super.addView(nativeTabBarView)
+    super.addView(nativeSubHeaderView)
+    applyNativeHeaderStyle()
+    log("host-init generation=$attachmentGeneration")
+  }
+
+  private fun log(message: String) {
+    OneKeyLog.debug("CollapsiblePager", "host=$hostIdentity $message")
+  }
+
+  private fun outerPagerIndex(): Int {
+    var ancestor = parent as? View
+    while (ancestor != null) {
+      if (ancestor is ViewPager2) return ancestor.currentItem
+      ancestor = ancestor.parent as? View
+    }
+    return -1
+  }
+
+  fun updateNativeTabBarItems(value: String?) {
+    nativeTabBarView.updateItemsJSON(value)
+    bringNativeHeadersToFront()
+    updateHeaderLayout()
+  }
+
+  fun updateNativeSubHeader(value: String?) {
+    nativeSubHeaderView.updateConfigJSON(value)
+    applyNativeHeaderStyle()
+    bringNativeHeadersToFront()
+    updateHeaderLayout()
+  }
+
+  fun updateNativeTabProgress(position: Int, offset: Float) {
+    nativeTabBarView.setProgress(position + offset)
+  }
+
+  fun logPagerState(reason: String) {
+    log(
+      "pager-state reason=$reason inner=$selectedPage outer=${outerPagerIndex()} " +
+        "nativePages=${adapter.itemCount} attachedPages=${attachedPageCount()} " +
+        "headerOffset=$headerOffsetPx retained=$retainedPages",
+    )
+  }
+
+  fun setPagerLayoutDirection(layoutDirection: Int) {
+    pager.layoutDirection = layoutDirection
+    nativeTabBarView.layoutDirection = layoutDirection
+    nativeSubHeaderView.layoutDirection = layoutDirection
+    nativeSubHeaderView.requestLayout()
+  }
+
+  fun applyNativeHeaderStyle() {
+    nativeTabBarView.updateStyle(
+      nativeTabBarHeight,
+      nativeTabBarContentPaddingHorizontal,
+      nativeTabBarItemSpacing,
+      nativeTabBarFontSize,
+      nativeTabBarFontFamily,
+      nativeTabBarIndicatorHeight,
+      nativeTabBarIndicatorBottom,
+    )
+    nativeTabBarView.updateColors(
+      nativeTabBarBackgroundColor,
+      nativeTabBarActiveTextColor,
+      nativeTabBarInactiveTextColor,
+      nativeTabBarIndicatorColor,
+    )
+    nativeSubHeaderView.updateColors(
+      nativeTabBarBackgroundColor,
+      nativeTabBarActiveTextColor,
+      nativeTabBarInactiveTextColor,
+      nativeSubHeaderSelectedBackgroundColor,
+      nativeTabBarFontFamily,
+    )
+    updateHeaderLayout()
+  }
+
+  private fun bringNativeHeadersToFront() {
+    nativeTabBarView.bringToFront()
+    nativeSubHeaderView.bringToFront()
   }
 
   fun addReactChild(child: View, index: Int) {
@@ -160,7 +285,11 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     applyPendingInitialPage()
     headerView?.bringToFront()
     stickyHeaderView?.bringToFront()
+    bringNativeHeadersToFront()
     requestLayout()
+    if (safeIndex >= PAGE_SLOT_OFFSET) {
+      log("page-attach slot=${safeIndex - PAGE_SLOT_OFFSET} nativePages=${adapter.itemCount}")
+    }
   }
 
   fun removeReactChild(child: View) {
@@ -179,6 +308,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
       else -> {
         findVerticalRecyclerView(child)?.let(::restoreRecyclerInsets)
         adapter.removePage(child)
+        log("page-detach slot=${index - PAGE_SLOT_OFFSET} nativePages=${adapter.itemCount}")
       }
     }
   }
@@ -195,6 +325,7 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     logicalChildren.clear()
     adapter.clear()
     hasAppliedInitialPage = false
+    log("pages-clear")
   }
 
   fun reactChildCount() = logicalChildren.size
@@ -285,6 +416,20 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
       MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
       MeasureSpec.makeMeasureSpec(stickyHeaderHeightPx, MeasureSpec.EXACTLY),
     )
+    val nativeTabHeight = if (nativeTabBarView.visibility == View.VISIBLE) {
+      nativeTabBarView.preferredHeightPx()
+    } else 0
+    nativeTabBarView.measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(nativeTabHeight, MeasureSpec.EXACTLY),
+    )
+    val nativeSubHeaderHeight = if (nativeSubHeaderView.visibility == View.VISIBLE) {
+      nativeSubHeaderView.preferredHeightPx()
+    } else 0
+    nativeSubHeaderView.measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(nativeSubHeaderHeight, MeasureSpec.EXACTLY),
+    )
     setMeasuredDimension(width, height)
   }
 
@@ -302,6 +447,14 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
       width,
       headerHeightPx + stickyHeaderHeightPx,
     )
+    val nativeTabHeight = nativeTabBarView.measuredHeight
+    nativeTabBarView.layout(0, headerHeightPx, width, headerHeightPx + nativeTabHeight)
+    nativeSubHeaderView.layout(
+      0,
+      headerHeightPx + nativeTabHeight,
+      width,
+      headerHeightPx + nativeTabHeight + nativeSubHeaderView.measuredHeight,
+    )
     applyHeaderOffset()
     postForCurrentAttachment {
       prepareAdjacentPages()
@@ -333,6 +486,8 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     pager.translationY = -offset
     headerView?.translationY = -offset
     stickyHeaderView?.translationY = -offset
+    nativeTabBarView.translationY = -offset
+    nativeSubHeaderView.translationY = -offset
   }
 
   private fun pageKey(index: Int): String = pageKeys.getOrNull(index) ?: "page-$index"
@@ -408,7 +563,10 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     }
     observedScrollListener = listener
     recycler.addOnScrollListener(listener)
-
+    log(
+      "list-observer-attach inner=$selectedPage key=${currentPageKey()} " +
+        "recycler=${System.identityHashCode(recycler)}",
+    )
   }
 
   private fun detachRecyclerObserver() {
@@ -416,6 +574,12 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     val recycler = observedRecyclerView
     val listener = observedScrollListener
     if (recycler != null && listener != null) recycler.removeOnScrollListener(listener)
+    if (recycler != null) {
+      log(
+        "list-observer-detach inner=$selectedPage key=${currentPageKey()} " +
+          "recycler=${System.identityHashCode(recycler)}",
+      )
+    }
     observedRecyclerView = null
     observedScrollListener = null
   }
@@ -513,6 +677,195 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     recycler.setPadding(original.left, original.top, original.right, original.bottom)
   }
 
+  private fun headerRegionAt(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"
+      y < headerBottom + nativeTabBarView.measuredHeight + nativeSubHeaderView.measuredHeight &&
+        nativeSubHeaderView.visibility == View.VISIBLE -> "secondary-header"
+      else -> "sticky-controls"
+    }
+  }
+
+  private fun deepestChildAt(group: ViewGroup, x: Float, y: Float): View {
+    for (index in group.childCount - 1 downTo 0) {
+      val child = group.getChildAt(index)
+      if (child.visibility != View.VISIBLE || child.alpha <= 0f) continue
+      val localX = x + group.scrollX - child.left - child.translationX
+      val localY = y + group.scrollY - child.top - child.translationY
+      if (localX < 0 || localY < 0 || localX >= child.width || localY >= child.height) continue
+      return if (child is ViewGroup) deepestChildAt(child, localX, localY) else child
+    }
+    return group
+  }
+
+  private fun hasHorizontalScrollOwner(x: Float, y: Float): Boolean {
+    var target: View? = deepestChildAt(this, x, y)
+    while (target != null && target !== this) {
+      if (
+        target is HorizontalScrollView ||
+        target.canScrollHorizontally(-1) ||
+        target.canScrollHorizontally(1) ||
+        (target is RecyclerView &&
+          (target.layoutManager as? LinearLayoutManager)?.orientation == RecyclerView.HORIZONTAL)
+      ) {
+        return true
+      }
+      target = target.parent as? View
+    }
+    return false
+  }
+
+  private fun cancelHeaderPress(event: MotionEvent, owner: String) {
+    if (pressCancelled) return
+    pressCancelled = true
+    val cancel = MotionEvent.obtain(event).apply { action = MotionEvent.ACTION_CANCEL }
+    super.dispatchTouchEvent(cancel)
+    cancel.recycle()
+    if (!nativeGestureStarted) {
+      NativeGestureUtil.notifyNativeGestureStarted(this, event)
+      nativeGestureStarted = true
+    }
+    log(
+      "press-cancel owner=$owner region=$headerTouchRegion " +
+        "inner=$selectedPage outer=${outerPagerIndex()}",
+    )
+  }
+
+  private fun dispatchToRecycler(recycler: RecyclerView, event: MotionEvent): Boolean {
+    val hostLocation = IntArray(2)
+    val recyclerLocation = IntArray(2)
+    getLocationOnScreen(hostLocation)
+    recycler.getLocationOnScreen(recyclerLocation)
+    val copy = MotionEvent.obtain(event)
+    copy.offsetLocation(
+      (hostLocation[0] - recyclerLocation[0]).toFloat(),
+      (hostLocation[1] - recyclerLocation[1]).toFloat(),
+    )
+    val handled = recycler.dispatchTouchEvent(copy)
+    copy.recycle()
+    return handled
+  }
+
+  private fun beginForwardingToRecycler(event: MotionEvent): Boolean {
+    val recycler = recyclerViewForPage(selectedPage) ?: return false
+    forwardedRecycler = recycler
+    headerDownEvent?.let { down -> dispatchToRecycler(recycler, down) }
+    return dispatchToRecycler(recycler, event)
+  }
+
+  private fun finishHeaderGesture(event: MotionEvent) {
+    val owner = headerGestureOwner.name.lowercase()
+    if (nativeGestureStarted) {
+      NativeGestureUtil.notifyNativeGestureEnded(this, event)
+      nativeGestureStarted = false
+    }
+    log(
+      "gesture-end action=${event.actionMasked} owner=$owner region=$headerTouchRegion " +
+        "inner=$selectedPage outer=${outerPagerIndex()} durationMs=" +
+        "${SystemClock.uptimeMillis() - event.downTime}",
+    )
+    headerDownEvent?.recycle()
+    headerDownEvent = null
+    headerTouchActive = false
+    headerTouchRegion = "none"
+    headerGestureOwner = HeaderGestureOwner.NONE
+    headerHasHorizontalChild = false
+    forwardedRecycler = null
+    pressCancelled = false
+  }
+
+  override fun dispatchTouchEvent(e: MotionEvent): Boolean {
+    val event = e
+    if (!nativeSmoothHeaderScrollEnabled) return super.dispatchTouchEvent(event)
+
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> {
+        headerDownEvent?.recycle()
+        headerDownEvent = null
+        headerGestureOwner = HeaderGestureOwner.NONE
+        forwardedRecycler = null
+        pressCancelled = false
+        nativeGestureStarted = false
+        headerTouchRegion = headerRegionAt(event.y) ?: "none"
+        headerTouchActive = headerTouchRegion != "none"
+        if (!headerTouchActive) return super.dispatchTouchEvent(event)
+        headerDownX = event.x
+        headerDownY = event.y
+        headerDownEvent = MotionEvent.obtain(event)
+        headerHasHorizontalChild = hasHorizontalScrollOwner(event.x, event.y)
+        parent.requestDisallowInterceptTouchEvent(true)
+        log(
+          "gesture-begin region=$headerTouchRegion owner=pending " +
+            "horizontalChild=$headerHasHorizontalChild inner=$selectedPage " +
+            "outer=${outerPagerIndex()} headerOffset=$headerOffsetPx",
+        )
+        return super.dispatchTouchEvent(event)
+      }
+
+      MotionEvent.ACTION_MOVE -> {
+        if (!headerTouchActive) return super.dispatchTouchEvent(event)
+        if (headerGestureOwner == HeaderGestureOwner.NONE) {
+          val dx = event.x - headerDownX
+          val dy = event.y - headerDownY
+          if (kotlin.math.abs(dx) <= touchSlopPx && kotlin.math.abs(dy) <= touchSlopPx) {
+            return super.dispatchTouchEvent(event)
+          }
+          headerGestureOwner = when {
+            kotlin.math.abs(dy) > kotlin.math.abs(dx) -> HeaderGestureOwner.LIST
+            headerHasHorizontalChild -> HeaderGestureOwner.HORIZONTAL_CHILD
+            else -> HeaderGestureOwner.HEADER_GUARD
+          }
+          log(
+            "direction-lock owner=${headerGestureOwner.name.lowercase()} " +
+              "region=$headerTouchRegion dx=${dx.roundToInt()} dy=${dy.roundToInt()} " +
+              "inner=$selectedPage outer=${outerPagerIndex()}",
+          )
+        }
+        parent.requestDisallowInterceptTouchEvent(true)
+        return when (headerGestureOwner) {
+          HeaderGestureOwner.LIST -> {
+            cancelHeaderPress(event, "list")
+            val recycler = forwardedRecycler
+            if (recycler != null) {
+              dispatchToRecycler(recycler, event)
+            } else if (beginForwardingToRecycler(event)) {
+              true
+            } else {
+              headerGestureOwner = HeaderGestureOwner.HEADER_GUARD
+              log("gesture-list-unavailable region=$headerTouchRegion inner=$selectedPage")
+              true
+            }
+          }
+          HeaderGestureOwner.HORIZONTAL_CHILD -> super.dispatchTouchEvent(event)
+          HeaderGestureOwner.HEADER_GUARD -> {
+            cancelHeaderPress(event, "header-guard")
+            true
+          }
+          HeaderGestureOwner.NONE -> super.dispatchTouchEvent(event)
+        }
+      }
+
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        if (!headerTouchActive) return super.dispatchTouchEvent(event)
+        val handled = when (headerGestureOwner) {
+          HeaderGestureOwner.LIST -> forwardedRecycler?.let { recycler ->
+            dispatchToRecycler(recycler, event)
+          } ?: true
+          HeaderGestureOwner.HEADER_GUARD -> true
+          else -> super.dispatchTouchEvent(event)
+        }
+        finishHeaderGesture(event)
+        return handled
+      }
+    }
+    return super.dispatchTouchEvent(event)
+  }
+
   private fun isCurrentPageTarget(target: View): Boolean {
     if (selectedPage !in 0 until adapter.itemCount) return false
     return isDescendant(target, adapter.pageAt(selectedPage))
@@ -612,15 +965,29 @@ class CollapsiblePagerHost(context: Context) : NestedScrollableHost(context), Ne
     attachmentGeneration += 1
     restoredRecyclerKeys.clear()
     viewTreeObserver.addOnPreDrawListener(pageContentLayoutListener)
+    log(
+      "host-attach generation=$attachmentGeneration inner=$selectedPage " +
+        "outer=${outerPagerIndex()} nativePages=${adapter.itemCount}",
+    )
   }
 
   override fun onDetachedFromWindow() {
     attachmentGeneration += 1
+    headerDownEvent?.recycle()
+    headerDownEvent = null
+    headerTouchActive = false
+    forwardedRecycler = null
+    pressCancelled = false
+    nativeGestureStarted = false
     viewTreeObserver.removeOnPreDrawListener(pageContentLayoutListener)
     detachRecyclerObserver()
     for (recycler in originalRecyclerPadding.keys.toList()) {
       restoreRecyclerInsets(recycler)
     }
+    log(
+      "host-detach generation=$attachmentGeneration inner=$selectedPage " +
+        "outer=${outerPagerIndex()} nativePages=${adapter.itemCount}",
+    )
     super.onDetachedFromWindow()
   }
 

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

@@ -0,0 +1,503 @@
+package com.reactnativepagerview
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
+import android.text.TextUtils
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import android.widget.HorizontalScrollView
+import android.widget.TextView
+import androidx.core.graphics.ColorUtils
+import org.json.JSONArray
+import org.json.JSONObject
+import kotlin.math.ceil
+import kotlin.math.floor
+import kotlin.math.max
+import kotlin.math.min
+import kotlin.math.roundToInt
+
+internal data class CollapsiblePagerNativeHeaderItem(
+  val key: String,
+  val title: String,
+  val accessibilityLabel: String,
+  val testID: String?,
+)
+
+private fun parseHeaderItems(value: String?): List<CollapsiblePagerNativeHeaderItem> {
+  if (value.isNullOrEmpty()) return emptyList()
+  return runCatching {
+    val array = JSONArray(value)
+    List(array.length()) { index ->
+      val item = array.optJSONObject(index) ?: JSONObject()
+      val title = item.optString("title")
+      CollapsiblePagerNativeHeaderItem(
+        key = item.optString("key"),
+        title = title,
+        accessibilityLabel = item.optString("accessibilityLabel", title),
+        testID = item.optString("testID").takeIf(String::isNotEmpty),
+      )
+    }
+  }.getOrDefault(emptyList())
+}
+
+private class CollapsiblePagerHorizontalItemsView(
+  context: Context,
+  private val showsProgressIndicator: Boolean,
+) : HorizontalScrollView(context) {
+  private val density = resources.displayMetrics.density
+  private val content = FrameLayout(context)
+  private val indicator = View(context)
+  private val buttons = ArrayList<TextView>()
+  private val itemFrames = ArrayList<IntArray>()
+  private var items: List<CollapsiblePagerNativeHeaderItem> = emptyList()
+  private var selectedKey = ""
+  private var rowHeightPx = dp(if (showsProgressIndicator) 44.0 else 42.0)
+  private var contentPaddingPx = dp(20.0)
+  private var itemSpacingPx = dp(8.0)
+  private var fontSize = if (showsProgressIndicator) 16.0 else 14.0
+  private var fontFamily: String? = null
+  private var activeTextColor = Color.BLACK
+  private var inactiveTextColor = Color.GRAY
+  private var selectedBackgroundColor = Color.TRANSPARENT
+  private var indicatorColor = Color.BLACK
+  private var indicatorHeightPx = dp(2.0)
+  private var indicatorBottomPx = 0
+  private var progress = 0f
+  private var centerSelectionWhenIdle = true
+  private var isTouchDragging = false
+
+  var onItemPress: ((Int, String) -> Unit)? = null
+
+  init {
+    isHorizontalScrollBarEnabled = false
+    isVerticalScrollBarEnabled = false
+    isFillViewport = true
+    overScrollMode = OVER_SCROLL_NEVER
+    clipToPadding = false
+    content.addView(indicator)
+    addView(
+      content,
+      LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT),
+    )
+  }
+
+  private fun dp(value: Double): Int = (value * density).roundToInt()
+
+  fun updateItemsJSON(value: String?) {
+    val next = parseHeaderItems(value)
+    if (items == next) return
+    items = next
+    buttons.forEach(content::removeView)
+    buttons.clear()
+    itemFrames.clear()
+    items.forEachIndexed { index, item ->
+      val button = TextView(context).apply {
+        text = item.title
+        contentDescription = item.accessibilityLabel
+        setTag(com.facebook.react.R.id.react_test_id, item.testID)
+        gravity = Gravity.CENTER
+        isSingleLine = true
+        ellipsize = TextUtils.TruncateAt.END
+        isClickable = true
+        isFocusable = true
+        setPadding(dp(8.0), 0, dp(8.0), 0)
+        setOnClickListener { onItemPress?.invoke(index, item.key) }
+      }
+      buttons.add(button)
+      content.addView(button)
+    }
+    visibility = if (items.isEmpty()) GONE else VISIBLE
+    centerSelectionWhenIdle = true
+    requestLayout()
+  }
+
+  fun updateSelectedKey(value: String) {
+    if (selectedKey == value) return
+    selectedKey = value
+    centerSelectionWhenIdle = true
+    updatePresentation()
+  }
+
+  fun updateStyle(
+    rowHeight: Double,
+    contentPadding: Double,
+    itemSpacing: Double,
+    fontSize: Double,
+    fontFamily: String?,
+    indicatorHeight: Double = 0.0,
+    indicatorBottom: Double = 0.0,
+  ) {
+    rowHeightPx = max(1, dp(rowHeight))
+    contentPaddingPx = max(0, dp(contentPadding))
+    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))
+    }
+    applyTypeface()
+    requestLayout()
+  }
+
+  fun updateColors(
+    backgroundColor: Int,
+    activeTextColor: Int,
+    inactiveTextColor: Int,
+    selectedBackgroundColor: Int,
+    indicatorColor: Int,
+  ) {
+    setBackgroundColor(backgroundColor)
+    content.setBackgroundColor(backgroundColor)
+    this.activeTextColor = activeTextColor
+    this.inactiveTextColor = inactiveTextColor
+    this.selectedBackgroundColor = selectedBackgroundColor
+    this.indicatorColor = indicatorColor
+    indicator.setBackgroundColor(indicatorColor)
+    updatePresentation()
+  }
+
+  fun setProgress(value: Float) {
+    if (!showsProgressIndicator || items.isEmpty()) return
+    val next = value.coerceIn(0f, (items.size - 1).toFloat())
+    if (kotlin.math.abs(progress - next) >= 0.001f) centerSelectionWhenIdle = true
+    progress = next
+    updatePresentation()
+  }
+
+  private fun applyTypeface() {
+    val typeface = Typeface.create(fontFamily ?: "sans-serif-medium", Typeface.NORMAL)
+    buttons.forEach { button ->
+      button.typeface = typeface
+      button.setTextSize(TypedValue.COMPLEX_UNIT_SP, fontSize.toFloat())
+    }
+  }
+
+  private fun selectedBackground(selected: Boolean) = GradientDrawable().apply {
+    shape = GradientDrawable.RECTANGLE
+    setColor(if (selected) selectedBackgroundColor else Color.TRANSPARENT)
+    cornerRadius = dp(10.0).toFloat()
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    val width = MeasureSpec.getSize(widthMeasureSpec)
+    val height = when (MeasureSpec.getMode(heightMeasureSpec)) {
+      MeasureSpec.EXACTLY -> MeasureSpec.getSize(heightMeasureSpec)
+      else -> rowHeightPx
+    }
+    applyTypeface()
+    itemFrames.clear()
+    var x = contentPaddingPx
+    buttons.forEachIndexed { index, button ->
+      val textWidth = ceil(button.paint.measureText(button.text.toString()).toDouble()).toInt()
+      val buttonWidth = max(dp(44.0), textWidth + dp(if (showsProgressIndicator) 16.0 else 20.0))
+      val indicatorWidth = textWidth
+      val indicatorX = x + (buttonWidth - indicatorWidth) / 2
+      itemFrames.add(intArrayOf(x, buttonWidth, indicatorX, indicatorWidth))
+      val itemHeight = if (showsProgressIndicator) height else min(dp(32.0), height)
+      val top = if (showsProgressIndicator) 0 else max(0, (height - itemHeight) / 2)
+      button.layoutParams = FrameLayout.LayoutParams(buttonWidth, itemHeight).apply {
+        leftMargin = x
+        topMargin = top
+      }
+      x += buttonWidth
+      if (index < buttons.lastIndex) x += itemSpacingPx
+    }
+    val contentWidth = max(width, x + contentPaddingPx)
+    content.layoutParams = LayoutParams(contentWidth, height)
+    content.measure(
+      MeasureSpec.makeMeasureSpec(contentWidth, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+    )
+    setMeasuredDimension(width, height)
+    updatePresentation()
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    updatePresentation()
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    when (event.actionMasked) {
+      MotionEvent.ACTION_DOWN -> isTouchDragging = true
+      MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+        isTouchDragging = false
+        post(::updatePresentation)
+      }
+    }
+    return super.onTouchEvent(event)
+  }
+
+  private fun updatePresentation() {
+    if (buttons.isEmpty() || itemFrames.size != buttons.size) return
+    val selectedIndex: Int
+    if (showsProgressIndicator) {
+      val clamped = progress.coerceIn(0f, buttons.lastIndex.toFloat())
+      val lower = floor(clamped).toInt()
+      val upper = min(lower + 1, buttons.lastIndex)
+      val fraction = clamped - lower
+      val from = itemFrames[lower]
+      val to = itemFrames[upper]
+      val indicatorX = (from[2] + (to[2] - from[2]) * fraction).roundToInt()
+      val indicatorWidth = (from[3] + (to[3] - from[3]) * fraction).roundToInt()
+      indicator.layoutParams = FrameLayout.LayoutParams(indicatorWidth, indicatorHeightPx).apply {
+        leftMargin = indicatorX
+        topMargin = max(0, measuredHeight - indicatorBottomPx - indicatorHeightPx)
+      }
+      indicator.visibility = if (indicatorHeightPx > 0) VISIBLE else GONE
+      indicator.background = GradientDrawable().apply {
+        shape = GradientDrawable.RECTANGLE
+        setColor(indicatorColor)
+        cornerRadius = indicatorHeightPx / 2f
+      }
+      selectedIndex = clamped.roundToInt()
+      buttons.forEachIndexed { index, button ->
+        val emphasis = 1f - min(1f, kotlin.math.abs(clamped - index))
+        button.setTextColor(ColorUtils.blendARGB(inactiveTextColor, activeTextColor, emphasis))
+        button.background = null
+        button.isSelected = index == selectedIndex
+      }
+    } else {
+      selectedIndex = items.indexOfFirst { item -> item.key == selectedKey }
+      indicator.visibility = GONE
+      buttons.forEachIndexed { index, button ->
+        val selected = index == selectedIndex
+        button.setTextColor(if (selected) activeTextColor else inactiveTextColor)
+        button.background = selectedBackground(selected)
+        button.isSelected = selected
+      }
+    }
+
+    if (centerSelectionWhenIdle && !isTouchDragging && width > 0 && selectedIndex in itemFrames.indices) {
+      val frame = itemFrames[selectedIndex]
+      val desired = (frame[0] + frame[1] / 2 - width / 2)
+        .coerceIn(0, max(0, content.measuredWidth - width))
+      scrollTo(desired, 0)
+      centerSelectionWhenIdle = false
+    }
+  }
+}
+
+internal class CollapsiblePagerNativeTabBarView(context: Context) : FrameLayout(context) {
+  private val row = CollapsiblePagerHorizontalItemsView(context, true)
+  private var heightPx = 0
+
+  var onItemPress: ((Int, String) -> Unit)?
+    get() = row.onItemPress
+    set(value) {
+      row.onItemPress = value
+    }
+
+  init {
+    addView(row, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    visibility = GONE
+  }
+
+  fun updateItemsJSON(value: String?) {
+    row.updateItemsJSON(value)
+    visibility = row.visibility
+  }
+
+  fun updateStyle(
+    height: Double,
+    contentPadding: Double,
+    itemSpacing: Double,
+    fontSize: Double,
+    fontFamily: String?,
+    indicatorHeight: Double,
+    indicatorBottom: Double,
+  ) {
+    heightPx = max(1, (height * resources.displayMetrics.density).roundToInt())
+    row.updateStyle(
+      height,
+      contentPadding,
+      itemSpacing,
+      fontSize,
+      fontFamily,
+      indicatorHeight,
+      indicatorBottom,
+    )
+    requestLayout()
+  }
+
+  fun updateColors(
+    backgroundColor: Int,
+    activeTextColor: Int,
+    inactiveTextColor: Int,
+    indicatorColor: Int,
+  ) = row.updateColors(
+    backgroundColor,
+    activeTextColor,
+    inactiveTextColor,
+    Color.TRANSPARENT,
+    indicatorColor,
+  )
+
+  fun setProgress(progress: Float) = row.setProgress(progress)
+
+  fun preferredHeightPx(): Int = heightPx
+}
+
+internal class CollapsiblePagerNativeSubHeaderView(context: Context) : ViewGroup(context) {
+  private val density = resources.displayMetrics.density
+  private val tabs = CollapsiblePagerHorizontalItemsView(context, false)
+  private val columns = FrameLayout(context)
+  private val leading = TextView(context)
+  private val middle = TextView(context)
+  private val trailing = TextView(context)
+  private var configuredHeightPx = dp(74.0)
+  private var tabsHeightPx = dp(42.0)
+  private var contentPaddingPx = dp(20.0)
+  private var itemSpacing = 8.0
+  private var itemFontSize = 14.0
+  private var columnFontSize = 12.0
+  private var trailingColumnWidthPx = dp(80.0)
+  private var columnGapPx = dp(8.0)
+  private var backgroundColorValue = Color.TRANSPARENT
+  private var activeTextColor = Color.BLACK
+  private var inactiveTextColor = Color.GRAY
+  private var selectedBackgroundColor = Color.TRANSPARENT
+  private var fontFamily: String? = null
+
+  var onItemPress: ((Int, String) -> Unit)?
+    get() = tabs.onItemPress
+    set(value) {
+      tabs.onItemPress = value
+    }
+
+  init {
+    addView(tabs)
+    addView(columns)
+    columns.addView(leading)
+    columns.addView(middle)
+    columns.addView(trailing)
+    listOf(leading, middle, trailing).forEach { label ->
+      label.gravity = Gravity.CENTER_VERTICAL
+      label.isSingleLine = true
+      label.ellipsize = TextUtils.TruncateAt.END
+    }
+    visibility = GONE
+  }
+
+  private fun dp(value: Double): Int = (value * density).roundToInt()
+
+  fun updateConfigJSON(value: String?) {
+    val config = runCatching { JSONObject(value ?: "{}") }.getOrDefault(JSONObject())
+    val style = config.optJSONObject("style") ?: JSONObject()
+    val columnsConfig = config.optJSONObject("columns") ?: JSONObject()
+    val itemArray = config.optJSONArray("items") ?: JSONArray()
+    tabs.updateItemsJSON(itemArray.toString())
+    tabs.updateSelectedKey(config.optString("selectedKey"))
+    configuredHeightPx = max(1, dp(style.optDouble("height", 74.0)))
+    tabsHeightPx = max(0, dp(style.optDouble("tabsHeight", 42.0)))
+    contentPaddingPx = max(0, dp(style.optDouble("contentPaddingHorizontal", 20.0)))
+    itemSpacing = max(0.0, style.optDouble("itemSpacing", 8.0))
+    itemFontSize = max(1.0, style.optDouble("fontSize", 14.0))
+    columnFontSize = max(1.0, style.optDouble("columnFontSize", 12.0))
+    trailingColumnWidthPx = max(0, dp(style.optDouble("trailingColumnWidth", 80.0)))
+    columnGapPx = max(0, dp(style.optDouble("columnGap", 8.0)))
+    leading.text = columnsConfig.optString("leading")
+    middle.text = columnsConfig.optString("middle")
+    trailing.text = columnsConfig.optString("trailing")
+    visibility = if (itemArray.length() == 0) GONE else VISIBLE
+    applyStyle()
+    requestLayout()
+  }
+
+  fun updateColors(
+    backgroundColor: Int,
+    activeTextColor: Int,
+    inactiveTextColor: Int,
+    selectedBackgroundColor: Int,
+    fontFamily: String?,
+  ) {
+    backgroundColorValue = backgroundColor
+    this.activeTextColor = activeTextColor
+    this.inactiveTextColor = inactiveTextColor
+    this.selectedBackgroundColor = selectedBackgroundColor
+    this.fontFamily = fontFamily
+    applyStyle()
+  }
+
+  private fun applyStyle() {
+    setBackgroundColor(backgroundColorValue)
+    columns.setBackgroundColor(backgroundColorValue)
+    tabs.updateStyle(
+      tabsHeightPx / density.toDouble(),
+      contentPaddingPx / density.toDouble(),
+      itemSpacing,
+      itemFontSize,
+      fontFamily,
+    )
+    tabs.updateColors(
+      backgroundColorValue,
+      activeTextColor,
+      inactiveTextColor,
+      selectedBackgroundColor,
+      activeTextColor,
+    )
+    val typeface = Typeface.create(fontFamily ?: "sans-serif-medium", Typeface.NORMAL)
+    listOf(leading, middle, trailing).forEach { label ->
+      label.typeface = typeface
+      label.setTextSize(TypedValue.COMPLEX_UNIT_SP, columnFontSize.toFloat())
+      label.setTextColor(inactiveTextColor)
+    }
+  }
+
+  fun preferredHeightPx(): Int = configuredHeightPx
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    val width = MeasureSpec.getSize(widthMeasureSpec)
+    val height = MeasureSpec.getSize(heightMeasureSpec)
+    val actualTabsHeight = min(height, tabsHeightPx)
+    tabs.measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(actualTabsHeight, MeasureSpec.EXACTLY),
+    )
+    val columnsHeight = max(0, height - actualTabsHeight)
+    columns.measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(columnsHeight, MeasureSpec.EXACTLY),
+    )
+    setMeasuredDimension(width, height)
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    val width = right - left
+    val height = bottom - top
+    val actualTabsHeight = min(height, tabsHeightPx)
+    tabs.layout(0, 0, width, actualTabsHeight)
+    columns.layout(0, actualTabsHeight, width, height)
+    val columnsHeight = height - actualTabsHeight
+    val half = width / 2
+    val isRtl = layoutDirection == View.LAYOUT_DIRECTION_RTL
+    if (!isRtl) {
+      leading.gravity = Gravity.START or Gravity.CENTER_VERTICAL
+      middle.gravity = Gravity.END or Gravity.CENTER_VERTICAL
+      trailing.gravity = Gravity.END or Gravity.CENTER_VERTICAL
+      val trailingX = width - contentPaddingPx - trailingColumnWidthPx
+      leading.layout(contentPaddingPx, 0, half, columnsHeight)
+      middle.layout(half, 0, max(half, trailingX - columnGapPx), columnsHeight)
+      trailing.layout(trailingX, 0, width - contentPaddingPx, columnsHeight)
+    } else {
+      leading.gravity = Gravity.END or Gravity.CENTER_VERTICAL
+      middle.gravity = Gravity.START or Gravity.CENTER_VERTICAL
+      trailing.gravity = Gravity.START or Gravity.CENTER_VERTICAL
+      leading.layout(half, 0, width - contentPaddingPx, columnsHeight)
+      middle.layout(
+        contentPaddingPx + trailingColumnWidthPx + columnGapPx,
+        0,
+        half,
+        columnsHeight,
+      )
+      trailing.layout(contentPaddingPx, 0, contentPaddingPx + trailingColumnWidthPx, columnsHeight)
+    }
+  }
+}

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

@@ -2,6 +2,7 @@ package com.reactnativepagerview
 
 import android.view.View
 import android.view.ViewGroup
+import android.graphics.Color
 import androidx.viewpager2.widget.ViewPager2
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.common.MapBuilder
@@ -18,6 +19,7 @@ import com.reactnativepagerview.event.CollapsibleStateChangedEvent
 import com.reactnativepagerview.event.PageScrollEvent
 import com.reactnativepagerview.event.PageScrollStateChangedEvent
 import com.reactnativepagerview.event.PageSelectedEvent
+import com.reactnativepagerview.event.NativeHeaderPressEvent
 import org.json.JSONArray
 import kotlin.math.roundToInt
 
@@ -41,13 +43,16 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
     )
     host.pager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
       override fun onPageScrolled(position: Int, offset: Float, offsetPixels: Int) {
+        host.updateNativeTabProgress(position, offset)
         dispatch(reactContext, host, PageScrollEvent(host.id, position, offset))
       }
 
       override fun onPageSelected(position: Int) {
         host.selectPage(position)
+        host.updateNativeTabProgress(position, 0f)
         dispatch(reactContext, host, PageSelectedEvent(host.id, position))
         dispatchDiagnostics(reactContext, host, "page-selected")
+        host.logPagerState("page-selected")
       }
 
       override fun onPageScrollStateChanged(state: Int) {
@@ -60,9 +65,34 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
         dispatch(reactContext, host, PageScrollStateChangedEvent(host.id, value))
         if (state == ViewPager2.SCROLL_STATE_IDLE) {
           dispatchDiagnostics(reactContext, host, "pager-idle")
+          host.logPagerState("idle")
         }
       }
     })
+    host.onNativeTabPress = { position, key ->
+      dispatch(
+        reactContext,
+        host,
+        NativeHeaderPressEvent(
+          host.id,
+          position,
+          key,
+          NativeHeaderPressEvent.TAB_EVENT_NAME,
+        ),
+      )
+    }
+    host.onNativeSubHeaderPress = { position, key ->
+      dispatch(
+        reactContext,
+        host,
+        NativeHeaderPressEvent(
+          host.id,
+          position,
+          key,
+          NativeHeaderPressEvent.SUB_HEADER_EVENT_NAME,
+        ),
+      )
+    }
     host.onHeaderOffsetChanged = {
       if (!host.pager.isFakeDragging && host.pager.scrollState == ViewPager2.SCROLL_STATE_IDLE) {
         dispatchDiagnostics(reactContext, host, "vertical-idle")
@@ -123,11 +153,11 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
 
   @ReactProp(name = "layoutDirection")
   override fun setLayoutDirection(view: CollapsiblePagerHost?, value: String?) {
-    view?.pager?.layoutDirection = if (value == "rtl") {
+    view?.setPagerLayoutDirection(if (value == "rtl") {
       View.LAYOUT_DIRECTION_RTL
     } else {
       View.LAYOUT_DIRECTION_LTR
-    }
+    })
   }
 
   @ReactProp(name = "initialPage", defaultInt = 0)
@@ -151,11 +181,12 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
     // OneKey patch: CollapsiblePagerHost always coordinates nested pagers on Android.
   }
 
-  // The smooth shared-header ownership is implemented on iOS first.
   override fun setNativeSmoothHeaderScrollEnabled(
     view: CollapsiblePagerHost?,
     value: Boolean,
-  ) = Unit
+  ) {
+    view?.nativeSmoothHeaderScrollEnabled = value
+  }
 
   // OneKey patch: round Yoga header dimensions to the nearest physical pixel.
   @ReactProp(name = "headerHeight", defaultInt = 0)
@@ -179,41 +210,91 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
     view?.retainedPages = value ?: "[]"
   }
 
-  // The optional native tab bar is implemented on iOS first. These no-op
-  // setters preserve the shared Fabric contract without changing Android UI.
-  override fun setNativeTabBarItems(view: CollapsiblePagerHost?, value: String?) = Unit
+  override fun setNativeTabBarItems(view: CollapsiblePagerHost?, value: String?) {
+    view?.updateNativeTabBarItems(value)
+  }
 
-  override fun setNativeTabBarHeight(view: CollapsiblePagerHost?, value: Double) = Unit
+  override fun setNativeTabBarHeight(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarHeight = value
+    view.applyNativeHeaderStyle()
+  }
 
   override fun setNativeTabBarContentPaddingHorizontal(
     view: CollapsiblePagerHost?,
     value: Double,
-  ) = Unit
+  ) {
+    view ?: return
+    view.nativeTabBarContentPaddingHorizontal = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarItemSpacing(view: CollapsiblePagerHost?, value: Double) = Unit
+  override fun setNativeTabBarItemSpacing(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarItemSpacing = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarFontSize(view: CollapsiblePagerHost?, value: Double) = Unit
+  override fun setNativeTabBarFontSize(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarFontSize = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarFontFamily(view: CollapsiblePagerHost?, value: String?) = Unit
+  override fun setNativeTabBarFontFamily(view: CollapsiblePagerHost?, value: String?) {
+    view ?: return
+    view.nativeTabBarFontFamily = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarBackgroundColor(view: CollapsiblePagerHost?, value: Int?) = Unit
+  override fun setNativeTabBarBackgroundColor(view: CollapsiblePagerHost?, value: Int?) {
+    view ?: return
+    view.nativeTabBarBackgroundColor = value ?: Color.TRANSPARENT
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarActiveTextColor(view: CollapsiblePagerHost?, value: Int?) = Unit
+  override fun setNativeTabBarActiveTextColor(view: CollapsiblePagerHost?, value: Int?) {
+    view ?: return
+    view.nativeTabBarActiveTextColor = value ?: Color.BLACK
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarInactiveTextColor(view: CollapsiblePagerHost?, value: Int?) = Unit
+  override fun setNativeTabBarInactiveTextColor(view: CollapsiblePagerHost?, value: Int?) {
+    view ?: return
+    view.nativeTabBarInactiveTextColor = value ?: Color.GRAY
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarIndicatorColor(view: CollapsiblePagerHost?, value: Int?) = Unit
+  override fun setNativeTabBarIndicatorColor(view: CollapsiblePagerHost?, value: Int?) {
+    view ?: return
+    view.nativeTabBarIndicatorColor = value ?: view.nativeTabBarActiveTextColor
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarIndicatorHeight(view: CollapsiblePagerHost?, value: Double) = Unit
+  override fun setNativeTabBarIndicatorHeight(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarIndicatorHeight = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeTabBarIndicatorBottom(view: CollapsiblePagerHost?, value: Double) = Unit
+  override fun setNativeTabBarIndicatorBottom(view: CollapsiblePagerHost?, value: Double) {
+    view ?: return
+    view.nativeTabBarIndicatorBottom = value
+    view.applyNativeHeaderStyle()
+  }
 
-  override fun setNativeSubHeaderConfig(view: CollapsiblePagerHost?, value: String?) = Unit
+  override fun setNativeSubHeaderConfig(view: CollapsiblePagerHost?, value: String?) {
+    view?.updateNativeSubHeader(value)
+  }
 
   override fun setNativeSubHeaderSelectedBackgroundColor(
     view: CollapsiblePagerHost?,
     value: Int?,
-  ) = Unit
+  ) {
+    view ?: return
+    view.nativeSubHeaderSelectedBackgroundColor = value ?: Color.TRANSPARENT
+    view.applyNativeHeaderStyle()
+  }
 
   private fun parseStringArray(value: String?): List<String> {
     if (value.isNullOrEmpty()) return emptyList()
@@ -255,6 +336,14 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
         CollapsibleStateChangedEvent.EVENT_NAME,
         MapBuilder.of("registrationName", "onCollapsibleStateChanged"),
       )
+      .put(
+        NativeHeaderPressEvent.TAB_EVENT_NAME,
+        MapBuilder.of("registrationName", "onNativeTabPress"),
+      )
+      .put(
+        NativeHeaderPressEvent.SUB_HEADER_EVENT_NAME,
+        MapBuilder.of("registrationName", "onNativeSubHeaderPress"),
+      )
       .build()
       .toMutableMap()
 

package/android/src/main/java/com/reactnativepagerview/event/NativeHeaderPressEvent.kt

@@ -0,0 +1,31 @@
+package com.reactnativepagerview.event
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+class NativeHeaderPressEvent(
+  viewTag: Int,
+  private val position: Int,
+  private val key: String,
+  private val name: String,
+) : Event<NativeHeaderPressEvent>(viewTag) {
+  override fun getEventName() = name
+
+  override fun canCoalesce() = false
+
+  override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+    rctEventEmitter.receiveEvent(viewTag, eventName, serializeEventData())
+  }
+
+  private fun serializeEventData(): WritableMap = Arguments.createMap().apply {
+    putInt("position", position)
+    putString("key", key)
+  }
+
+  companion object {
+    const val TAB_EVENT_NAME = "topNativeTabPress"
+    const val SUB_HEADER_EVENT_NAME = "topNativeSubHeaderPress"
+  }
+}

package/lib/module/CollapsiblePagerView.js

@@ -73,7 +73,7 @@ export class CollapsiblePagerView extends React.PureComponent {
     return React.Children.toArray(this.props.children);
   }
   nativeTabBarEnabled() {
-    return Platform.OS === "ios" && !!this.props.nativeTabBar?.items.length;
+    return (Platform.OS === "ios" || Platform.OS === "android") && !!this.props.nativeTabBar?.items.length;
   }
   dispatchNativeTabPageCommand(position, animated) {
     const commandId = ++this.nativeTabCommandId;
@@ -169,9 +169,9 @@ export class CollapsiblePagerView extends React.PureComponent {
     const pageKeys = pages.map(pageKey);
     const retained = new Set(this.mountedPages(pages.length));
     const deducedLayoutDirection = !layoutDirection || layoutDirection === "locale" ? I18nManager.isRTL ? "rtl" : "ltr" : layoutDirection;
-    const nativeTabBarEnabled = Platform.OS === "ios" && !!nativeTabBar?.items.length;
+    const nativeTabBarEnabled = (Platform.OS === "ios" || Platform.OS === "android") && !!nativeTabBar?.items.length;
     const nativeTabBarStyle = nativeTabBar?.style;
-    const nativeSubHeaderEnabled = Platform.OS === "ios" && !!nativeSubHeader?.items.length;
+    const nativeSubHeaderEnabled = (Platform.OS === "ios" || Platform.OS === "android") && !!nativeSubHeader?.items.length;
     const nativeSubHeaderStyle = nativeSubHeader?.style;
     const nativeSubHeaderConfig = nativeSubHeaderEnabled ? JSON.stringify({
       ...nativeSubHeader,

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

@@ -65,8 +65,8 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
     /** Measured sticky bar height. */
     stickyHeaderHeight: number;
     /**
-     * Lets the active iOS list own vertical gestures that begin on pager headers.
-     * Defaults to false and currently has no effect on Android or Web.
+     * Lets the active native list own vertical gestures that begin on pager headers.
+     * Defaults to false and has no effect on Web.
      */
     nativeSmoothHeaderScrollEnabled?: boolean;
     /**
@@ -76,10 +76,10 @@ export interface CollapsiblePagerViewProps extends Omit<NativeProps, "children"
      */
     pageRetentionDistance?: number;
     layoutDirection?: "ltr" | "rtl" | "locale";
-    /** Optional native tab bar. It is currently rendered on iOS only. */
+    /** Optional native tab bar for iOS and Android. */
     nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
     onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
-    /** Optional native secondary sticky header. It is currently rendered on iOS only. */
+    /** Optional native secondary sticky header for iOS and Android. */
     nativeSubHeader?: CollapsiblePagerNativeSubHeaderConfig;
     onNativeSubHeaderPress?: (event: CollapsiblePagerViewOnNativeSubHeaderPressEvent) => void;
     children?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-pager-view",
-  "version": "3.0.119",
+  "version": "3.0.120",
   "description": "React Native wrapper for Android and iOS ViewPager",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -39,7 +39,7 @@
     "prepare": "rm -rf lib && bob build",
     "typecheck": "tsc -b",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "test": "jest",
+    "test": "node --test src/__tests__/*.cjs",
     "release": "yarn prepare && npm whoami && npm publish --access public"
   },
   "keywords": [
@@ -67,6 +67,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
+    "@onekeyfe/react-native-native-logger": "3.0.120",
     "react": "*",
     "react-native": "*"
   },

package/src/CollapsiblePagerView.tsx

@@ -115,8 +115,8 @@ export interface CollapsiblePagerViewProps
   /** Measured sticky bar height. */
   stickyHeaderHeight: number;
   /**
-   * Lets the active iOS list own vertical gestures that begin on pager headers.
-   * Defaults to false and currently has no effect on Android or Web.
+   * Lets the active native list own vertical gestures that begin on pager headers.
+   * Defaults to false and has no effect on Web.
    */
   nativeSmoothHeaderScrollEnabled?: boolean;
   /**
@@ -126,10 +126,10 @@ export interface CollapsiblePagerViewProps
    */
   pageRetentionDistance?: number;
   layoutDirection?: "ltr" | "rtl" | "locale";
-  /** Optional native tab bar. It is currently rendered on iOS only. */
+  /** Optional native tab bar for iOS and Android. */
   nativeTabBar?: CollapsiblePagerNativeTabBarConfig;
   onNativeTabPress?: (event: CollapsiblePagerViewOnNativeTabPressEvent) => void;
-  /** Optional native secondary sticky header. It is currently rendered on iOS only. */
+  /** Optional native secondary sticky header for iOS and Android. */
   nativeSubHeader?: CollapsiblePagerNativeSubHeaderConfig;
   onNativeSubHeaderPress?: (
     event: CollapsiblePagerViewOnNativeSubHeaderPressEvent
@@ -248,7 +248,10 @@ export class CollapsiblePagerView extends React.PureComponent<
   }
 
   private nativeTabBarEnabled() {
-    return Platform.OS === "ios" && !!this.props.nativeTabBar?.items.length;
+    return (
+      (Platform.OS === "ios" || Platform.OS === "android") &&
+      !!this.props.nativeTabBar?.items.length
+    );
   }
 
   private dispatchNativeTabPageCommand(position: number, animated: boolean) {
@@ -393,10 +396,12 @@ export class CollapsiblePagerView extends React.PureComponent<
           : "ltr"
         : layoutDirection;
     const nativeTabBarEnabled =
-      Platform.OS === "ios" && !!nativeTabBar?.items.length;
+      (Platform.OS === "ios" || Platform.OS === "android") &&
+      !!nativeTabBar?.items.length;
     const nativeTabBarStyle = nativeTabBar?.style;
     const nativeSubHeaderEnabled =
-      Platform.OS === "ios" && !!nativeSubHeader?.items.length;
+      (Platform.OS === "ios" || Platform.OS === "android") &&
+      !!nativeSubHeader?.items.length;
     const nativeSubHeaderStyle = nativeSubHeader?.style;
     const nativeSubHeaderConfig = nativeSubHeaderEnabled
       ? JSON.stringify({