@onekeyfe/react-native-bottom-tabs 6.7.0-alpha.339 → 6.7.0-alpha.341

package/README.md

@@ -48,6 +48,14 @@ Some appearance and interaction options are platform-specific, including Apple
 symbols and newer iOS tab-bar presentation. Check those options against the
 consumer's supported OS versions rather than assuming identical native layouts.
 
+On Android, `androidBottomBlurEnabled` controls live background blur, translucent
+tint, and a gradient above the native bar. It defaults to enabled on Android 16+
+(API 36); pass `false` to disable it or `true` to enable it on Android 12–15.
+Earlier Android versions retain the standard bar. It is ignored on iOS and with
+a custom `tabBar`. When enabled, scenes extend behind the bar: use
+`useBottomTabBarHeight()` as scroll-content bottom padding so the last row can
+scroll above it. `tabBarStyle.backgroundColor` sets the surface tint.
+
 See [src/BottomTabs.tsx](src/BottomTabs.tsx) for component props and
 [src/types.ts](src/types.ts) for route definitions.
 

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

@@ -0,0 +1,92 @@
+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.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. */
+@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 var lastBottom = 0
+  private var lastTint = Color.TRANSPARENT
+  private var fadeTop = 0f
+  private var sampleTop = 0f
+
+  init {
+    node.setRenderEffect(RenderEffect.createBlurEffect(
+      20f * density / SCALE,
+      20f * density / SCALE,
+      Shader.TileMode.CLAMP,
+    ))
+  }
+
+  fun draw(
+    canvas: Canvas,
+    width: Int,
+    barTop: Int,
+    bottom: Int,
+    tint: Int,
+    drawScenes: (Canvas) -> Unit,
+  ) {
+    if (!canvas.isHardwareAccelerated || width <= 0 || bottom <= barTop) 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,
+      )
+      val surface = (tint and 0x00ffffff) or (minOf(Color.alpha(tint), 199) shl 24)
+      tintPaint.color = surface
+      lastWidth = width
+      lastBarTop = barTop
+      lastBottom = bottom
+      lastTint = tint
+    }
+
+    val recording = node.beginRecording()
+    try {
+      // Reuse child View display lists. No bitmap capture or full-screen blur.
+      recording.scale(1f / SCALE, 1f / SCALE)
+      recording.translate(0f, -sampleTop)
+      recording.drawColor(tint or (0xff shl 24))
+      drawScenes(recording)
+    } finally {
+      node.endRecording()
+    }
+
+    val layer = canvas.saveLayer(0f, fadeTop, width.toFloat(), bottom.toFloat(), null)
+    val transform = canvas.save()
+    canvas.translate(0f, sampleTop)
+    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)
+  }
+
+  fun release() {
+    node.discardDisplayList()
+  }
+
+  private companion object {
+    const val SCALE = 4f
+  }
+}

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

@@ -7,6 +7,7 @@ import android.content.res.ColorStateList
 import android.content.res.Configuration
 import androidx.appcompat.view.ContextThemeWrapper
 import android.graphics.Color
+import android.graphics.Canvas
 import android.graphics.Outline
 import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.Drawable
@@ -150,7 +151,16 @@ private enum class AndroidTabBarStyle {
 class BottomTabsView(context: Context) : LinearLayout(context) {
   private var bottomNavigation = ExtendedBottomNavigationView(context)
   val layoutHolder = FrameLayout(context)
-  private val floatingRoot = FrameLayout(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 ->
+          super.drawChild(recording, layoutHolder, drawingTime)
+        }
+      }
+      return super.drawChild(canvas, child, drawingTime)
+    }
+  }
   private val floatingBar = FrameLayout(context)
   private val floatingBarBackground = View(context)
   private val floatingIndicator = View(context)
@@ -190,6 +200,7 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
   private var fontWeight: Int? = null
   private var labeled: Boolean? = null
   private var lastReportedSize: Size? = null
