@onekeyfe/react-native-bottom-tabs 6.7.0-7 → 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
@@ -902,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
@@ -1058,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()
   }
@@ -1087,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>) {
@@ -1213,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
     }
   }
 
@@ -1250,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?) {
@@ -1296,6 +1420,9 @@ class BottomTabsView(context: Context) : LinearLayout(context) {
   }
 
   fun onDropViewInstance() {
+    androidBottomBlurEnabled = false
+    updateBlurAppearance()
+    releaseBottomBlur()
     resetFloatingGesture()
     imageLoader.shutdown()
   }
@@ -1382,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
     }
@@ -1394,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.
 
@@ -78,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-7",
+  "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;