@onekeyfe/react-native-bottom-tabs 6.7.0-alpha.400 → 6.7.0-alpha.402

package/android/src/main/java/com/onekey/bottomtabs/BottomBarBlurRenderer.kt

@@ -1,29 +1,27 @@
 package com.onekey.bottomtabs
 
-import android.graphics.BlendMode
 import android.graphics.Canvas
 import android.graphics.Color
-import android.graphics.LinearGradient
 import android.graphics.Paint
+import android.graphics.Path
 import android.graphics.RenderEffect
 import android.graphics.RenderNode
 import android.graphics.Shader
 import androidx.annotation.RequiresApi
 import kotlin.math.ceil
-import kotlin.math.max
 
-/** A GPU-only backdrop. The source callback must draw scenes, never this overlay. */
+/** A GPU-only backdrop confined to the tab bar bounds. The source callback must draw scenes, never this overlay. */
 @RequiresApi(31)
 internal class BottomBarBlurRenderer(private val density: Float) {
   private val node = RenderNode("TabBarBackdrop")
   private val tintPaint = Paint()
-  private val maskPaint = Paint().apply { blendMode = BlendMode.DST_IN }
-  private var lastWidth = 0
-  private var lastBarTop = -1
+  private val clipPath = Path()
+  private var lastLeft = 0
+  private var lastTop = -1
+  private var lastRight = 0
   private var lastBottom = 0
+  private var lastCornerRadius = -1f
   private var lastTint = Color.TRANSPARENT
-  private var fadeTop = 0f
-  private var sampleTop = 0f
 
   init {
     node.setRenderEffect(RenderEffect.createBlurEffect(
@@ -35,51 +33,73 @@ internal class BottomBarBlurRenderer(private val density: Float) {
 
   fun draw(
     canvas: Canvas,
-    width: Int,
-    barTop: Int,
+    left: Int,
+    top: Int,
+    right: Int,
     bottom: Int,
+    cornerRadius: Float,
     tint: Int,
     drawScenes: (Canvas) -> Unit,
   ) {
-    if (!canvas.isHardwareAccelerated || width <= 0 || bottom <= barTop) return
+    val width = right - left
+    val height = bottom - top
+    if (!canvas.isHardwareAccelerated || width <= 0 || height <= 0) return
 
-    if (width != lastWidth || barTop != lastBarTop || bottom != lastBottom || tint != lastTint) {
-      fadeTop = max(0f, barTop - 24f * density)
-      sampleTop = max(0f, fadeTop - 40f * density)
-      node.setPosition(0, 0, ceil(width / SCALE).toInt(), ceil((bottom - sampleTop) / SCALE).toInt())
-      maskPaint.shader = LinearGradient(
-        0f, fadeTop, 0f, barTop.toFloat(),
-        Color.TRANSPARENT, Color.WHITE, Shader.TileMode.CLAMP,
-      )
+    if (
+      left != lastLeft ||
+      top != lastTop ||
+      right != lastRight ||
+      bottom != lastBottom ||
+      cornerRadius != lastCornerRadius ||
+      tint != lastTint
+    ) {
+      node.setPosition(0, 0, ceil(width / SCALE).toInt(), ceil(height / SCALE).toInt())
+      clipPath.reset()
+      if (cornerRadius > 0f) {
+        clipPath.addRoundRect(
+          left.toFloat(),
+          top.toFloat(),
+          right.toFloat(),
+          bottom.toFloat(),
+          cornerRadius,
+          cornerRadius,
+          Path.Direction.CW,
+        )
+      }
       val surface = (tint and 0x00ffffff) or (minOf(Color.alpha(tint), 199) shl 24)
       tintPaint.color = surface
-      lastWidth = width
-      lastBarTop = barTop
+      lastLeft = left
+      lastTop = top
+      lastRight = right
       lastBottom = bottom
+      lastCornerRadius = cornerRadius
       lastTint = tint
     }
 
     val recording = node.beginRecording()
     try {
-      // Reuse child View display lists. No bitmap capture or full-screen blur.
+      // Reuse child View display lists. Only sample the scene region directly behind the bar.
       recording.scale(1f / SCALE, 1f / SCALE)
-      recording.translate(0f, -sampleTop)
+      recording.translate(-left.toFloat(), -top.toFloat())
       recording.drawColor(tint or (0xff shl 24))
       drawScenes(recording)
     } finally {
       node.endRecording()
     }
 
-    val layer = canvas.saveLayer(0f, fadeTop, width.toFloat(), bottom.toFloat(), null)
+    val saveCount = canvas.save()
+    if (cornerRadius > 0f) {
+      canvas.clipPath(clipPath)
+    } else {
+      canvas.clipRect(left, top, right, bottom)
+    }
     val transform = canvas.save()
-    canvas.translate(0f, sampleTop)
+    canvas.translate(left.toFloat(), top.toFloat())
     canvas.scale(SCALE, SCALE)
     canvas.drawRenderNode(node)
     canvas.restoreToCount(transform)
-    canvas.drawRect(0f, fadeTop, width.toFloat(), bottom.toFloat(), tintPaint)
-    // Fade the combined blur and tint, keeping the transition free of a hard seam.
-    canvas.drawRect(0f, fadeTop, width.toFloat(), bottom.toFloat(), maskPaint)
-    canvas.restoreToCount(layer)
+    canvas.drawRect(left.toFloat(), top.toFloat(), right.toFloat(), bottom.toFloat(), tintPaint)
+    canvas.restoreToCount(saveCount)
   }
 
   fun release() {

package/android/src/main/java/com/onekey/bottomtabs/BottomTabsView.kt

@@ -154,7 +154,14 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
   private val floatingRoot = object : FrameLayout(context) {
     override fun drawChild(canvas: Canvas, child: View, drawingTime: Long): Boolean {
       if (child === floatingBar && usesBottomBlur) {
-        drawBlurBackdrop(canvas, width, floatingBar.top, height) { recording ->
+        drawBlurBackdrop(
+          canvas,
+          floatingBar.left,
+          floatingBar.top,
+          floatingBar.right,
+          floatingBar.bottom,
+          floatingBar.height / 2f,
+        ) { recording ->
           super.drawChild(recording, layoutHolder, drawingTime)
         }
       }
@@ -994,18 +1001,31 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
   }
 
   private fun drawBlurBackdrop(
-    canvas: Canvas, width: Int, barTop: Int, bottom: Int, drawScenes: (Canvas) -> Unit,
+    canvas: Canvas,
+    left: Int,
+    top: Int,
+    right: Int,
+    bottom: Int,
+    cornerRadius: Float,
+    drawScenes: (Canvas) -> Unit,
   ) {
     if (!usesBottomBlur || !canvas.isHardwareAccelerated || Build.VERSION.SDK_INT < 31) return
     val blur = bottomBarBlur ?: BottomBarBlurRenderer(resources.displayMetrics.density).also {
       bottomBarBlur = it
     }
-    blur.draw(canvas, width, barTop, bottom, blurSurfaceColor, drawScenes)
+    blur.draw(canvas, left, top, right, bottom, cornerRadius, blurSurfaceColor, drawScenes)
   }
 
   override fun drawChild(canvas: Canvas, child: View, drawingTime: Long): Boolean {
     if (child === bottomNavigation && androidTabBarStyle == AndroidTabBarStyle.DEFAULT) {
-      drawBlurBackdrop(canvas, width, bottomNavigation.top, bottomNavigation.bottom) { recording ->
+      drawBlurBackdrop(
+        canvas,
+        bottomNavigation.left,
+        bottomNavigation.top,
+        bottomNavigation.right,
+        bottomNavigation.bottom,
+        0f,
+      ) { recording ->
         super.drawChild(recording, layoutHolder, drawingTime)
       }
     }

package/docs/SPEC.md

@@ -172,10 +172,10 @@ bottom gap, or 0 while hidden.
 
 Floating appearance with background blur disabled: the bar surface is `barTintColor` (or the theme background)
 at 95% opacity (lightened slightly for dark colors), with
-a hairline rim and an outline shadow. When background blur is enabled (see below), the bottom strip extends from
-24 dp above the capsule to the bottom of the scene, including the gap beneath
-the capsule. The existing capsule keeps its rim/shadow and uses a 12 percent
-surface fill over the blurred strip; its lens and navigation controls remain
+a hairline rim and an outline shadow. When background blur is enabled (see below), the live blur and translucent
+surface tint are confined and clipped to the capsule bounds; the region above,
+beside, and beneath the capsule remains unblurred. The existing capsule keeps its rim/shadow and uses a 12 percent
+surface fill over the blurred capsule backdrop; its lens and navigation controls remain
 sharp. The selected tab sits on a capsule pill inset 4 dp
 (`activeIndicatorColor` when provided). The Material ripple is disabled; the
 lens provides press feedback.
@@ -211,7 +211,7 @@ coverage. Complete consumer-app and physical-device acceptance remain pending;
 API 31-35 and visual dark-mode acceptance have not been reverified for this port.
 
 `androidBottomBlurEnabled?: boolean` controls the native Android tab bar's live
-background blur, translucent surface tint, and 24 dp fade into the page above it.
+background blur and translucent surface tint behind the bar.
 Omitting it (including `undefined`) MUST enable the effect only on Android 16
 (API 36) and newer. `false` MUST restore the existing appearance and layout for the current
 `androidTabBarStyle`: docked scenes reserve bar height; floating scenes retain
@@ -229,19 +229,22 @@ report zero bar height. Toggling, resizing, theme changes, and system/keyboard
 insets MUST refresh geometry and appearance without remounting scenes.
 
 The module owns the GPU resources on the UI thread. It MUST sample only the
-scene layer, excluding the tab bar and its own output. It MUST use hardware
-RenderNode/RenderEffect rendering of a bottom strip at one-quarter resolution
-in each dimension, with a 20 dp blur radius and 40 dp sampling margin above the
-fade. It MUST NOT capture bitmaps, read pixels back to the CPU, emit scroll
-events to JS, or run a recurring frame callback for this effect. Rendering MUST
-follow the normal view invalidation cycle, using the scene's existing display
-lists. The translucent tint MUST follow `tabBarStyle.backgroundColor` when set,
-otherwise the docked Material surface color or floating theme background,
-with opacity capped at 78 percent.
-
-Only one blur RenderNode and cached paints/shaders MAY be retained per mounted
-tab view. Its offscreen dimensions MUST be bounded by one-quarter of the view
-width and the smaller of the view height or reported bar footprint plus 64 dp (rounded up).
+scene layer directly behind the active tab bar bounds (the docked bar rectangle
+in `default` style or the capsule bounds in `floating` style), excluding the
+tab bar and its own output, and clip the blurred backdrop and tint to those
+bounds (including the capsule corner radius in `floating` style) with no blur
+or fade bleeding above or outside the bar. It MUST use hardware
+RenderNode/RenderEffect rendering of the bar bounds at one-quarter resolution
+in each dimension, with a 20 dp blur radius. It MUST NOT capture bitmaps, read
+pixels back to the CPU, emit scroll events to JS, or run a recurring frame
+callback for this effect. Rendering MUST follow the normal view invalidation
+cycle, using the scene's existing display lists. The translucent tint MUST
+follow `tabBarStyle.backgroundColor` when set, otherwise the docked Material
+surface color or floating theme background, with opacity capped at 78 percent.
+
+Only one blur RenderNode and cached paints/paths MAY be retained per mounted
+tab view. Its offscreen dimensions MUST be bounded by one-quarter of the bar
+width and one-quarter of the bar height (rounded up).
 Disabling, hiding, detaching, and dropping the native view MUST discard the
 display list; no scene snapshots, disk cache, timers, or background workers are
 owned. SurfaceView content is outside the normal View display list and is not

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-bottom-tabs",
-  "version": "6.7.0-alpha.400",
+  "version": "6.7.0-alpha.402",
   "description": "Native bottom tabs (tab bar + scene container) for React Native on iOS and Android",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",