+  private var lastReportedTabBarHeight = -1
   private var hasCustomAppearance = false
   private var uiModeConfiguration: Int = Configuration.UI_MODE_NIGHT_UNDEFINED
   private var androidTabBarStyle = AndroidTabBarStyle.DEFAULT
@@ -246,6 +257,19 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
     }
     .build()
 
+  private var androidBottomBlurEnabled = false
+  private var bottomBarBlur: BottomBarBlurRenderer? = null
+  private var blurAppearanceApplied = false
+  private var floatingBlurAppearanceApplied = false
+  private var blurSurfaceColor = Color.WHITE
+  private var savedBarTint: ColorStateList? = null
+  private var savedItemBackground: Drawable? = null
+  private var savedBarElevation = 0f
+
+  private val usesBottomBlur: Boolean
+    get() = androidBottomBlurEnabled && Build.VERSION.SDK_INT >= 31 &&
+      isHardwareAccelerated && !isTabBarHidden
+
   init {
     orientation = VERTICAL
     layoutHolder.isSaveEnabled = false
@@ -288,26 +312,7 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
       insets
     }
 
-    post {
-      addOnLayoutChangeListener { _, left, top, right, bottom,
-                                  _, _, _, _ ->
-        val newWidth = right - left
-        val newHeight = bottom - top
-
-        // Notify about tab bar height.
-        onTabBarMeasuredListener?.invoke(
-          Utils.convertPixelsToDp(context, getTabBarMeasuredHeight()).toInt()
-        )
-
-        if (newWidth != lastReportedSize?.width || newHeight != lastReportedSize?.height) {
-          val dpWidth = Utils.convertPixelsToDp(context, layoutHolder.width)
-          val dpHeight = Utils.convertPixelsToDp(context, layoutHolder.height)
 
-          onNativeLayoutListener?.invoke(dpWidth, dpHeight)
-          lastReportedSize = Size(newWidth, newHeight)
-        }
-      }
-    }
   }
 
   private fun dp(value: Float): Int =
@@ -318,6 +323,7 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
   }
 
   private fun detachTabBarViews() {
+    releaseBottomBlur()
     removeFromParent(layoutHolder)
     removeFromParent(bottomNavigation)
     removeFromParent(floatingRoot)
@@ -519,8 +525,8 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
     if (androidTabBarStyle != AndroidTabBarStyle.FLOATING) {
       return
     }
-    // Android has no system backdrop material, so the glass is approximated with
-    // a near-opaque tinted surface, a hairline rim, and a soft outline shadow.
+    // With a live backdrop, keep only a light surface tint over the blur.
+    // The existing rim, shadow, and pressed lens keep their own sharp layers.
     val baseColor = resolvedBarTintColor()
     val isDark = isDarkColor(baseColor)
     val contrastColor = if (isDark) Color.WHITE else Color.BLACK
@@ -528,7 +534,7 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
     floatingBarBackground.background = GradientDrawable().apply {
       shape = GradientDrawable.RECTANGLE
       cornerRadius = dp(FloatingTabBarMetrics.BAR_HEIGHT / 2f).toFloat()
-      setColor(withAlpha(surfaceColor, 0.95f))
+      setColor(withAlpha(surfaceColor, if (usesBottomBlur) 0.12f else 0.95f))
       setStroke(maxOf(1, dp(0.5f)), withAlpha(contrastColor, if (isDark) 0.14f else 0.07f))
     }
     floatingRestingFillColor = activeIndicatorColor?.defaultColor
@@ -747,6 +753,11 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
         if (floatingTouchView !== view) {
           return true
         }
+        val deltaX = event.rawX - floatingTouchStartRawX
+        val deltaY = event.rawY - floatingTouchStartRawY
+        if (deltaX * deltaX + deltaY * deltaY > floatingTouchSlop * floatingTouchSlop) {
+          floatingDragging = true
+        }
         if (floatingDragging) {
           updateFloatingDrag(event.rawX, event.eventTime)
         }
@@ -897,6 +908,120 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
     layout(left, top, right, bottom)
   }
 
