@onekeyfe/react-native-native-list 3.0.108 → 3.0.109

package/android/src/main/java/com/onekey/nativelist/NativeListModels.kt

@@ -79,6 +79,7 @@ internal data class NativeListConfig(
   val endReachedThreshold: Double,
   val sectionIndexEnabled: Boolean,
   val sectionIndexHapticsEnabled: Boolean,
+  val sectionIndexCenteredInWindow: Boolean,
   val theme: JSONObject?,
   val fixedFooter: NativeListItem?,
   val items: List<NativeListItem>,
@@ -127,6 +128,7 @@ internal data class NativeListConfig(
         endReachedThreshold = capabilities?.optDouble("endReachedThreshold", 0.2) ?: 0.2,
         sectionIndexEnabled = sectionIndex?.optBoolean("enabled", false) ?: false,
         sectionIndexHapticsEnabled = sectionIndex?.optBoolean("hapticsEnabled", true) ?: true,
+        sectionIndexCenteredInWindow = sectionIndex?.optBoolean("centeredInWindow", false) ?: false,
         theme = root.optJSONObject("theme"),
         fixedFooter = fixedFooter,
         items = items,

package/android/src/main/java/com/onekey/nativelist/NativeListView.kt

@@ -21,6 +21,8 @@ import android.widget.FrameLayout
 import android.widget.LinearLayout
 import android.widget.SeekBar
 import android.widget.TextView
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import androidx.recyclerview.widget.GridLayoutManager
 import androidx.recyclerview.widget.ItemTouchHelper
 import androidx.recyclerview.widget.LinearLayoutManager
@@ -371,6 +373,7 @@ class NativeListView(
       previous.endReachedThreshold != next.endReachedThreshold ||
       previous.sectionIndexEnabled != next.sectionIndexEnabled ||
       previous.sectionIndexHapticsEnabled != next.sectionIndexHapticsEnabled ||
+      previous.sectionIndexCenteredInWindow != next.sectionIndexCenteredInWindow ||
       previous.theme?.toString() != next.theme?.toString() ||
       previous.fixedFooter?.content != next.fixedFooter?.content ||
       previous.items.size != next.items.size
@@ -907,6 +910,7 @@ class NativeListView(
       themeColor(next.theme, "secondaryText", "#646464"),
       themeColor(next.theme, "accent", "#108303"),
       themeColor(next.theme, "inverseText", "#FCFCFC"),
+      next.sectionIndexCenteredInWindow,
     )
     sectionIndexView.visibility = if (sectionIndexEntries.isEmpty()) GONE else VISIBLE
     sectionIndexPreview.setTextColor(themeColor(next.theme, "inverseText", "#FCFCFC"))
@@ -1704,7 +1708,10 @@ private class NativeListSectionIndexView(
   private var normalColor = Color.GRAY
   private var activeColor = Color.BLACK
   private var activeTextColor = Color.WHITE
+  private var centeredInWindow = false
   private var lastTouchIndex: Int? = null
+  private val rootLocationOnScreen = IntArray(2)
+  private val locationOnScreen = IntArray(2)
   private val activeBackgroundPaint = Paint(Paint.ANTI_ALIAS_FLAG)
   private val normalPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
     textAlign = Paint.Align.CENTER
@@ -1727,11 +1734,13 @@ private class NativeListSectionIndexView(
     normalColor: Int,
     activeColor: Int,
     activeTextColor: Int,
+    centeredInWindow: Boolean,
   ) {
     this.titles = titles
     this.normalColor = normalColor
     this.activeColor = activeColor
     this.activeTextColor = activeTextColor
+    this.centeredInWindow = centeredInWindow
     activeIndex = null
     updateContentDescription()
     invalidate()
@@ -1748,7 +1757,7 @@ private class NativeListSectionIndexView(
     super.onDraw(canvas)
     if (titles.isEmpty()) return
     val cellHeight = cellHeight()
-    val originY = (height - cellHeight * titles.size) / 2f
+    val originY = indexOriginY(cellHeight, titles.size)
     val textSize = NativeListScale.font(resources, 10f) * resources.displayMetrics.scaledDensity
     normalPaint.color = normalColor
     normalPaint.textSize = textSize
@@ -1856,7 +1865,7 @@ private class NativeListSectionIndexView(
 
   private fun selectAt(y: Float, interacting: Boolean) {
     val cellHeight = cellHeight()
-    val originY = (height - cellHeight * titles.size) / 2f
+    val originY = indexOriginY(cellHeight, titles.size)
     val index = ((y - originY) / cellHeight).toInt().coerceIn(0, titles.lastIndex)
     if (interacting && lastTouchIndex == index) return
     lastTouchIndex = index.takeIf { interacting }
@@ -1873,6 +1882,24 @@ private class NativeListSectionIndexView(
       .coerceAtMost(NativeListScale.dp(resources, 16f))
       .coerceAtLeast(1f)
 
+  private fun indexOriginY(cellHeight: Float, count: Int): Float {
+    val totalHeight = cellHeight * count
+    val centeredOriginY = (height - totalHeight) / 2f
+    if (!centeredInWindow || !isAttachedToWindow) return centeredOriginY
+    val systemBarInsets = ViewCompat.getRootWindowInsets(rootView)
+      ?.getInsetsIgnoringVisibility(
+        WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout(),
+      ) ?: return centeredOriginY
+    rootView.getLocationOnScreen(rootLocationOnScreen)
+    getLocationOnScreen(locationOnScreen)
+    val safeTop = rootLocationOnScreen[1] + systemBarInsets.top
+    val safeBottom = rootLocationOnScreen[1] + rootView.height - systemBarInsets.bottom
+    if (safeBottom <= safeTop) return centeredOriginY
+    val localCenterY = (safeTop + safeBottom) / 2f - locationOnScreen[1]
+    return (localCenterY - totalHeight / 2f)
+      .coerceIn(0f, (height - totalHeight).coerceAtLeast(0f))
+  }
+
   private fun updateContentDescription() {
     contentDescription = activeIndex?.let { titles.getOrNull(it) }
       ?.let { "$ACCESSIBILITY_LABEL, $it" }

package/ios/NativeListModels.swift

@@ -62,6 +62,7 @@ struct NativeListConfig {
   let endReachedThreshold: Double
   let sectionIndexEnabled: Bool
   let sectionIndexHapticsEnabled: Bool
+  let sectionIndexCenteredInWindow: Bool
   let theme: [String: Any]?
   let fixedFooter: NativeListItem?
   var items: [NativeListItem]
@@ -123,6 +124,7 @@ struct NativeListConfig {
       endReachedThreshold: capabilities?["endReachedThreshold"] as? Double ?? 0.2,
       sectionIndexEnabled: sectionIndex?["enabled"] as? Bool ?? false,
       sectionIndexHapticsEnabled: sectionIndex?["hapticsEnabled"] as? Bool ?? true,
+      sectionIndexCenteredInWindow: sectionIndex?["centeredInWindow"] as? Bool ?? false,
       theme: root["theme"] as? [String: Any],
       fixedFooter: footer,
       items: items

package/ios/RNCNativeListView.swift

@@ -873,7 +873,8 @@ final class NativeListView: UIView {
       titles: sectionIndexEntries.map(\.title),
       textColor: nativeListColor(config.theme, "secondaryText", "#646464"),
       activeColor: nativeListColor(config.theme, "accent", "#108303"),
-      activeTextColor: nativeListColor(config.theme, "inverseText", "#FCFCFC")
+      activeTextColor: nativeListColor(config.theme, "inverseText", "#FCFCFC"),
+      centeredInWindow: config.sectionIndexCenteredInWindow
     )
     sectionIndexView.isHidden = sectionIndexEntries.isEmpty
     sectionIndexPreview.backgroundColor = nativeListColor(
@@ -1113,6 +1114,7 @@ final class NativeListView: UIView {
           current.endReachedThreshold == next.endReachedThreshold,
           current.sectionIndexEnabled == next.sectionIndexEnabled,
           current.sectionIndexHapticsEnabled == next.sectionIndexHapticsEnabled,
+          current.sectionIndexCenteredInWindow == next.sectionIndexCenteredInWindow,
           dictionariesEqual(current.theme, next.theme),
           current.fixedFooter?.content == next.fixedFooter?.content,
           current.items.count == next.items.count else { return false }
@@ -1756,6 +1758,7 @@ private final class NativeListSectionIndexView: UIControl, UIGestureRecognizerDe
   private var textColor: UIColor = .secondaryLabel
   private var activeColor: UIColor = .tintColor
   private var activeTextColor: UIColor = .white
+  private var centeredInWindow = false
   private var lastTouchIndex: Int?
   private(set) var activeIndex: Int?
 
@@ -1796,12 +1799,14 @@ private final class NativeListSectionIndexView: UIControl, UIGestureRecognizerDe
     titles: [String],
     textColor: UIColor,
     activeColor: UIColor,
-    activeTextColor: UIColor
+    activeTextColor: UIColor,
+    centeredInWindow: Bool
   ) {
     self.titles = titles
     self.textColor = textColor
     self.activeColor = activeColor
     self.activeTextColor = activeTextColor
+    self.centeredInWindow = centeredInWindow
     labels.forEach { $0.removeFromSuperview() }
     labels = titles.map { title in
       let label = UILabel()
@@ -1829,7 +1834,7 @@ private final class NativeListSectionIndexView: UIControl, UIGestureRecognizerDe
     super.layoutSubviews()
     guard !labels.isEmpty else { return }
     let height = min(16, max(8, bounds.height / CGFloat(labels.count)))
-    let originY = (bounds.height - height * CGFloat(labels.count)) / 2
+    let originY = indexOriginY(cellHeight: height, count: labels.count)
     for (index, label) in labels.enumerated() {
       label.frame = CGRect(
         x: 6,
@@ -1875,13 +1880,24 @@ private final class NativeListSectionIndexView: UIControl, UIGestureRecognizerDe
 
   private func select(at y: CGFloat, interacting: Bool) {
     let height = min(16, max(8, bounds.height / CGFloat(titles.count)))
-    let originY = (bounds.height - height * CGFloat(titles.count)) / 2
+    let originY = indexOriginY(cellHeight: height, count: titles.count)
     let index = Int(floor((y - originY) / height)).clamped(to: 0...(titles.count - 1))
     if interacting && lastTouchIndex == index { return }
     lastTouchIndex = interacting ? index : nil
     select(index: index, interacting: interacting)
   }
 
+  private func indexOriginY(cellHeight: CGFloat, count: Int) -> CGFloat {
+    let totalHeight = cellHeight * CGFloat(count)
+    let centeredOriginY = (bounds.height - totalHeight) / 2
+    guard centeredInWindow, let window else { return centeredOriginY }
+    let windowCenterY = window.safeAreaLayoutGuide.layoutFrame.midY
+    let localCenterY = convert(CGPoint(x: 0, y: windowCenterY), from: window).y
+    return (localCenterY - totalHeight / 2).clamped(
+      to: 0...max(0, bounds.height - totalHeight)
+    )
+  }
+
   private func select(index: Int, interacting: Bool) {
     onSelect?(index, interacting)
     setActiveIndex(index)

package/lib/module/validation.js

@@ -392,6 +392,9 @@ export function validateSnapshot(snapshot) {
     if (sectionIndex.hapticsEnabled !== undefined && typeof sectionIndex.hapticsEnabled !== 'boolean') {
       fail('snapshot.capabilities.sectionIndex.hapticsEnabled', 'must be a boolean');
     }
+    if (sectionIndex.centeredInWindow !== undefined && typeof sectionIndex.centeredInWindow !== 'boolean') {
+      fail('snapshot.capabilities.sectionIndex.centeredInWindow', 'must be a boolean');
+    }
     if (sectionIndex.enabled && (snapshot.layout.kind !== 'sectioned' || snapshot.layout.orientation === 'horizontal')) {
       fail('snapshot.capabilities.sectionIndex', 'requires a vertical sectioned layout');
     }

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

@@ -390,6 +390,7 @@ export type NativeListTheme = Readonly<{
 export type SectionIndexConfig = Readonly<{
     enabled: boolean;
     hapticsEnabled?: boolean;
+    centeredInWindow?: boolean;
 }>;
 export type NativeListSnapshot = Readonly<{
     schemaVersion: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-native-list",
-  "version": "3.0.108",
+  "version": "3.0.109",
   "description": "Template-driven native RecyclerView and UICollectionView for React Native",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -82,7 +82,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-image": "3.0.108",
+    "@onekeyfe/react-native-image": "3.0.109",
     "react": "*",
     "react-native": "*",
     "react-native-nitro-modules": "0.37.0"

package/src/models.ts

@@ -409,6 +409,7 @@ export type NativeListTheme = Readonly<{
 export type SectionIndexConfig = Readonly<{
   enabled: boolean;
   hapticsEnabled?: boolean;
+  centeredInWindow?: boolean;
 }>;
 
 export type NativeListSnapshot = Readonly<{

package/src/validation.ts

@@ -698,6 +698,15 @@ export function validateSnapshot(
         'must be a boolean'
       );
     }
+    if (
+      sectionIndex.centeredInWindow !== undefined &&
+      typeof sectionIndex.centeredInWindow !== 'boolean'
+    ) {
+      fail(
+        'snapshot.capabilities.sectionIndex.centeredInWindow',
+        'must be a boolean'
+      );
+    }
     if (
       sectionIndex.enabled &&
       (snapshot.layout.kind !== 'sectioned' ||