@onekeyfe/react-native-pager-view 6.7.0-alpha.435 → 6.7.0-alpha.445

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

@@ -2,8 +2,12 @@ package com.reactnativepagerview
 
 import android.content.Context
 import android.graphics.Color
+import android.graphics.Bitmap
 import android.graphics.Typeface
 import android.graphics.drawable.GradientDrawable
+import android.graphics.drawable.StateListDrawable
+import android.widget.ImageView
+import com.margelo.nitro.onekeyimage.OneKeyNamedSVG
 import android.text.TextUtils
 import android.util.TypedValue
 import android.view.Gravity
@@ -81,6 +85,7 @@ private class CollapsiblePagerHorizontalItemsView(
   private var contentPaddingPx = dp(20.0)
   private var contentPaddingVerticalPx = 0
   private var segmented = false
+  private var textVariant = false
   private var itemSpacingPx = dp(8.0)
   private var fontSize = if (showsProgressIndicator) 16.0 else 14.0
   private var fontFamily: String? = null
@@ -91,6 +96,12 @@ private class CollapsiblePagerHorizontalItemsView(
   private var indicatorHeightPx = dp(2.0)
   private var indicatorBottomPx = 0
   private var progress = 0f
+  private var mappedSource: Int? = null
+  private var mappedDestination: Int? = null
+  private var mappedFraction = 0f
+  private var activeFontFamily: String? = null
+  private var controlledSelectedKey: String? = null
+  private var validControlledPageMapping = false
   private var centerSelectionWhenIdle = true
   private var isTouchDragging = false
 
@@ -165,6 +176,7 @@ private class CollapsiblePagerHorizontalItemsView(
     contentPaddingVerticalPx = max(0, dp(contentPaddingVertical))
     val wasSegmented = segmented
     segmented = showsProgressIndicator && variant == "segmented"
+    textVariant = showsProgressIndicator && variant == "text"
     itemSpacingPx = max(0, dp(itemSpacing))
     this.fontSize = max(1.0, fontSize)
     this.fontFamily = fontFamily
@@ -197,7 +209,20 @@ private class CollapsiblePagerHorizontalItemsView(
     updatePresentation()
   }
 
-  fun setProgress(value: Float) {
+  fun setControlledSelectedKey(value: String?, validPageMapping: Boolean) {
+    controlledSelectedKey = value
+    validControlledPageMapping = validPageMapping
+    updatePresentation()
+  }
+
+  fun usesTextVariant(): Boolean = textVariant
+
+  fun setActiveFontFamily(value: String?) { activeFontFamily = value; requestLayout() }
+
+  fun setProgress(value: Float, source: Int? = null, destination: Int? = null, fraction: Float = 0f) {
+    mappedSource = source
+    mappedDestination = destination
+    mappedFraction = fraction
     if (!showsProgressIndicator || items.isEmpty()) return
     val next = value.coerceIn(0f, (items.size - 1).toFloat())
     if (kotlin.math.abs(progress - next) >= 0.001f) centerSelectionWhenIdle = true
@@ -205,10 +230,25 @@ private class CollapsiblePagerHorizontalItemsView(
     updatePresentation()
   }
 
+  private fun selectedTypeface(): Typeface = activeFontFamily?.takeIf(String::isNotEmpty)?.let { resolveHeaderTypeface(context, it) }
+    ?: if (android.os.Build.VERSION.SDK_INT >= 28) Typeface.create(Typeface.create("sans-serif", Typeface.NORMAL), 600, false)
+      else Typeface.create("sans-serif", Typeface.BOLD)
+
+  private fun visualFontOwnerIndex(semanticIndex: Int): Int {
+    val source = mappedSource
+    val destination = mappedDestination
+    if (textVariant && controlledSelectedKey != null && validControlledPageMapping && source != null && destination != null) {
+      return if (mappedFraction < 0.5f) source else destination
+    }
+    return semanticIndex
+  }
+
   private fun applyTypeface() {
     val typeface = resolveHeaderTypeface(context, fontFamily)
-    buttons.forEach { button ->
-      button.typeface = typeface
+    val fontOwner = visualFontOwnerIndex(buttons.indexOfFirst { it.isSelected })
+    buttons.forEachIndexed { index, button ->
+      button.typeface = if (textVariant && index == fontOwner) selectedTypeface() else typeface
+      button.setPadding(dp(if (textVariant) 10.0 else 8.0), 0, dp(if (textVariant) 10.0 else 8.0), 0)
       button.setTextSize(TypedValue.COMPLEX_UNIT_SP, fontSize.toFloat())
     }
   }
@@ -271,7 +311,15 @@ private class CollapsiblePagerHorizontalItemsView(
     track.layoutParams = FrameLayout.LayoutParams(0, 0)
     var x = contentPaddingPx
     buttons.forEachIndexed { index, button ->
-      val textWidth = ceil(button.paint.measureText(button.text.toString()).toDouble()).toInt()
+      var textWidth = ceil(button.paint.measureText(button.text.toString()).toDouble()).toInt()
+      if (textVariant) {
+        val original = button.paint.typeface
+        button.paint.typeface = resolveHeaderTypeface(context, fontFamily)
+        textWidth = ceil(button.paint.measureText(button.text.toString()).toDouble()).toInt()
+        button.paint.typeface = selectedTypeface()
+        textWidth = max(textWidth, ceil(button.paint.measureText(button.text.toString()).toDouble()).toInt())
+        button.paint.typeface = original
+      }
       // Reuse the rounded padding: dp(16) can be one pixel less than two dp(8) insets.
       val horizontalPadding = if (showsProgressIndicator) {
         button.compoundPaddingLeft + button.compoundPaddingRight
@@ -343,14 +391,18 @@ private class CollapsiblePagerHorizontalItemsView(
         indicatorX + indicatorWidth,
         indicatorTop + indicatorHeight,
       )
-      indicator.visibility = if (indicatorHeight > 0) VISIBLE else GONE
+      indicator.visibility = if (!textVariant && indicatorHeight > 0) VISIBLE else GONE
       scrollTargetCenterX = interpolatedIndicatorX + interpolatedIndicatorWidth / 2f
-      selectedIndex = clamped.roundToInt()
+      selectedIndex = if (controlledSelectedKey != null) items.indexOfFirst { it.key == controlledSelectedKey } else clamped.roundToInt()
+      val fontOwner = visualFontOwnerIndex(selectedIndex)
       buttons.forEachIndexed { index, button ->
-        val emphasis = 1f - min(1f, kotlin.math.abs(clamped - index))
+        val emphasis = if (mappedSource != null && mappedDestination != null) {
+          (if (index == mappedSource) 1f - mappedFraction else 0f) + (if (index == mappedDestination) mappedFraction else 0f)
+        } else 1f - min(1f, kotlin.math.abs(clamped - index))
         button.setTextColor(ColorUtils.blendARGB(inactiveTextColor, activeTextColor, emphasis))
         button.background = null
         button.isSelected = index == selectedIndex
+        if (textVariant) button.typeface = if (index == fontOwner) selectedTypeface() else resolveHeaderTypeface(context, fontFamily)
       }
     } else {
       selectedIndex = items.indexOfFirst { item -> item.key == selectedKey }
@@ -377,6 +429,273 @@ private class CollapsiblePagerHorizontalItemsView(
 internal class CollapsiblePagerNativeTabBarView(context: Context) : FrameLayout(context) {
   private val row = CollapsiblePagerHorizontalItemsView(context, true)
   private var heightPx = 0
+  private val toolbar = ImageView(context)
+  private var config = JSONObject()
+  private var items = emptyList<CollapsiblePagerNativeHeaderItem>()
+  private var selectedKey = ""
+  private var iconOwner: Any = Any()
+  private var iconIdentity = ""
+  private var loadedIconIdentity = ""
+  private var iconRequestPending = false
+  private var readyToolbarImage: Bitmap? = null
+  private var readyToolbarIdentity = ""
+  private var failedIconIdentity = ""
+  private var toolbarTouchKey: String? = null
+  private var toolbarTouchStarted = false
+  private var toolbarKeyboardKey: String? = null
+  private var lastNativeProgress = 0f
+  private var hasNativeProgress = false
+  private var toolbarReservedWidth = 0.0
+  private var toolbarPagerBusy = true
+  private var toolbarPageIndex = -1
+  private var committedToolbarKey: String? = null
+  private var committedToolbarEntry: JSONObject? = null
+  private var desiredToolbarKey: String? = null
+  private var desiredToolbarEntry: JSONObject? = null
+  private var loadedToolbarImage: Bitmap? = null
+  private var toolbarPresenceAnimating = false
+  private var toolbarPresenceInterrupted = false
+  private var toolbarVisible = false
+  private var toolbarAnimationGeneration = 0
+  private var toolbarSize = 38.0
+  private var toolbarIconSize = 24.0
+  private var toolbarContentWidth = 24.0
+  private var toolbarTrailingInset = 20.0
+  var onToolbarPress: ((String, DoubleArray) -> Unit)? = null
+
+  private fun dp(value: Number) = (value.toDouble() * resources.displayMetrics.density).roundToInt()
+
+  fun updateConfigJSON(value: String?) {
+    config = runCatching { JSONObject(value ?: "{}") }.getOrDefault(JSONObject())
+    row.setActiveFontFamily(config.optString("activeFontFamily").takeIf(String::isNotEmpty))
+    selectedKey = if (config.optBoolean("controlled")) config.optString("selectedKey") else items.getOrNull(lastNativeProgress.roundToInt())?.key ?: ""
+    row.setControlledSelectedKey(if (config.optBoolean("controlled")) selectedKey else null, controlledPageIndices() != null)
+    if (hasNativeProgress) setProgress(lastNativeProgress)
+    else {
+      val index = items.indexOfFirst { it.key == selectedKey }
+      if (index >= 0) row.setProgress(index.toFloat())
+    }
+    updateToolbar()
+  }
+
+  private fun ownsSettledToolbar(): Boolean = config.optBoolean("controlled") && config.optJSONObject("toolbar") != null
+
+  internal fun usesSettledToolbarOwner(): Boolean = ownsSettledToolbar()
+
+  internal fun needsToolbarPagerSettlement(pageIndex: Int): Boolean =
+    ownsSettledToolbar() && (toolbarPagerBusy || toolbarPageIndex != pageIndex)
+
+  private fun toolbarCanCommit(): Boolean {
+    if (!isAttachedToWindow) return false
+    if (!ownsSettledToolbar()) return true
+    if (toolbarPagerBusy || toolbarPageIndex < 0) return false
+    return controlledPageIndices() == null || config.optJSONArray("pageKeys")?.optString(toolbarPageIndex) == selectedKey
+  }
+
+  fun updateToolbarPagerState(pageIndex: Int, busy: Boolean) {
+    if (toolbarPagerBusy == busy && (busy || toolbarPageIndex == pageIndex)) return
+    if (!busy) toolbarPageIndex = pageIndex
+    toolbarPagerBusy = busy
+    updateToolbar()
+  }
+
+  private fun cancelToolbarPending() {
+    if (iconRequestPending || readyToolbarImage != null) {
+      OneKeyNamedSVG.cancel(iconOwner)
+      iconOwner = Any()
+    }
+    iconRequestPending = false
+    readyToolbarImage = null
+    readyToolbarIdentity = ""
+  }
+
+  private fun setToolbarInteractive(enabled: Boolean) {
+    if (!enabled) {
+      toolbarKeyboardKey = null
+      if (toolbarTouchStarted) toolbarTouchKey = null
+      toolbar.isPressed = false
+      toolbar.isHovered = false
+      toolbar.clearFocus()
+    }
+    toolbar.isEnabled = enabled
+    toolbar.isClickable = enabled
+    toolbar.isFocusable = enabled
+    toolbar.importantForAccessibility = if (enabled) View.IMPORTANT_FOR_ACCESSIBILITY_AUTO else View.IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS
+  }
+
+  private fun suspendToolbar() {
+    setToolbarInteractive(false)
+    cancelToolbarPending()
+    desiredToolbarKey = null
+    desiredToolbarEntry = null
+    if (toolbarPresenceAnimating) {
+      toolbarAnimationGeneration++
+      toolbar.animate().cancel()
+      toolbarPresenceAnimating = false
+      toolbarPresenceInterrupted = true
+    }
+  }
+
+  private fun setToolbarVisible(visible: Boolean) {
+    if (toolbarVisible == visible && !toolbarPresenceInterrupted) return
+    toolbarVisible = visible
+    toolbarPresenceInterrupted = false
+    val generation = ++toolbarAnimationGeneration
+    toolbar.animate().cancel()
+    if (visible) toolbar.visibility = VISIBLE
+    if (!isAttachedToWindow) {
+      toolbar.alpha = if (visible) 1f else 0f
+      toolbar.visibility = if (visible) VISIBLE else INVISIBLE
+      toolbarPresenceAnimating = false
+      return
+    }
+    toolbarPresenceAnimating = true
+    toolbar.animate().alpha(if (visible) 1f else 0f).setDuration(100).withEndAction {
+      if (toolbarAnimationGeneration == generation) {
+        toolbarPresenceAnimating = false
+        if (!visible) toolbar.visibility = INVISIBLE
+      }
+    }.start()
+  }
+
+  private fun hideToolbar(failed: Boolean) {
+    setToolbarInteractive(false)
+    committedToolbarKey = null
+    committedToolbarEntry = null
+    toolbar.contentDescription = null
+    toolbar.setTag(com.facebook.react.R.id.react_test_id, null)
+    if (failed) toolbar.setImageDrawable(null)
+    setToolbarVisible(false)
+  }
+
+  private fun commitToolbar(key: String, descriptor: JSONObject, image: Bitmap, identity: String) {
+    if (!toolbarCanCommit() || key != selectedKey) return
+    if (committedToolbarKey != key && toolbarTouchStarted) toolbarTouchKey = null
+    toolbarSize = descriptor.optDouble("size", 38.0).coerceIn(1.0, 128.0)
+    toolbarIconSize = descriptor.optDouble("iconSize", min(24.0, toolbarSize)).coerceIn(1.0, toolbarSize)
+    toolbarContentWidth = descriptor.optDouble("contentWidth", min(24.0, toolbarSize)).coerceIn(0.0, toolbarSize)
+    toolbarTrailingInset = descriptor.optDouble("trailingInset", 20.0).coerceIn(0.0, 128.0)
+    val inset = max(0, (dp(toolbarSize) - dp(toolbarIconSize)) / 2)
+    toolbar.setPadding(inset, inset, inset, inset)
+    fun color(name: String, fallback: Int) = (descriptor.opt(name) as? Number)?.toInt() ?: fallback
+    val base = if (descriptor.optBoolean("selected")) color("selectedBackgroundColor", Color.TRANSPARENT) else Color.TRANSPARENT
+    fun fill(value: Int) = GradientDrawable().apply { shape = GradientDrawable.OVAL; setColor(value) }
+    toolbar.background = StateListDrawable().apply {
+      addState(intArrayOf(android.R.attr.state_enabled, android.R.attr.state_pressed), fill(color("pressedBackgroundColor", base)))
+      addState(intArrayOf(android.R.attr.state_enabled, android.R.attr.state_hovered), fill(color("hoverBackgroundColor", base)))
+      addState(intArrayOf(), fill(base))
+    }
+    toolbar.setImageBitmap(image)
+    toolbar.contentDescription = descriptor.optString("accessibilityLabel")
+    toolbar.setTag(com.facebook.react.R.id.react_test_id, descriptor.optString("testID"))
+    committedToolbarKey = key
+    committedToolbarEntry = descriptor
+    loadedToolbarImage = image
+    loadedIconIdentity = identity
+    iconIdentity = identity
+    iconRequestPending = false
+    readyToolbarImage = null
+    readyToolbarIdentity = ""
+    setToolbarVisible(true)
+    setToolbarInteractive(true)
+    requestLayout()
+  }
+
+  private fun applyReadyToolbarImage() {
+    val image = readyToolbarImage ?: return
+    val key = desiredToolbarKey ?: return
+    val entry = desiredToolbarEntry ?: return
+    if (readyToolbarIdentity != iconIdentity || !toolbarCanCommit() || key != selectedKey) return
+    commitToolbar(key, entry, image, iconIdentity)
+  }
+
+  private fun updateToolbar() {
+    val entries = config.optJSONObject("toolbar")
+    toolbarReservedWidth = if (entries == null) 0.0 else 44.0
+    if (entries != null && entries.length() > 0) {
+      toolbarReservedWidth = 0.0
+      entries.keys().forEach { key ->
+        val entry = entries.optJSONObject(key) ?: JSONObject()
+        val size = entry.optDouble("size", 38.0).coerceIn(1.0, 128.0)
+        toolbarReservedWidth = max(toolbarReservedWidth, entry.optDouble("contentWidth", min(24.0, size)).coerceIn(0.0, size) + entry.optDouble("trailingInset", 20.0).coerceIn(0.0, 128.0))
+      }
+    }
+    if (!toolbarCanCommit()) { suspendToolbar(); requestLayout(); return }
+    val entry = entries?.optJSONObject(selectedKey)
+    if (entry == null || entry.optString("iconName").isEmpty()) {
+      cancelToolbarPending()
+      desiredToolbarKey = null
+      desiredToolbarEntry = null
+      hideToolbar(false)
+      requestLayout()
+      return
+    }
+    val descriptor = JSONObject(entry.toString())
+    desiredToolbarKey = selectedKey
+    desiredToolbarEntry = descriptor
+    val size = descriptor.optDouble("size", 38.0).coerceIn(1.0, 128.0)
+    val iconSize = descriptor.optDouble("iconSize", min(24.0, size)).coerceIn(1.0, size)
+    val name = descriptor.optString("iconName")
+    val tint = descriptor.optString("iconColor", "#000000")
+    val identity = "$name|$tint|${resources.displayMetrics.density}|$iconSize"
+    val loaded = loadedToolbarImage
+    if (identity == loadedIconIdentity && loaded != null) {
+      cancelToolbarPending()
+      commitToolbar(selectedKey, descriptor, loaded, identity)
+      return
+    }
+    if (identity == iconIdentity && iconRequestPending) { applyReadyToolbarImage(); return }
+    cancelToolbarPending()
+    setToolbarInteractive(false)
+    iconIdentity = identity
+    if (identity == failedIconIdentity) { hideToolbar(true); return }
+    iconOwner = Any()
+    val owner = iconOwner
+    iconRequestPending = true
+    OneKeyNamedSVG.request(owner, context.applicationContext.assets, name, tint,
+      dp(iconSize), dp(iconSize), resources.displayMetrics.density) { bitmap ->
+      if (iconOwner === owner && iconIdentity == identity && isAttachedToWindow) {
+        if (bitmap == null) {
+          iconRequestPending = false
+          failedIconIdentity = identity
+          hideToolbar(true)
+        } else {
+          readyToolbarImage = bitmap
+          readyToolbarIdentity = identity
+          applyReadyToolbarImage()
+        }
+      }
+    }
+    requestLayout()
+  }
+
+  private fun performToolbarPress(fromPointer: Boolean): Boolean {
+    val key = if (fromPointer) toolbarTouchKey.takeIf { toolbarTouchStarted } else committedToolbarKey
+    if (fromPointer) { toolbarTouchStarted = false; toolbarTouchKey = null }
+    if (key == null || key != committedToolbarKey || key != selectedKey || committedToolbarEntry == null ||
+      !toolbarCanCommit() || !toolbar.isEnabled || toolbar.visibility != VISIBLE) return false
+    val location = IntArray(2)
+    toolbar.getLocationInWindow(location)
+    val density = resources.displayMetrics.density.toDouble()
+    onToolbarPress?.invoke(key, doubleArrayOf(location[0] / density, location[1] / density, toolbar.width / density, toolbar.height / density))
+    return true
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    toolbarPagerBusy = true
+    updateToolbar()
+  }
+
+  override fun onDetachedFromWindow() {
+    suspendToolbar()
+    toolbarPagerBusy = true
+    toolbarPageIndex = -1
+    toolbarTouchStarted = false
+    toolbarTouchKey = null
+    failedIconIdentity = ""
+    super.onDetachedFromWindow()
+  }
 
   var onItemPress: ((Int, String) -> Unit)?
     get() = row.onItemPress
@@ -386,12 +705,52 @@ internal class CollapsiblePagerNativeTabBarView(context: Context) : FrameLayout(
 
   init {
     addView(row, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    addView(toolbar)
+    toolbar.scaleType = ImageView.ScaleType.CENTER_INSIDE
+    toolbar.setPadding(dp(6), dp(6), dp(6), dp(6))
+    toolbar.isClickable = true
+    toolbar.isFocusable = true
+    toolbar.visibility = INVISIBLE
+    toolbar.alpha = 0f
+    toolbar.isEnabled = false
+    toolbar.isClickable = false
+    toolbar.isFocusable = false
+    toolbar.importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NO_HIDE_DESCENDANTS
+    toolbar.setOnTouchListener { _, event ->
+      when (event.actionMasked) {
+        MotionEvent.ACTION_DOWN -> { toolbarTouchStarted = true; toolbarTouchKey = committedToolbarKey.takeIf { toolbar.isEnabled && toolbarCanCommit() } }
+        MotionEvent.ACTION_CANCEL -> { toolbarTouchKey = null }
+      }
+      false
+    }
+    toolbar.setOnClickListener { performToolbarPress(true) }
+    toolbar.accessibilityDelegate = object : View.AccessibilityDelegate() {
+      override fun performAccessibilityAction(host: View, action: Int, args: android.os.Bundle?): Boolean {
+        if (action == android.view.accessibility.AccessibilityNodeInfo.ACTION_CLICK) return performToolbarPress(false)
+        return super.performAccessibilityAction(host, action, args)
+      }
+    }
+    toolbar.setOnKeyListener { _, keyCode, event ->
+      if (keyCode != android.view.KeyEvent.KEYCODE_ENTER && keyCode != android.view.KeyEvent.KEYCODE_DPAD_CENTER && keyCode != android.view.KeyEvent.KEYCODE_SPACE) false
+      else if (event.action == android.view.KeyEvent.ACTION_DOWN) {
+        if (event.repeatCount == 0) toolbarKeyboardKey = committedToolbarKey.takeIf { toolbar.isEnabled && toolbarCanCommit() }
+        toolbar.isPressed = toolbarKeyboardKey != null
+        toolbarKeyboardKey != null
+      } else if (event.action == android.view.KeyEvent.ACTION_UP) {
+        val valid = toolbarKeyboardKey != null && toolbarKeyboardKey == committedToolbarKey
+        toolbarKeyboardKey = null
+        toolbar.isPressed = false
+        valid && performToolbarPress(false)
+      } else false
+    }
     visibility = GONE
   }
 
   fun updateItemsJSON(value: String?) {
+    items = parseHeaderItems(value)
     row.updateItemsJSON(value)
     visibility = row.visibility
+    updateConfigJSON(config.toString())
   }
 
   fun updateStyle(
@@ -425,15 +784,83 @@ internal class CollapsiblePagerNativeTabBarView(context: Context) : FrameLayout(
     activeTextColor: Int,
     inactiveTextColor: Int,
     indicatorColor: Int,
-  ) = row.updateColors(
-    backgroundColor,
-    activeTextColor,
-    inactiveTextColor,
-    Color.TRANSPARENT,
-    indicatorColor,
-  )
+  ) {
+    val text = row.usesTextVariant()
+    setBackgroundColor(if (text) backgroundColor else Color.TRANSPARENT)
+    row.updateColors(
+      if (text) Color.TRANSPARENT else backgroundColor,
+      activeTextColor,
+      inactiveTextColor,
+      Color.TRANSPARENT,
+      indicatorColor,
+    )
+  }
+
+  private fun controlledPageIndices(): List<Int>? {
+    val pageKeys = config.optJSONArray("pageKeys") ?: return null
+    val names = List(pageKeys.length()) { pageKeys.optString(it) }
+    val indices = names.map { name -> items.indexOfFirst { it.key == name } }
+    if (names.isEmpty() || selectedKey !in names || names.toSet().size != names.size ||
+      indices.any { it < 0 } || items.map { it.key }.toSet().size != items.size) return null
+    return indices
+  }
+
+  fun usesControlledTextProgress(): Boolean {
+    return row.usesTextVariant() && config.optBoolean("controlled") && controlledPageIndices() != null
+  }
 
-  fun setProgress(progress: Float) = row.setProgress(progress)
+  fun setProgress(progress: Float) {
+    lastNativeProgress = progress
+    hasNativeProgress = true
+    var mapped = progress
+    var source: Int? = null
+    var destination: Int? = null
+    var fraction = 0f
+    if (config.optBoolean("controlled")) {
+      val pageKeys = config.optJSONArray("pageKeys") ?: return
+      val indices = controlledPageIndices()
+      if (indices == null) {
+        val fallback = items.indexOfFirst { it.key == config.optString("selectedKey") }
+        if (fallback >= 0) { row.setProgress(fallback.toFloat()); selectedKey = items[fallback].key; updateToolbar() }
+        return
+      }
+      val bounded = progress.coerceIn(0f, (pageKeys.length() - 1).toFloat())
+      val lower = floor(bounded).toInt().coerceAtLeast(0)
+      val upper = min(lower + 1, pageKeys.length() - 1)
+      val from = indices[lower]
+      val to = indices[upper]
+      if (from < 0 || to < 0) return
+      fraction = bounded - lower
+      source = from
+      destination = to
+      mapped = from + (to - from) * fraction
+    }
+    row.setProgress(mapped, source, destination, fraction)
+    if (config.optBoolean("controlled")) return
+    val selectedIndex = mapped.roundToInt()
+    val nextKey = items.getOrNull(selectedIndex)?.key ?: return
+    if (nextKey != selectedKey) { toolbarTouchKey = null; toolbar.isPressed = false; selectedKey = nextKey; updateToolbar() }
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    val width = MeasureSpec.getSize(widthMeasureSpec)
+    val height = MeasureSpec.getSize(heightMeasureSpec)
+    val reserved = dp(toolbarReservedWidth)
+    row.measure(MeasureSpec.makeMeasureSpec(max(0, width - reserved), MeasureSpec.EXACTLY), heightMeasureSpec)
+    toolbar.measure(MeasureSpec.makeMeasureSpec(dp(toolbarSize), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(dp(toolbarSize), 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 reserved = dp(toolbarReservedWidth)
+    val rtl = layoutDirection == View.LAYOUT_DIRECTION_RTL
+    row.layout(if (rtl) reserved else 0, 0, if (rtl) width else width - reserved, height)
+    val inset = dp(toolbarTrailingInset) - (dp(toolbarSize) - dp(toolbarContentWidth)) / 2
+    val x = if (rtl) inset else width - inset - dp(toolbarSize)
+    toolbar.layout(x, (height - dp(toolbarSize)) / 2, x + dp(toolbarSize), (height + dp(toolbarSize)) / 2)
+  }
 
   fun preferredHeightPx(): Int = heightPx
 }

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

@@ -70,6 +70,10 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
         }
       }
     })
+    host.onNativeToolbarPress = { key, rect ->
+      dispatch(reactContext, host, NativeHeaderPressEvent(host.id, 0, key,
+        NativeHeaderPressEvent.TOOLBAR_EVENT_NAME, rect))
+    }
     host.onNativeTabPress = { position, key ->
       dispatch(
         reactContext,
@@ -227,6 +231,11 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
     view?.retainedPages = value ?: "[]"
   }
 
+  @ReactProp(name = "nativeTabBarConfig")
+  override fun setNativeTabBarConfig(view: CollapsiblePagerHost?, value: String?) {
+    view?.updateNativeTabBarConfig(value)
+  }
+
   @ReactProp(name = "nativeTabBarItems")
   override fun setNativeTabBarItems(view: CollapsiblePagerHost?, value: String?) {
     view?.updateNativeTabBarItems(value)
@@ -242,7 +251,7 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
   @ReactProp(name = "nativeTabBarVariant")
   override fun setNativeTabBarVariant(view: CollapsiblePagerHost?, value: String?) {
     view ?: return
-    view.nativeTabBarVariant = if (value == "segmented") "segmented" else "underline"
+    view.nativeTabBarVariant = if (value == "segmented" || value == "text") value else "underline"
     view.applyNativeHeaderStyle()
   }
 
@@ -404,6 +413,7 @@ class CollapsiblePagerViewManager : ViewGroupManager<CollapsiblePagerHost>(),
         CollapsibleStateChangedEvent.EVENT_NAME,
         MapBuilder.of("registrationName", "onCollapsibleStateChanged"),
       )
+      .put(NativeHeaderPressEvent.TOOLBAR_EVENT_NAME, MapBuilder.of("registrationName", "onNativeToolbarPress"))
       .put(
         NativeHeaderPressEvent.TAB_EVENT_NAME,
         MapBuilder.of("registrationName", "onNativeTabPress"),

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

@@ -10,6 +10,7 @@ class NativeHeaderPressEvent(
   private val position: Int,
   private val key: String,
   private val name: String,
+  private val anchorRect: DoubleArray? = null,
 ) : Event<NativeHeaderPressEvent>(viewTag) {
   override fun getEventName() = name
 
@@ -22,9 +23,16 @@ class NativeHeaderPressEvent(
   private fun serializeEventData(): WritableMap = Arguments.createMap().apply {
     putInt("position", position)
     putString("key", key)
+    anchorRect?.let { rect ->
+      putMap("anchorRect", Arguments.createMap().apply {
+        putDouble("x", rect[0]); putDouble("y", rect[1])
+        putDouble("width", rect[2]); putDouble("height", rect[3])
+      })
+    }
   }
 
   companion object {
+    const val TOOLBAR_EVENT_NAME = "topNativeToolbarPress"
     const val TAB_EVENT_NAME = "topNativeTabPress"
     const val SUB_HEADER_EVENT_NAME = "topNativeSubHeaderPress"
   }