+  fun setAndroidBottomBlurEnabled(enabled: Boolean) {
+    if (androidBottomBlurEnabled == enabled) return
+    androidBottomBlurEnabled = enabled
+    updateBlurAppearance()
+    requestLayout()
+    floatingRoot.invalidate()
+    invalidate()
+  }
+
+  private fun updateBlurAppearance() {
+    if (!usesBottomBlur) releaseBottomBlur()
+    val enabled = usesBottomBlur && androidTabBarStyle == AndroidTabBarStyle.DEFAULT
+    if (androidTabBarStyle == AndroidTabBarStyle.FLOATING) {
+      blurSurfaceColor = resolvedBarTintColor()
+      if (floatingBlurAppearanceApplied != usesBottomBlur) {
+        floatingBlurAppearanceApplied = usesBottomBlur
+        updateFloatingAppearance()
+      }
+    } else if (enabled) {
+      blurSurfaceColor = barTintColor ?: Utils.getDefaultColorFor(
+        bottomNavigation.context, com.google.android.material.R.attr.colorSurface,
+      ) ?: if (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES) {
+        Color.BLACK
+      } else Color.WHITE
+    }
+    if (enabled == blurAppearanceApplied) return
+    if (enabled) {
+      savedBarTint = bottomNavigation.backgroundTintList
+      savedItemBackground = bottomNavigation.itemBackground
+      savedBarElevation = bottomNavigation.elevation
+      val ripple = bottomNavigation.itemRippleColor
+      bottomNavigation.backgroundTintList = ColorStateList.valueOf(Color.TRANSPARENT)
+      bottomNavigation.itemBackground = null
+      bottomNavigation.itemRippleColor = ripple
+      bottomNavigation.elevation = 0f
+    } else {
+      bottomNavigation.backgroundTintList = savedBarTint
+      bottomNavigation.itemBackground = savedItemBackground
+      bottomNavigation.elevation = savedBarElevation
+      releaseBottomBlur()
+    }
+    blurAppearanceApplied = enabled
+  }
+
+  private fun releaseBottomBlur() {
+    if (Build.VERSION.SDK_INT >= 31) bottomBarBlur?.release()
+    bottomBarBlur = null
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    updateBlurAppearance()
+    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+    if (usesBottomBlur && androidTabBarStyle == AndroidTabBarStyle.DEFAULT) {
+      layoutHolder.measure(
+        MeasureSpec.makeMeasureSpec(maxOf(0, measuredWidth - paddingLeft - paddingRight), MeasureSpec.EXACTLY),
+        MeasureSpec.makeMeasureSpec(maxOf(0, measuredHeight - paddingTop - paddingBottom), MeasureSpec.EXACTLY),
+      )
+    }
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    if (usesBottomBlur && androidTabBarStyle == AndroidTabBarStyle.DEFAULT) {
+      layoutHolder.layout(paddingLeft, paddingTop, width - paddingRight, height - paddingBottom)
+      bottomNavigation.layout(
+        paddingLeft, height - paddingBottom - bottomNavigation.measuredHeight,
+        width - paddingRight, height - paddingBottom,
+      )
+    }
+    val barHeight = Utils.convertPixelsToDp(context, getTabBarMeasuredHeight()).toInt()
+    if (barHeight != lastReportedTabBarHeight) {
+      onTabBarMeasuredListener?.invoke(barHeight)
+      lastReportedTabBarHeight = barHeight
+    }
+    // Scene bounds change when blur toggles even if the host bounds stay fixed.
+    val sceneSize = Size(layoutHolder.width, layoutHolder.height)
+    if (sceneSize != lastReportedSize) {
+      onNativeLayoutListener?.invoke(
+        Utils.convertPixelsToDp(context, sceneSize.width),
+        Utils.convertPixelsToDp(context, sceneSize.height),
+      )
+      lastReportedSize = sceneSize
+    }
+  }
+
+  private fun drawBlurBackdrop(
+    canvas: Canvas, width: Int, barTop: Int, bottom: Int, 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)
+  }
+
+  override fun drawChild(canvas: Canvas, child: View, drawingTime: Long): Boolean {
+    if (child === bottomNavigation && androidTabBarStyle == AndroidTabBarStyle.DEFAULT) {
+      drawBlurBackdrop(canvas, width, bottomNavigation.top, bottomNavigation.bottom) { recording ->
+        super.drawChild(recording, layoutHolder, drawingTime)
+      }
+    }
+    return super.drawChild(canvas, child, drawingTime)
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    requestLayout()
+  }
+
+  override fun onDetachedFromWindow() {
+    releaseBottomBlur()
+    super.onDetachedFromWindow()
+  }
+
   override fun requestLayout() {
     super.requestLayout()
     @Suppress("SENSELESS_COMPARISON") // layoutCallback can be null here since this method can be called in init
@@ -1053,11 +1178,15 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
       return
     }
     androidTabBarStyle = nextStyle
