react-native-blur-vibe 0.1.10 → 0.1.12

package/android/src/main/java/com/blurvibe/BlurVibeView.kt

@@ -12,31 +12,28 @@ import androidx.core.graphics.toColorInt
 import com.facebook.react.views.view.ReactViewGroup
 
 /**
- * BlurVibeView — Android API 21–30 backdrop blur (zero external dependencies)
+ * BlurVibeView — Android API 21–30 backdrop blur.
  *
- * Replaces QmBlurView with LegacyBlurController — a direct RenderScript
- * implementation using only the Android SDK. No third-party library needed.
+ * Delegates all blur work to LegacyBlurController.
+ * Extends ReactViewGroup — handles all RN style props (borderRadius,
+ * opacity, transforms etc) natively via ReactViewGroup's own draw pipeline.
  *
- * Extends ReactViewGroup so it hosts RN children correctly (Yoga layout,
- * touch events, z-ordering all work natively).
- *
- * For API 31+, BlurVibeViewApi31 is used instead (RenderEffect GPU path).
+ * THE STATIC BLUR FIX:
+ * draw() is overridden to be a no-op when LegacyBlurController.isCapturing
+ * is true. This prevents root.draw() from painting our stale blur output
+ * into the capture bitmap. Without this, each frame captures the previous
+ * frame's blur output and the blur appears frozen/static.
  */
 class BlurVibeView(context: Context) : ReactViewGroup(context) {
 
-  // ── State ──────────────────────────────────────────────────────────────────
-
   private var blurController: LegacyBlurController? = null
-  private var pendingBlurAmount  = 10f
-  private var pendingOverlay     = Color.TRANSPARENT
-  private var cornerRadiusPx     = 0f
-
-  // ── Init ───────────────────────────────────────────────────────────────────
+  private var pendingBlurAmount = 10f
+  private var pendingOverlay    = Color.TRANSPARENT
+  private var cornerRadiusPx    = 0f
 
   init {
     setWillNotDraw(false)
-    super.setBackgroundColor(Color.TRANSPARENT)
-    clipToOutline = true
+    // DO NOT call setBackgroundColor — see BlurVibeViewApi31 for explanation.
   }
 
   // ── Lifecycle ──────────────────────────────────────────────────────────────
@@ -63,15 +60,28 @@ class BlurVibeView(context: Context) : ReactViewGroup(context) {
 
   override fun onWindowFocusChanged(hasWindowFocus: Boolean) {
     super.onWindowFocusChanged(hasWindowFocus)
-    // Re-attach to the current ViewTreeObserver after split-screen / PiP transition.
-    // Android may have killed and replaced the old observer during the mode switch.
     if (hasWindowFocus) blurController?.reAttach()
   }
 
-  // ── Draw ───────────────────────────────────────────────────────────────────
+  // ── draw() — suppress self during root capture ────────────────────────────
+  //
+  // When LegacyBlurController is actively capturing (root.draw() in progress),
+  // skip drawing ourselves. This makes us invisible to the capture canvas so
+  // the capture bitmap contains ONLY the content behind us, not our own stale
+  // blur output. Without this, the blur appears static/frozen.
+
+  override fun draw(canvas: Canvas) {
+    if (blurController?.isCapturing == true) return
+    super.draw(canvas)
+  }
+
+  // ── onDraw ────────────────────────────────────────────────────────────────
 
   override fun onDraw(canvas: Canvas) {
+    // Draw the blurred background first
     blurController?.draw(canvas, width.toFloat(), height.toFloat())
+    // Let ReactViewGroup draw borders/radius/background on top natively
+    super.onDraw(canvas)
   }
 
   // ── Public setters ─────────────────────────────────────────────────────────
@@ -88,24 +98,28 @@ class BlurVibeView(context: Context) : ReactViewGroup(context) {
   }
 
   fun setBlurRadius(factor: Int) {
-    // No-op for now — LegacyBlurController uses fixed DOWNSAMPLE_FACTOR = 4
-    // Could expose downsampleFactor setter on controller if needed
+    // Exposed as a downsample override for power users — not used internally
   }
 
   fun applyBorderRadius(radiusDp: Float) {
     cornerRadiusPx = TypedValue.applyDimension(
       TypedValue.COMPLEX_UNIT_DIP, radiusDp, context.resources.displayMetrics
     )
-    outlineProvider = object : ViewOutlineProvider() {
-      override fun getOutline(view: View, outline: Outline) {
-        outline.setRoundRect(0, 0, view.width, view.height, cornerRadiusPx)
+    if (cornerRadiusPx > 0f) {
+      outlineProvider = object : ViewOutlineProvider() {
+        override fun getOutline(view: View, outline: Outline) {
+          outline.setRoundRect(0, 0, view.width, view.height, cornerRadiusPx)
+        }
       }
+      clipToOutline = true
+    } else {
+      outlineProvider = ViewOutlineProvider.BACKGROUND
+      clipToOutline   = false
     }
-    clipToOutline = cornerRadiusPx > 0f
     invalidate()
   }
 
-  fun setReducedTransparencyFallbackColor(@Suppress("UNUSED_PARAMETER") color: String?) { }
+  fun setReducedTransparencyFallbackColor(@Suppress("UNUSED_PARAMETER") color: String?) {}
 
   fun applyBlurEnabled(enabled: Boolean) {
     blurController?.enabled = enabled
@@ -118,15 +132,15 @@ class BlurVibeView(context: Context) : ReactViewGroup(context) {
 
   // ── Layout passthrough ─────────────────────────────────────────────────────
 
-  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
-    // Yoga handles all layout
-  }
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {}
 
   // ── Helpers ────────────────────────────────────────────────────────────────
 
   private fun mapBlurAmount(amount: Float): Float {
+    // Linear 0→1, 100→25 (RenderScript max kernel is 25)
+    // With 3 blur rounds this gives equivalent spread to Api31's 120px single-pass
     val t = amount.coerceIn(0f, 100f) / 100f
-    return t * t * 25f  // quadratic curve, max 25 (RenderScript kernel limit)
+    return (1f + t * 24f)  // 1–25 linear, rounds=3 gives wide spread
   }
 
   private fun findBlurRoot(): ViewGroup? {

package/android/src/main/java/com/blurvibe/BlurVibeViewApi31.kt

@@ -13,7 +13,6 @@ import android.graphics.Paint
 import android.graphics.PorterDuff
 import android.graphics.PorterDuffXfermode
 import android.graphics.RadialGradient
-import android.graphics.Rect
 import android.graphics.RectF
 import android.graphics.RenderEffect
 import android.graphics.RenderNode
@@ -28,41 +27,16 @@ import android.view.ViewTreeObserver
 import androidx.annotation.RequiresApi
 import androidx.core.graphics.toColorInt
 import com.facebook.react.views.view.ReactViewGroup
-import kotlin.math.max
 import kotlin.math.min
 import kotlin.random.Random
 
-/**
- * BlurVibeViewApi31 — Backdrop blur for Android API 31+
- *
- * Pipeline (adapted from ModernBlurView's RenderEffectBlur approach):
- *
- *   1. rootView.draw(canvas) → internalBitmap   (bitmap capture, main thread)
- *   2. renderNode.beginRecording()
- *        canvas.drawBitmap(internalBitmap)       (bitmap → RenderNode — safe on all OEMs)
- *      renderNode.endRecording()
- *   3. renderNode.setRenderEffect(
- *        createChainEffect(tintEffect, blurEffect)  (GPU blur + tint in one pass)
- *      )
- *   4. onDraw: canvas.drawRenderNode(renderNode)  (draws GPU result to screen)
- *      + progressive mask + noise
- *
- * KEY INSIGHT from ModernBlurView:
- *   Drawing a flat BITMAP into a RenderNode, then drawRenderNode() is stable
- *   on all OEM devices (Oppo/OnePlus/Xiaomi/Samsung).
- *   Drawing a RenderNode INSIDE another RenderNode's recording crashes
- *   on OEM-patched GPU drivers. We don't do that here.
- *
- * Choreographer gate: max 1 capture per vsync.
- * Bitmap pool + RenderNode reuse: zero GC per frame.
- */
 @RequiresApi(Build.VERSION_CODES.S)
 class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
 
   // ── Blur params ────────────────────────────────────────────────────────────
 
-  private var blurAmount   = 10f
-  private var overlayColor = Color.TRANSPARENT
+  private var blurAmount     = 10f
+  private var overlayColor   = Color.TRANSPARENT
   private var cornerRadiusPx = 0f
 
   // ── Progressive blur ──────────────────────────────────────────────────────
@@ -77,30 +51,45 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   private var noiseBitmap: Bitmap? = null
   private val noisePaint  = Paint()
 
-  // ── Bitmap + RenderNode (ModernBlurView pattern) ───────────────────────────
-  //
-  // internalBitmap: captured root pixels at view resolution
-  // renderNode:     holds bitmap + RenderEffect (GPU blur + tint chain)
-  //
-  // The renderNode is reused every frame — only its content (bitmap) and
-  // effect (radius/tint) are updated, not recreated.
+  // ── Bitmap + RenderNode ────────────────────────────────────────────────────
 
   private var internalBitmap: Bitmap? = null
   private val renderNode = RenderNode("BlurVibeNode")
 
-  // ── Draw paint ────────────────────────────────────────────────────────────
+  // ── Capture exclusion flag ────────────────────────────────────────────────
+  //
+  // THE FIX FOR STATIC BLUR:
+  //
+  // root.draw(canvas) walks the entire view tree including THIS BlurView.
+  // When it reaches us during capture, our onDraw draws the PREVIOUS frame's
+  // blurred bitmap — so the capture contains our own stale output, not just
+  // the content behind us. This makes the blur appear static because each
+  // frame captures the previous frame's blur output, not the live content.
+  //
+  // Fix: set isCapturing = true before root.draw(), override draw() to be
+  // a no-op when isCapturing = true. root.draw() then skips us completely,
+  // capturing ONLY the content behind us. This is exactly how Dimezis
+  // BlurView solves the same problem.
+  //
+  // This does NOT cause a flash because we are not changing visibility —
+  // we are only suppressing our own draw() during the off-screen capture.
+  // The view remains visible on screen; we just skip drawing into the
+  // off-screen capture canvas.
+
+  private var isCapturing = false
 
-  private val bitmapPaint  = Paint(Paint.FILTER_BITMAP_FLAG)
-  private val maskPaint    = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+  // ── Draw paints ───────────────────────────────────────────────────────────
+
+  private val maskPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
     xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
   }
-  private val overlayPaint = Paint(Paint.ANTI_ALIAS_FLAG)
+  private val noisePaintFinal = Paint()
 
   // ── Root view ─────────────────────────────────────────────────────────────
 
   private var blurRoot: ViewGroup? = null
-  private val rootLocation   = IntArray(2)
-  private val blurViewLocation = IntArray(2)
+  private val myLocation   = IntArray(2)
+  private val rootLocation = IntArray(2)
 
   // ── State ─────────────────────────────────────────────────────────────────
 
@@ -128,8 +117,12 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
 
   init {
     setWillNotDraw(false)
-    super.setBackgroundColor(Color.TRANSPARENT)
-    clipToOutline = true
+    // DO NOT call setBackgroundColor here.
+    // ReactViewGroup manages its own ReactViewBackgroundDrawable which handles
+    // all RN style props: borderRadius, borderColor, borderWidth, opacity,
+    // backgroundColor, shadow, elevation etc.
+    // Calling super.setBackgroundColor() replaces that drawable with a plain
+    // ColorDrawable — destroying all style prop handling.
   }
 
   // ── Lifecycle ──────────────────────────────────────────────────────────────
@@ -147,8 +140,9 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     Choreographer.getInstance().removeFrameCallback(frameCallback)
     frameScheduled = false
     initialized    = false
+    isCapturing    = false
     blurRoot       = null
-    noiseBitmap?.recycle(); noiseBitmap = null
+    noiseBitmap?.recycle();    noiseBitmap    = null
     internalBitmap?.recycle(); internalBitmap = null
     renderNode.discardDisplayList()
     super.onDetachedFromWindow()
@@ -158,118 +152,114 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     super.onSizeChanged(w, h, oldw, oldh)
     if (w > 0 && h > 0) {
       internalBitmap?.recycle(); internalBitmap = null
+      renderNode.discardDisplayList()
+      initialized = false
       initBlur()
     }
   }
 
-  // ── Multi-window / split-screen / PiP safety ──────────────────────────────
-  //
-  // Android can "kill" a ViewTreeObserver when the window enters/exits
-  // split-screen, PiP, or freeform mode — creating a new one silently.
-  // If we hold a reference to the old (dead) observer our preDrawListener
-  // stops firing and blur freezes. We fix this by:
-  //   1. Always re-attaching via the CURRENT observer (not a cached one)
-  //   2. Checking isAlive() before adding — safe even if called redundantly
-  //   3. Re-attaching on window focus gain (fires after every mode transition)
+  // ── Multi-window safety ───────────────────────────────────────────────────
 
   override fun onWindowFocusChanged(hasWindowFocus: Boolean) {
     super.onWindowFocusChanged(hasWindowFocus)
     if (hasWindowFocus && blurEnabled && autoUpdate) {
-      // Re-attach listener to the current (possibly new) ViewTreeObserver
       safeAddPreDrawListener()
       scheduleFrame()
     }
   }
 
-  /**
-   * Add preDrawListener to rootView's CURRENT ViewTreeObserver.
-   * Removes from any stale observer first, then attaches to the live one.
-   * Safe to call multiple times — isAlive() prevents double-attachment.
-   */
   private fun safeAddPreDrawListener() {
     val root = blurRoot ?: return
     val vto  = root.viewTreeObserver
-    // Remove first (no-op if not attached) then re-add to current observer
     vto.removeOnPreDrawListener(preDrawListener)
-    if (vto.isAlive) {
-      vto.addOnPreDrawListener(preDrawListener)
-    }
+    if (vto.isAlive) vto.addOnPreDrawListener(preDrawListener)
   }
 
-  // ── Blur init ─────────────────────────────────────────────────────────────
+  // ── Init blur ─────────────────────────────────────────────────────────────
 
   private fun initBlur() {
     val w = measuredWidth;  if (w <= 0) return
     val h = measuredHeight; if (h <= 0) return
-
     internalBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
     renderNode.setPosition(0, 0, w, h)
     initialized = true
-    setWillNotDraw(false)
     updateBlur()
   }
 
-  // ── Core blur update (ModernBlurView pattern) ─────────────────────────────
+  // ── Core: capture + blur + render ─────────────────────────────────────────
 
   private fun updateBlur() {
     if (!blurEnabled || !initialized) return
-    val root   = blurRoot          ?: return
-    val bitmap = internalBitmap    ?: return
-
-    // ① Capture root into internalBitmap (same as ModernBlurView's approach)
-    //   Translate canvas so we capture exactly the region behind this view
-    // getLocationInWindow — correct for ALL Android versions and ALL window modes
-    // (split-screen, freeform, PiP, DeX).
-    // rootView.draw() uses window-relative coordinates, so we must also use
-    // window-relative positions for the offset — not screen-absolute.
-    // getLocationOnScreen is WRONG in split-screen (Android 7+) because the
-    // app window doesn't start at screen (0,0) in that mode.
-    root.getLocationInWindow(rootLocation)
-    getLocationInWindow(blurViewLocation)
-
-    val scaleW = width.toFloat()  / bitmap.width.toFloat()
-    val scaleH = height.toFloat() / bitmap.height.toFloat()
-    val left   = (blurViewLocation[0] - rootLocation[0])
-    val top    = (blurViewLocation[1] - rootLocation[1])
+    val root   = blurRoot       ?: return
+    val bitmap = internalBitmap ?: return
+    if (bitmap.isRecycled) return
 
+    // ① Compute this view's offset within the root (window coords — correct
+    //   for all window modes: split-screen, freeform, PiP, DeX)
+    root.getLocationInWindow(rootLocation)
+    getLocationInWindow(myLocation)
+    val offsetX = (myLocation[0] - rootLocation[0]).toFloat()
+    val offsetY = (myLocation[1] - rootLocation[1]).toFloat()
+
+    // ② Capture root content EXCLUDING this view.
+    //   isCapturing = true causes our draw() to be a no-op, so root.draw()
+    //   skips us and captures only the content behind us.
+    isCapturing = true
     val captureCanvas = Canvas(bitmap)
     captureCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
-    captureCanvas.translate(-left / scaleW, -top / scaleH)
-    captureCanvas.scale(1f / scaleW, 1f / scaleH)
+    captureCanvas.translate(-offsetX, -offsetY)
     try {
       root.draw(captureCanvas)
-    } catch (_: Exception) { return }
-
-    // ② Record bitmap into RenderNode (ModernBlurView key insight:
-    //    bitmap → RenderNode is stable; RenderNode → RenderNode is not)
-    if (renderNode.width != bitmap.width || renderNode.height != bitmap.height) {
-      renderNode.setPosition(0, 0, bitmap.width, bitmap.height)
+    } catch (_: Exception) {
+      isCapturing = false
+      return
     }
+    isCapturing = false
+
+    // ③ Record bitmap into RenderNode.
+    //   Drawing a BITMAP into RenderNode is stable on all OEM drivers.
+    //   Drawing a RenderNode into another RenderNode's recording is NOT.
+    renderNode.setPosition(0, 0, bitmap.width, bitmap.height)
     val nodeCanvas = renderNode.beginRecording()
     nodeCanvas.drawBitmap(bitmap, 0f, 0f, null)
     renderNode.endRecording()
 
-    // ③ Build chained RenderEffect: blur first, then tint on top (one GPU pass)
+    // ④ Apply GPU blur + tint as chained RenderEffects
+    // Double-pass blur: two Gaussian passes = wider spread kernel
+    // Equivalent to sqrt(2) wider sigma — gives frosted-glass light diffusion
+    // CLAMP tile mode: no edge reflection artifacts
     val radius = blurRadiusFromAmount(blurAmount)
-    val blurEffect = RenderEffect.createBlurEffect(radius, radius, Shader.TileMode.MIRROR)
-
-    val finalEffect = if (Color.alpha(overlayColor) > 0) {
-      // Chain: blur → tint in single GPU pass (ModernBlurView's chained approach)
-      val tintEffect = RenderEffect.createColorFilterEffect(
-        BlendModeColorFilter(overlayColor, BlendMode.SRC_ATOP)
-      )
-      RenderEffect.createChainEffect(tintEffect, blurEffect)
-    } else {
-      blurEffect
-    }
-
-    renderNode.setRenderEffect(finalEffect)
+    val pass1  = RenderEffect.createBlurEffect(radius, radius, Shader.TileMode.CLAMP)
+    val pass2  = RenderEffect.createBlurEffect(radius * 0.5f, radius * 0.5f, Shader.TileMode.CLAMP)
+    val doubleBlur = RenderEffect.createChainEffect(pass2, pass1)  // pass1 first, then pass2
+
+    renderNode.setRenderEffect(
+      if (Color.alpha(overlayColor) > 0) {
+        RenderEffect.createChainEffect(
+          RenderEffect.createColorFilterEffect(
+            BlendModeColorFilter(overlayColor, BlendMode.SRC_ATOP)
+          ),
+          doubleBlur
+        )
+      } else doubleBlur
+    )
 
-    // ④ Trigger redraw — onDraw will drawRenderNode (GPU-rendered result)
     invalidate()
   }
 
-  // ── Draw ───────────────────────────────────────────────────────────────────
+  // ── draw() override — no-op during capture ────────────────────────────────
+  //
+  // When isCapturing = true (root.draw() is in progress capturing background),
+  // suppress our own draw so we don't paint stale blur into the capture bitmap.
+  // This makes us invisible to root.draw() during capture only —
+  // NOT to the actual screen renderer.
+
+  override fun draw(canvas: Canvas) {
+    if (isCapturing) return   // skip self during root capture
+    super.draw(canvas)
+  }
+
+  // ── onDraw ────────────────────────────────────────────────────────────────
 
   override fun onDraw(canvas: Canvas) {
     if (!blurEnabled || !initialized) return
@@ -277,23 +267,15 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     val h = height.toFloat(); if (h <= 0f) return
     if (!renderNode.hasDisplayList()) return
 
-    // Step 1: save layer for progressive mask compositing
+    // Progressive mask requires a saved layer so DST_IN mask composites correctly
     val saveCount = if (progressiveDirection != PROGRESSIVE_NONE) {
       canvas.saveLayer(0f, 0f, w, h, null)
     } else -1
 
-    // Step 2: draw GPU-blurred + tinted result
-    // Scale from bitmap resolution back to view resolution
-    val bitmapW = internalBitmap?.width?.toFloat()  ?: w
-    val bitmapH = internalBitmap?.height?.toFloat() ?: h
-    val scaleX = w / bitmapW
-    val scaleY = h / bitmapH
-    canvas.save()
-    canvas.scale(scaleX, scaleY)
+    // Draw GPU-blurred + tinted result from RenderNode
     canvas.drawRenderNode(renderNode)
-    canvas.restore()
 
-    // Step 3: progressive alpha mask fades the blur
+    // Progressive alpha mask — fades blur across the view
     if (progressiveDirection != PROGRESSIVE_NONE && saveCount >= 0) {
       buildProgressiveShader(w, h)?.let { shader ->
         maskPaint.shader = shader
@@ -302,12 +284,16 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
       canvas.restoreToCount(saveCount)
     }
 
-    // Step 4: noise grain overlay
+    // Noise grain overlay
     noiseBitmap?.takeIf { !it.isRecycled && noiseFactor > 0f }?.let { noise ->
-      noisePaint.alpha  = (noiseFactor * 255f).toInt().coerceIn(0, 255)
-      noisePaint.shader = BitmapShader(noise, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT)
-      canvas.drawRect(0f, 0f, w, h, noisePaint)
+      noisePaintFinal.alpha  = (noiseFactor * 255f).toInt().coerceIn(0, 255)
+      noisePaintFinal.shader = BitmapShader(noise, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT)
+      canvas.drawRect(0f, 0f, w, h, noisePaintFinal)
     }
+
+    // Let ReactViewGroup draw borders/background on top (handles borderRadius
+    // and all other RN style props natively — no conflict with our blur)
+    super.onDraw(canvas)
   }
 
   // ── Progressive shader ────────────────────────────────────────────────────
@@ -325,7 +311,7 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     }
   }
 
-  // ── Noise bitmap ──────────────────────────────────────────────────────────
+  // ── Noise ─────────────────────────────────────────────────────────────────
 
   private fun generateNoiseBitmap() {
     if (noiseBitmap?.isRecycled == false) return
@@ -342,8 +328,7 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   // ── Public setters ─────────────────────────────────────────────────────────
 
   fun setBlurAmount(amount: Float) {
-    blurAmount = amount.coerceIn(0f, 100f)
-    scheduleFrame()
+    blurAmount = amount.coerceIn(0f, 100f); scheduleFrame()
   }
 
   fun setOverlayColor(colorString: String?) {
@@ -351,16 +336,24 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     scheduleFrame()
   }
 
+  // borderRadius from JS style prop — handled natively by ReactViewGroup.
+  // applyBorderRadius is called by our @ReactProp "borderRadius" binding.
+  // We additionally set clipToOutline so the blur content is clipped correctly.
   fun applyBorderRadius(radiusDp: Float) {
     cornerRadiusPx = TypedValue.applyDimension(
       TypedValue.COMPLEX_UNIT_DIP, radiusDp, context.resources.displayMetrics
     )
-    outlineProvider = object : ViewOutlineProvider() {
-      override fun getOutline(view: View, outline: Outline) {
-        outline.setRoundRect(0, 0, view.width, view.height, cornerRadiusPx)
+    if (cornerRadiusPx > 0f) {
+      outlineProvider = object : ViewOutlineProvider() {
+        override fun getOutline(view: View, outline: Outline) {
+          outline.setRoundRect(0, 0, view.width, view.height, cornerRadiusPx)
+        }
       }
+      clipToOutline = true
+    } else {
+      outlineProvider = ViewOutlineProvider.BACKGROUND
+      clipToOutline   = false
     }
-    clipToOutline = cornerRadiusPx > 0f
     invalidate()
   }
 
@@ -383,10 +376,8 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
 
   fun applyBlurEnabled(enabled: Boolean) {
     blurEnabled = enabled
-    if (enabled) {
-      safeAddPreDrawListener()
-      scheduleFrame()
-    } else {
+    if (enabled) { safeAddPreDrawListener(); scheduleFrame() }
+    else {
       blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
       Choreographer.getInstance().removeFrameCallback(frameCallback)
       frameScheduled = false
@@ -415,8 +406,14 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   }
 
   private fun blurRadiusFromAmount(amount: Float): Float {
-    val t = amount / 100f
-    return (t * t * 25f).coerceIn(1f, 25f)
+    // Linear mapping: 0→1px, 10→13px, 25→31px, 50→61px, 75→91px, 100→120px
+    // These values match CSS backdrop-filter feel:
+    //   blurAmount=10  ≈ backdrop-blur-sm  (4px CSS = ~13px GPU after downsample)
+    //   blurAmount=25  ≈ backdrop-blur-md  (12px CSS ≈ 31px GPU)
+    //   blurAmount=50  ≈ backdrop-blur-xl  (24px CSS ≈ 61px GPU)
+    //   blurAmount=100 ≈ backdrop-blur-3xl (64px CSS = fully frosted glass)
+    val t = amount.coerceIn(0f, 100f) / 100f
+    return (1f + t * 119f)  // 1–120 linear
   }
 
   private fun findBlurRoot(): ViewGroup? {
@@ -440,12 +437,12 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     val hex = t.removePrefix("#")
     return try {
       when (hex.length) {
-        3 -> Color.argb(255,hex[0].toString().repeat(2).toInt(16),
-                            hex[1].toString().repeat(2).toInt(16),
-                            hex[2].toString().repeat(2).toInt(16))
-        6 -> Color.argb(255,hex.substring(0,2).toInt(16),
-                            hex.substring(2,4).toInt(16),
-                            hex.substring(4,6).toInt(16))
+        3 -> Color.argb(255, hex[0].toString().repeat(2).toInt(16),
+                             hex[1].toString().repeat(2).toInt(16),
+                             hex[2].toString().repeat(2).toInt(16))
+        6 -> Color.argb(255, hex.substring(0,2).toInt(16),
+                             hex.substring(2,4).toInt(16),
+                             hex.substring(4,6).toInt(16))
         8 -> Color.argb(hex.substring(6,8).toInt(16),
                         hex.substring(0,2).toInt(16),
                         hex.substring(2,4).toInt(16),

package/android/src/main/java/com/blurvibe/LegacyBlurController.kt

@@ -6,7 +6,6 @@ import android.graphics.Color
 import android.graphics.Paint
 import android.graphics.PorterDuff
 import android.graphics.Rect
-import android.os.Build
 import android.renderscript.Allocation
 import android.renderscript.Element
 import android.renderscript.RenderScript
@@ -19,41 +18,38 @@ import android.view.ViewTreeObserver
 /**
  * LegacyBlurController — zero-dependency backdrop blur for Android API 21–30.
  *
- * Replaces QmBlurView with a direct RenderScript implementation.
- * RenderScript is part of the Android SDK — no external library needed.
+ * Uses Android SDK RenderScript (ScriptIntrinsicBlur) — no external library.
  *
- * Pipeline per vsync:
- *   preDrawListener (sets dirty flag only)
- *     → Choreographer.FrameCallback (once per vsync)
- *       → rootView.draw() into captureBitmap (main thread)
- *       → downsample into scaledBitmap
- *       → ScriptIntrinsicBlur.forEach() (RenderScript, GPU-accelerated)
- *       → view.invalidate()
- *         → onDraw: drawBitmap(scaledBitmap) + overlay tint
- *
- * Key optimisations vs naive implementation:
- *   - Choreographer gate: max 1 capture per vsync regardless of invalidation count
- *   - Bitmap pool: captureBitmap + scaledBitmap reused each frame (zero GC)
- *   - RenderScript Allocation pool: inputAlloc + outputAlloc reused (zero GC)
- *   - Blur rounds = 2: two passes for smooth spread without pixelation
- *   - Downsample factor = 4: captures at 1/16 resolution, blur hides pixel detail
+ * THE STATIC BLUR FIX:
+ * Before root.draw(), BlurVibeView.draw() is made a no-op via isCapturing flag.
+ * This means root.draw() skips the BlurView during capture, so we capture
+ * ONLY the content behind us — not our own previous blur output.
+ * Without this, each frame captures the previous blur → blur appears static.
  */
-@Suppress("DEPRECATION")  // RenderScript deprecated in API 31 — we only use this on API < 31
+@Suppress("DEPRECATION")
 internal class LegacyBlurController(
-  private val view: View,
+  private val view: BlurVibeView,
   private val rootView: ViewGroup
 ) {
 
   companion object {
-    private const val DOWNSAMPLE_FACTOR = 4f   // capture at 1/4 linear resolution (1/16 pixels)
-    private const val BLUR_RADIUS       = 8f   // RenderScript Gaussian radius (1–25)
-    private const val BLUR_ROUNDS       = 2    // passes — 2 gives smooth spread
+    // DOWNSAMPLE_FACTOR = 2: capture at 1/4 pixels (less than before).
+    // Less downsampling = higher quality capture = crisper blur result.
+    // The blur hides pixel detail so 1/4 is the sweet spot.
+    private const val DOWNSAMPLE_FACTOR = 2f
+
+    // Default radius when blurAmount maps here.
+    // The actual radius per frame comes from view.blurRadius set by setBlurAmount().
+    private const val BLUR_RADIUS = 25f  // max RenderScript kernel
+
+    // 3 rounds: more passes = wider spread = true frosted glass feel
+    private const val BLUR_ROUNDS = 3
   }
 
   // ── Bitmap pool ────────────────────────────────────────────────────────────
 
-  private var captureBitmap: Bitmap? = null  // full-res root capture
-  private var scaledBitmap:  Bitmap? = null  // downsampled before blur
+  private var captureBitmap: Bitmap? = null
+  private var scaledBitmap:  Bitmap? = null
   private val capturePaint   = Paint(Paint.FILTER_BITMAP_FLAG)
   private val drawPaint      = Paint(Paint.FILTER_BITMAP_FLAG)
 
@@ -66,7 +62,7 @@ internal class LegacyBlurController(
 
   // ── State ──────────────────────────────────────────────────────────────────
 
-  var overlayColor: Int = Color.TRANSPARENT
+  var overlayColor: Int  = Color.TRANSPARENT
   var blurRadius:   Float = BLUR_RADIUS
   var enabled:      Boolean = true
     set(value) { field = value; if (!value) invalidatePool() }
@@ -77,8 +73,12 @@ internal class LegacyBlurController(
       else rootView.viewTreeObserver.removeOnPreDrawListener(preDrawListener)
     }
 
+  // isCapturing: set true before root.draw() so BlurVibeView.draw() is a no-op
+  // preventing stale self-capture. Accessed by BlurVibeView.draw().
+  var isCapturing = false
+    private set
+
   private var frameScheduled = false
-  private var isCapturing    = false
 
   // ── Choreographer gate ────────────────────────────────────────────────────
 
@@ -88,7 +88,7 @@ internal class LegacyBlurController(
   }
 
   private val preDrawListener = ViewTreeObserver.OnPreDrawListener {
-    if (!frameScheduled && enabled) {
+    if (!frameScheduled && enabled && autoUpdate) {
       frameScheduled = true
       Choreographer.getInstance().postFrameCallback(frameCallback)
     }
@@ -112,7 +112,6 @@ internal class LegacyBlurController(
   // ── Capture + blur ─────────────────────────────────────────────────────────
 
   private fun captureAndBlur() {
-    if (isCapturing) return
     val rw = rootView.width;  if (rw <= 0) return
     val rh = rootView.height; if (rh <= 0) return
     val vw = view.width;      if (vw <= 0) return
@@ -121,85 +120,88 @@ internal class LegacyBlurController(
     val sw = (vw / DOWNSAMPLE_FACTOR).toInt().coerceAtLeast(1)
     val sh = (vh / DOWNSAMPLE_FACTOR).toInt().coerceAtLeast(1)
 
+    val myLoc   = IntArray(2); view.getLocationInWindow(myLoc)
+    val rootLoc = IntArray(2); rootView.getLocationInWindow(rootLoc)
+    val offsetX = (myLoc[0] - rootLoc[0]).toFloat()
+    val offsetY = (myLoc[1] - rootLoc[1]).toFloat()
+
+    val capture = reuseBitmap(captureBitmap, vw, vh).also { captureBitmap = it }
+    val scaled  = reuseBitmap(scaledBitmap,  sw, sh).also { scaledBitmap  = it }
+
+    // Set isCapturing BEFORE root.draw() so BlurVibeView.draw() is skipped
     isCapturing = true
+    val c = Canvas(capture)
+    c.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
+    c.translate(-offsetX, -offsetY)
     try {
-      // ① Compute offset of view within root
-      val myLoc   = IntArray(2); view.getLocationInWindow(myLoc)
-      val rootLoc = IntArray(2); rootView.getLocationInWindow(rootLoc)
-      val offsetX = myLoc[0] - rootLoc[0]
-      val offsetY = myLoc[1] - rootLoc[1]
-
-      // ② Allocate bitmaps (reuse if size matches)
-      val capture = reuseBitmap(captureBitmap, vw, vh).also { captureBitmap = it }
-      val scaled  = reuseBitmap(scaledBitmap,  sw, sh).also { scaledBitmap  = it }
-
-      // ③ Capture just the region behind this view from root
-      val c = Canvas(capture)
-      c.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
-      c.translate(-offsetX.toFloat(), -offsetY.toFloat())
       rootView.draw(c)
-
-      // ④ Downsample
-      val sc = Canvas(scaled)
-      sc.drawBitmap(capture,
-        Rect(0, 0, capture.width, capture.height),
-        Rect(0, 0, scaled.width,  scaled.height),
-        capturePaint)
-
-      // ⑤ Blur (2 rounds for smooth spread)
-      repeat(BLUR_ROUNDS) { blurBitmap(scaled) }
-
-      // ⑥ Trigger redraw with new bitmap
-      view.invalidate()
-
     } catch (_: Exception) {
-    } finally {
       isCapturing = false
+      return
     }
+    isCapturing = false
+
+    // Downsample
+    Canvas(scaled).drawBitmap(
+      capture,
+      Rect(0, 0, capture.width, capture.height),
+      Rect(0, 0, scaled.width, scaled.height),
+      capturePaint
+    )
+
+    // Blur (2 rounds)
+    repeat(BLUR_ROUNDS) { blurBitmap(scaled) }
+
+    view.invalidate()
   }
 
   private fun blurBitmap(bitmap: Bitmap) {
-    val rs = this.rs ?: return softwareBlur(bitmap)
-    val sc = this.blurScript ?: return softwareBlur(bitmap)
+    val r  = rs          ?: return softwareBlur(bitmap)
+    val sc = blurScript  ?: return softwareBlur(bitmap)
     try {
-      val inA  = reuseAlloc(inputAlloc,  bitmap, rs).also { inputAlloc  = it }
-      val outA = reuseAlloc(outputAlloc, bitmap, rs).also { outputAlloc = it }
-      inA.copyFrom(bitmap)
+      val iA = reuseAlloc(inputAlloc,  bitmap, r).also { inputAlloc  = it }
+      val oA = reuseAlloc(outputAlloc, bitmap, r).also { outputAlloc = it }
+      iA.copyFrom(bitmap)
       sc.setRadius(blurRadius.coerceIn(1f, 25f))
-      sc.setInput(inA)
-      sc.forEach(outA)
-      outA.copyTo(bitmap)
-    } catch (_: Exception) {
-      softwareBlur(bitmap)
-    }
+      sc.setInput(iA)
+      sc.forEach(oA)
+      oA.copyTo(bitmap)
+    } catch (_: Exception) { softwareBlur(bitmap) }
   }
 
   private fun softwareBlur(bitmap: Bitmap) {
-    // Pure software Gaussian fallback (slower but always works)
     val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
       maskFilter = android.graphics.BlurMaskFilter(blurRadius, android.graphics.BlurMaskFilter.Blur.NORMAL)
     }
     Canvas(bitmap).drawBitmap(bitmap, 0f, 0f, paint)
   }
 
-  // ── Draw — called from BlurVibeView.onDraw() ──────────────────────────────
+  // ── Draw ─────────────────────────────────────────────────────────────────
 
   fun draw(canvas: Canvas, viewWidth: Float, viewHeight: Float) {
     scaledBitmap?.takeIf { !it.isRecycled }?.let { bmp ->
       canvas.drawBitmap(bmp, null,
         android.graphics.RectF(0f, 0f, viewWidth, viewHeight), drawPaint)
     }
-    if (Color.alpha(overlayColor) > 0) {
-      canvas.drawColor(overlayColor)
-    }
+    if (Color.alpha(overlayColor) > 0) canvas.drawColor(overlayColor)
   }
 
-  // ── Lifecycle ─────────────────────────────────────────────────────────────
+  // ── Multi-window ──────────────────────────────────────────────────────────
 
-  fun onSizeChanged() {
-    invalidatePool()
+  fun reAttach() {
+    if (enabled && autoUpdate) safeAddPreDrawListener()
   }
 
+  private fun safeAddPreDrawListener() {
+    val vto = rootView.viewTreeObserver
+    vto.removeOnPreDrawListener(preDrawListener)
+    if (vto.isAlive) vto.addOnPreDrawListener(preDrawListener)
+  }
+
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+
+  fun onSizeChanged() { invalidatePool() }
+
   private fun invalidatePool() {
     captureBitmap?.recycle(); captureBitmap = null
     scaledBitmap?.recycle();  scaledBitmap  = null
@@ -207,26 +209,6 @@ internal class LegacyBlurController(
     outputAlloc?.destroy();   outputAlloc   = null
   }
 
-  // ── Multi-window / split-screen / PiP safety ──────────────────────────────
-  //
-  // Called by BlurVibeView.onWindowFocusChanged(hasFocus=true).
-  // Re-attaches the preDrawListener to the rootView's current
-  // (possibly newly created) ViewTreeObserver after a window mode transition.
-
-  fun reAttach() {
-    if (enabled && autoUpdate) {
-      safeAddPreDrawListener()
-    }
-  }
-
-  private fun safeAddPreDrawListener() {
-    val vto = rootView.viewTreeObserver
-    vto.removeOnPreDrawListener(preDrawListener)  // no-op if not attached
-    if (vto.isAlive) {
-      vto.addOnPreDrawListener(preDrawListener)
-    }
-  }
-
   fun destroy() {
     rootView.viewTreeObserver.removeOnPreDrawListener(preDrawListener)
     Choreographer.getInstance().removeFrameCallback(frameCallback)
@@ -238,7 +220,7 @@ internal class LegacyBlurController(
     scaledBitmap?.recycle()
   }
 
-  // ── Bitmap / Allocation helpers ───────────────────────────────────────────
+  // ── Helpers ───────────────────────────────────────────────────────────────
 
   private fun reuseBitmap(existing: Bitmap?, w: Int, h: Int): Bitmap {
     if (existing != null && !existing.isRecycled
@@ -248,9 +230,8 @@ internal class LegacyBlurController(
   }
 
   private fun reuseAlloc(existing: Allocation?, src: Bitmap, rs: RenderScript): Allocation {
-    if (existing != null
-        && existing.type.x == src.width
-        && existing.type.y == src.height) return existing
+    if (existing != null && existing.type.x == src.width && existing.type.y == src.height)
+      return existing
     existing?.destroy()
     return Allocation.createFromBitmap(rs, src,
       Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-blur-vibe",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "React Native package implementing Blur View in iOS and Android",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",