+    // Restore the docked appearance before reparenting, then capture the new
+    // style only after its normal appearance has been installed.
+    if (blurAppearanceApplied) updateBlurAppearance()
     if (nextStyle == AndroidTabBarStyle.FLOATING) {
       attachFloatingLayout()
     } else {
       attachDefaultLayout()
     }
+    updateBlurAppearance()
     updateTextAppearance()
     requestLayout()
   }
@@ -1082,19 +1211,12 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
       bottomNavigation.visibility = if (isHidden) GONE else VISIBLE
     }
 
-    // Force re-measure and notify JS about the new layout dimensions
-    post {
-      val dpWidth = Utils.convertPixelsToDp(context, layoutHolder.width)
-      val dpHeight = Utils.convertPixelsToDp(context, layoutHolder.height)
-      onNativeLayoutListener?.invoke(dpWidth, dpHeight)
-
-      // Update tab bar height measurement (0 when hidden)
-      val tabBarHeight = Utils.convertPixelsToDp(context, getTabBarMeasuredHeight()).toInt()
-      onTabBarMeasuredListener?.invoke(tabBarHeight)
-      if (!isHidden) {
-        updateFloatingIndicator(animate = false)
-      }
-    }
+    updateBlurAppearance()
+    requestLayout()
+    floatingRoot.invalidate()
+    invalidate()
+    if (!isHidden) post { updateFloatingIndicator(animate = false) }
+
   }
 
   fun updateItems(items: MutableList<TabInfo>) {
@@ -1208,6 +1330,7 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
     // Floating mode replaces the ripple with the pressed lens.
     if (androidTabBarStyle != AndroidTabBarStyle.FLOATING) {
       bottomNavigation.itemRippleColor = color
+      if (blurAppearanceApplied) savedItemBackground = bottomNavigation.itemBackground
     }
   }
 
@@ -1245,14 +1368,20 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
     val backgroundColor =
       color ?: Utils.getDefaultColorFor(context, android.R.attr.colorPrimary) ?: return
     barTintColor = backgroundColor
+    blurSurfaceColor = backgroundColor
 
     if (androidTabBarStyle == AndroidTabBarStyle.FLOATING) {
       updateFloatingAppearance()
+    } else if (blurAppearanceApplied) {
+      savedItemBackground = ColorDrawable(backgroundColor)
+      savedBarTint = ColorStateList.valueOf(backgroundColor)
     } else {
       bottomNavigation.itemBackground = ColorDrawable(backgroundColor)
       bottomNavigation.backgroundTintList = ColorStateList.valueOf(backgroundColor)
     }
     hasCustomAppearance = true
+    floatingRoot.invalidate()
+    invalidate()
   }
 
   fun setActiveTintColor(color: Int?) {
@@ -1291,6 +1420,9 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
   }
 
   fun onDropViewInstance() {
+    androidBottomBlurEnabled = false
+    updateBlurAppearance()
+    releaseBottomBlur()
     resetFloatingGesture()
     imageLoader.shutdown()
   }
@@ -1377,6 +1509,12 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
 
   override fun onConfigurationChanged(newConfig: Configuration?) {
     super.onConfigurationChanged(newConfig)
+    releaseBottomBlur()
+    if (androidBottomBlurEnabled) {
+      requestLayout()
+      floatingRoot.invalidate()
+      invalidate()
+    }
     if (uiModeConfiguration == newConfig?.uiMode || hasCustomAppearance) {
       return
     }
@@ -1389,6 +1527,7 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
     // If appearance wasn't changed re-create the bottom navigation view when configuration changes.
     // React Native opts out ouf Activity re-creation when configuration changes, this workarounds that.
     // We also opt-out of this recreation when custom styles are used.
+    blurAppearanceApplied = false
     removeFromParent(bottomNavigation)
     bottomNavigation = ExtendedBottomNavigationView(context)
     defaultItemBackground = bottomNavigation.itemBackground

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

@@ -201,6 +201,10 @@ class BottomTabsViewManager(context: ReactApplicationContext) :
     view?.setIgnoreKeyboardInsets(value)
   }
 
+  override fun setAndroidBottomBlurEnabled(view: BottomTabsView?, value: Boolean) {
+    view?.setAndroidBottomBlurEnabled(value)
+  }
+
   // iOS-only props (no-ops on Android)
   // selectedIcons feeds UITabBarItem.selectedImage on iOS; Android keeps
   // swapping the icon in JS via the focusedKey-driven `icons` array.

package/docs/SPEC.md

@@ -38,7 +38,7 @@ moved more than 10 points) was removed because it disabled drag-to-switch.
 `androidTabBarStyle` selects the Android presentation; iOS ignores it.
 
 - `default` (default): Material `BottomNavigationView` docked at the bottom,
-  unchanged behavior.
+  with the blur-controlled scene underlap described below.
 - `floating`: a capsule bar modeled on the iOS 26 tab bar. Scene content extends
   underneath it.
 
@@ -50,10 +50,13 @@ are 26, labels 10 sp in both states unless `fontSize` is set, and item content i
 vertically centered. The reported tab bar height is the bar height plus its
 bottom gap, or 0 while hidden.
 
-Floating appearance: the bar surface is `barTintColor` (or the theme background)
+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. Android has no system backdrop material,
-so no blur is applied. The selected tab sits on a capsule pill inset 4 dp
+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
+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.
 
@@ -66,6 +69,9 @@ Floating interaction (single finger; motion splitting is disabled):
    becomes the candidate, is magnified, and ticks haptically when it changes.
    No page change or event happens during the drag.
 3. Release without drag performs the tab's click (selection or reselection).
+   Release displacement is also checked against touch slop, including when no
+   MOVE was delivered or the last MOVE remained within slop. If release crosses
+   slop, it starts a drag and updates the candidate from the release position.
    Release after a drag selects the candidate once, only if it differs from the
    current tab. Cancel selects nothing.
 4. The lens then settles back into the pill on the selected tab, which stays on
@@ -75,6 +81,67 @@ JS-driven selection changes slide the pill with a spring and velocity stretch.
 Switching style at runtime rebuilds the bar and restores Material's label sizes,
 icon size, ripple, padding, and gravity when returning to `default`.
 
+## Android bottom background blur
+
+Status: implemented in module source. The renamed package passed TypeScript
+checking, Android compilation with regenerated Fabric bindings, eight React
+wrapper tests, and ten direct-native API 36 tests (five each for docked and
+floating styles). Style switching with blur active received focused regression
+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.
+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
+their existing underlap and lens gestures. `true` MAY enable it on Android 12 (API 31) and newer; older
+Android versions and software-rendered windows MUST retain the existing layout
+and appearance. iOS and custom JS tab bars MUST ignore this option.
+
+When active, the selected scene MUST fill the native container behind the tab
+bar; icons, labels, badges, and the style's press feedback MUST stay sharp and interactive.
+The reported scene dimensions MUST include this underlap, while tab-bar height
+MUST retain its existing meaning (including system/IME padding unless ignored).
+Callers MUST use `useBottomTabBarHeight` to pad scrollable content when its final
+row must scroll clear of the bar. Hiding the bar MUST remove the effect and
+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).
+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
+supported as a blur source. Liquid Glass refraction and shape morphing are out
+of scope.
+
+Acceptance MUST cover API 35/36 default behavior and explicit overrides, live
+scrolling under the bar with sharp controls, on/off restoration, hidden bars,
+tab changes, resize, dark/light themes, ignored bottom insets, and both keyboard
+inset modes. A representative scroll comparison MUST distinguish UI/RenderThread
+timings and missed frames from visual correctness. Source/type checks and
+emulator measurements MUST NOT be reported as physical-device performance.
+
+Implementation: `src/BottomTabs.tsx` owns the public default and custom-bar guard;
+`src/BottomTabsNativeComponent.ts` and `BottomTabsViewManager.kt` define the Fabric
+boundary; `BottomTabsView.kt` owns scene geometry, appearance, and disposal;
+`BottomBarBlurRenderer.kt` owns the bounded GPU pipeline. Focused native tests
+and runner instructions are in `native-tests/android`. The example's settings
+page exposes the switch and its scrolling scene reserves the reported bar height.
+
 ## Threading and ownership
 
 All gesture handling, animations, and timers run on the platform UI thread in

package/lib/module/BottomTabs.js

@@ -69,6 +69,7 @@ const BottomTabs = ({
   tabLabelStyle,
   renderBottomAccessoryView,
   activeIndicatorColor,
+  androidBottomBlurEnabled = Platform.OS === 'android' && Number(Platform.Version) >= 36,
   delayedFreeze = false,
   ...props
 }) => {
@@ -265,6 +266,7 @@ const BottomTabs = ({
       barTintColor: tabBarStyle?.backgroundColor,
       rippleColor: rippleColor,
       activeIndicatorColor: activeIndicatorColor,
+      androidBottomBlurEnabled: Platform.OS === 'android' && !renderCustomTabBar && androidBottomBlurEnabled,
       labeled: labeled,
       children: [trimmedRoutes.map(route => {
         if (getLazy({

package/lib/module/BottomTabsNativeComponent.ts

@@ -51,6 +51,7 @@ export interface BottomTabsNativeProps extends ViewProps {
   scrollEdgeAppearance?: string;
   barTintColor?: ColorValue;
   translucent?: WithDefault<boolean, true>;
+  androidBottomBlurEnabled?: WithDefault<boolean, false>;
   rippleColor?: ColorValue;
   activeTintColor?: ColorValue;
   inactiveTintColor?: ColorValue;

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

@@ -157,6 +157,13 @@ interface Props<Route extends BaseRoute> {
      * A Boolean value that indicates whether the tab bar is translucent. (iOS only)
      */
     translucent?: boolean;
+    /**
+     * Live background blur, translucent tint, and a fade above the native Android
+     * tab bar. Defaults to true on Android 16+ (API 36). Explicit true supports
+     * Android 12+; older versions retain the standard bar. Ignored on iOS.
+     * Pad scroll content with useBottomTabBarHeight when enabled.
+     */
+    androidBottomBlurEnabled?: boolean;
     rippleColor?: ColorValue;
     /**
      * Color of tab indicator. (Android only)
@@ -197,6 +204,6 @@ interface Props<Route extends BaseRoute> {
      */
     delayedFreeze?: boolean;
 }
-declare const BottomTabs: <Route extends BaseRoute>({ navigationState, renderScene, renderLazyPlaceholder, onIndexChange, onTabDoublePress, rippleColor, tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, getBadge, getBadgeBackgroundColor, getBadgeTextColor, getLazy, getLabelText, getIcon, getHidden, getActiveTintColor, getTestID, getRole, getSceneStyle, getPreventsDefault, hapticFeedbackEnabled, labeled, getFreezeOnBlur, tabBar: renderCustomTabBar, tabBarStyle, tabLabelStyle, renderBottomAccessoryView, activeIndicatorColor, delayedFreeze, ...props }: Props<Route>) => import("react/jsx-runtime").JSX.Element;
+declare const BottomTabs: <Route extends BaseRoute>({ navigationState, renderScene, renderLazyPlaceholder, onIndexChange, onTabDoublePress, rippleColor, tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, getBadge, getBadgeBackgroundColor, getBadgeTextColor, getLazy, getLabelText, getIcon, getHidden, getActiveTintColor, getTestID, getRole, getSceneStyle, getPreventsDefault, hapticFeedbackEnabled, labeled, getFreezeOnBlur, tabBar: renderCustomTabBar, tabBarStyle, tabLabelStyle, renderBottomAccessoryView, activeIndicatorColor, androidBottomBlurEnabled, delayedFreeze, ...props }: Props<Route>) => import("react/jsx-runtime").JSX.Element;
 export default BottomTabs;
 //# sourceMappingURL=BottomTabs.d.ts.map

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

@@ -39,6 +39,7 @@ export interface BottomTabsNativeProps extends ViewProps {
     scrollEdgeAppearance?: string;
     barTintColor?: ColorValue;
     translucent?: WithDefault<boolean, true>;
+    androidBottomBlurEnabled?: WithDefault<boolean, false>;
     rippleColor?: ColorValue;
     activeTintColor?: ColorValue;
     inactiveTintColor?: ColorValue;

package/package.json

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

package/src/BottomTabs.tsx

@@ -169,6 +169,13 @@ interface Props<Route extends BaseRoute> {
    * A Boolean value that indicates whether the tab bar is translucent. (iOS only)
    */
   translucent?: boolean;
+  /**
+   * Live background blur, translucent tint, and a fade above the native Android
+   * tab bar. Defaults to true on Android 16+ (API 36). Explicit true supports
+   * Android 12+; older versions retain the standard bar. Ignored on iOS.
+   * Pad scroll content with useBottomTabBarHeight when enabled.
+   */
+  androidBottomBlurEnabled?: boolean;
   rippleColor?: ColorValue;
   /**
    * Color of tab indicator. (Android only)
@@ -247,6 +254,8 @@ const BottomTabs = <Route extends BaseRoute>({
   tabLabelStyle,
   renderBottomAccessoryView,
   activeIndicatorColor,
+  androidBottomBlurEnabled = Platform.OS === 'android' &&
+    Number(Platform.Version) >= 36,
   delayedFreeze = false,
   ...props
 }: Props<Route>) => {
@@ -471,6 +480,11 @@ const BottomTabs = <Route extends BaseRoute>({
         barTintColor={tabBarStyle?.backgroundColor}
         rippleColor={rippleColor}
         activeIndicatorColor={activeIndicatorColor}
+        androidBottomBlurEnabled={
+          Platform.OS === 'android' &&
+          !renderCustomTabBar &&
+          androidBottomBlurEnabled
+        }
         labeled={labeled}
       >
         {trimmedRoutes.map((route) => {

package/src/BottomTabsNativeComponent.ts

@@ -51,6 +51,7 @@ export interface BottomTabsNativeProps extends ViewProps {
   scrollEdgeAppearance?: string;
   barTintColor?: ColorValue;
   translucent?: WithDefault<boolean, true>;
+  androidBottomBlurEnabled?: WithDefault<boolean, false>;
   rippleColor?: ColorValue;
   activeTintColor?: ColorValue;
   inactiveTintColor?: ColorValue;