react-native-blur-vibe 0.1.9 → 0.1.11

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
   }
 
   // ── Lifecycle ──────────────────────────────────────────────────────────────
@@ -61,10 +58,30 @@ class BlurVibeView(context: Context) : ReactViewGroup(context) {
     blurController?.onSizeChanged()
   }
 
-  // ── Draw ───────────────────────────────────────────────────────────────────
+  override fun onWindowFocusChanged(hasWindowFocus: Boolean) {
+    super.onWindowFocusChanged(hasWindowFocus)
+    if (hasWindowFocus) blurController?.reAttach()
+  }
+
+  // ── 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 ─────────────────────────────────────────────────────────
@@ -81,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
@@ -111,15 +132,13 @@ 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 {
     val t = amount.coerceIn(0f, 100f) / 100f
-    return t * t * 25f  // quadratic curve, max 25 (RenderScript kernel limit)
+    return t * t * 25f
   }
 
   private fun findBlurRoot(): ViewGroup? {

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

@@ -3,6 +3,8 @@ package com.blurvibe
 import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.BitmapShader
+import android.graphics.BlendMode
+import android.graphics.BlendModeColorFilter
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.LinearGradient
@@ -33,73 +35,78 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
 
   // ── Blur params ────────────────────────────────────────────────────────────
 
-  private var blurRadiusX    = DEFAULT_BLUR_RADIUS
-  private var blurRadiusY    = DEFAULT_BLUR_RADIUS
+  private var blurAmount     = 10f
   private var overlayColor   = Color.TRANSPARENT
   private var cornerRadiusPx = 0f
 
-  // ── Progressive blur params ────────────────────────────────────────────────
+  // ── Progressive blur ──────────────────────────────────────────────────────
 
   private var progressiveDirection      = PROGRESSIVE_NONE
   private var progressiveStartIntensity = 1f
   private var progressiveEndIntensity   = 0f
 
-  // ── Noise params ──────────────────────────────────────────────────────────
+  // ── Noise ─────────────────────────────────────────────────────────────────
 
   private var noiseFactor = 0.08f
   private var noiseBitmap: Bitmap? = null
   private val noisePaint  = Paint()
 
-  // ── RenderNodes ───────────────────────────────────────────────────────────
+  // ── Bitmap + RenderNode ────────────────────────────────────────────────────
+
+  private var internalBitmap: Bitmap? = null
+  private val renderNode = RenderNode("BlurVibeNode")
+
+  // ── Capture exclusion flag ────────────────────────────────────────────────
   //
-  // contentNode: records root-view draw commands ("what's behind me")
-  // blurNode:    crops + translates contentNode to this view's position,
-  //              with RenderEffect blur applied
+  // THE FIX FOR STATIC BLUR:
   //
-  // IMPORTANT — NO setUseCompositingLayer(true) on either node.
-  // Compositing layer on a re-recorded RenderNode causes GPU memory
-  // thrashing and SIGSEGV on some API 31 drivers.
+  // 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.
   //
-  // IMPORTANT — NO LAYER_TYPE_HARDWARE on the view itself.
-  // canvas.drawRenderNode() is only valid on a hardware-accelerated canvas
-  // that is NOT itself a hardware layer — mixing them causes SIGSEGV
-  // in RenderThread (the exact crash we saw in logcat).
-
-  private val contentNode = RenderNode("BlurVibeContent")
-  private val blurNode    = RenderNode("BlurVibeBlur")
-
-  // ── Recording guard — prevents double-beginRecording crashes ─────────────
+  // 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.
   //
-  // If captureRootIntoNode fires twice in the same frame (e.g. during
-  // layout + invalidate), a second beginRecording() on an active recording
-  // crashes the RenderThread. This flag gates it.
+  // 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
 
-  // ── Paint objects ──────────────────────────────────────────────────────────
+  // ── Draw paints ───────────────────────────────────────────────────────────
 
-  private val overlayPaint = Paint(Paint.ANTI_ALIAS_FLAG)
-  private val maskPaint    = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+  private val maskPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
     xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
   }
+  private val noisePaintFinal = Paint()
 
   // ── Root view ─────────────────────────────────────────────────────────────
 
   private var blurRoot: ViewGroup? = null
+  private val myLocation   = IntArray(2)
+  private val rootLocation = IntArray(2)
 
-  // ── Choreographer gate ────────────────────────────────────────────────────
+  // ── State ─────────────────────────────────────────────────────────────────
 
+  private var blurEnabled    = true
+  private var autoUpdate     = true
   private var frameScheduled = false
+  private var initialized    = false
+
+  // ── Choreographer gate ────────────────────────────────────────────────────
+
   private val frameCallback = Choreographer.FrameCallback {
     frameScheduled = false
-    if (isAttachedToWindow) {
-      captureRootIntoNode()
-      invalidate()
-    }
+    if (isAttachedToWindow && blurEnabled) updateBlur()
   }
 
   private val preDrawListener = ViewTreeObserver.OnPreDrawListener {
-    if (!frameScheduled) {
+    if (!frameScheduled && blurEnabled && autoUpdate) {
       frameScheduled = true
       Choreographer.getInstance().postFrameCallback(frameCallback)
     }
@@ -111,11 +118,6 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   init {
     setWillNotDraw(false)
     super.setBackgroundColor(Color.TRANSPARENT)
-    clipToOutline = true
-    // DO NOT call setLayerType(LAYER_TYPE_HARDWARE) here —
-    // it conflicts with canvas.drawRenderNode() and causes SIGSEGV in RenderThread.
-    // The view uses the default layer type (LAYER_TYPE_NONE) so its canvas is
-    // the hardware-accelerated display list canvas — which supports drawRenderNode.
   }
 
   // ── Lifecycle ──────────────────────────────────────────────────────────────
@@ -123,107 +125,146 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
     blurRoot = findBlurRoot()
-    blurRoot?.viewTreeObserver?.addOnPreDrawListener(preDrawListener)
+    safeAddPreDrawListener()
     generateNoiseBitmap()
+    if (measuredWidth > 0 && measuredHeight > 0) initBlur()
   }
 
   override fun onDetachedFromWindow() {
     blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
     Choreographer.getInstance().removeFrameCallback(frameCallback)
     frameScheduled = false
+    initialized    = false
     isCapturing    = false
     blurRoot       = null
-    noiseBitmap?.recycle()
-    noiseBitmap = null
-    // Discard RenderNode display lists to free GPU memory
-    contentNode.discardDisplayList()
-    blurNode.discardDisplayList()
+    noiseBitmap?.recycle();    noiseBitmap    = null
+    internalBitmap?.recycle(); internalBitmap = null
+    renderNode.discardDisplayList()
     super.onDetachedFromWindow()
   }
 
   override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
     super.onSizeChanged(w, h, oldw, oldh)
-    // Update blurNode bounds — contentNode bounds are set in captureRootIntoNode
     if (w > 0 && h > 0) {
-      blurNode.setPosition(0, 0, w, h)
-      applyBlurRenderEffect()
+      internalBitmap?.recycle(); internalBitmap = null
+      renderNode.discardDisplayList()
+      initialized = false
+      initBlur()
     }
   }
 
-  // ── Capture pipeline ───────────────────────────────────────────────────────
+  // ── Multi-window safety ───────────────────────────────────────────────────
 
-  private fun captureRootIntoNode() {
-    if (isCapturing) return  // guard against re-entrant / double recording crash
-    val root = blurRoot ?: return
-    val rw = root.width;  if (rw <= 0) return
-    val rh = root.height; if (rh <= 0) return
-    val vw = width;       if (vw <= 0) return
-    val vh = height;      if (vh <= 0) return
+  override fun onWindowFocusChanged(hasWindowFocus: Boolean) {
+    super.onWindowFocusChanged(hasWindowFocus)
+    if (hasWindowFocus && blurEnabled && autoUpdate) {
+      safeAddPreDrawListener()
+      scheduleFrame()
+    }
+  }
 
-    isCapturing = true
-    try {
-      // Step 1: record root-view draw into contentNode
-      contentNode.setPosition(0, 0, rw, rh)
-      val contentCanvas = contentNode.beginRecording()
-      try {
-        contentCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
-        root.draw(contentCanvas)
-      } finally {
-        contentNode.endRecording()  // always end — even if draw() throws
-      }
+  private fun safeAddPreDrawListener() {
+    val root = blurRoot ?: return
+    val vto  = root.viewTreeObserver
+    vto.removeOnPreDrawListener(preDrawListener)
+    if (vto.isAlive) vto.addOnPreDrawListener(preDrawListener)
+  }
 
-      // Step 2: contentNode recording is FINISHED before we reference it
-      // in blurNode. This is critical — drawing an actively-recording
-      // RenderNode into another canvas is undefined behaviour.
-      val myLoc   = IntArray(2); getLocationInWindow(myLoc)
-      val rootLoc = IntArray(2); root.getLocationInWindow(rootLoc)
-      val offsetX = (myLoc[0] - rootLoc[0]).toFloat()
-      val offsetY = (myLoc[1] - rootLoc[1]).toFloat()
-
-      blurNode.setPosition(0, 0, vw, vh)
-      applyBlurRenderEffect()
-
-      val blurCanvas = blurNode.beginRecording()
-      try {
-        blurCanvas.translate(-offsetX, -offsetY)
-        blurCanvas.drawRenderNode(contentNode)  // safe: contentNode recording is done
-      } finally {
-        blurNode.endRecording()
-      }
+  // ── Init blur ─────────────────────────────────────────────────────────────
 
-    } finally {
-      isCapturing = false
-    }
+  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
+    updateBlur()
   }
 
-  private fun applyBlurRenderEffect() {
-    if (blurRadiusX < 0.5f && blurRadiusY < 0.5f) {
-      blurNode.setRenderEffect(null)
+  // ── Core: capture + blur + render ─────────────────────────────────────────
+
+  private fun updateBlur() {
+    if (!blurEnabled || !initialized) return
+    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(-offsetX, -offsetY)
+    try {
+      root.draw(captureCanvas)
+    } catch (_: Exception) {
+      isCapturing = false
       return
     }
-    blurNode.setRenderEffect(
-      RenderEffect.createBlurEffect(blurRadiusX, blurRadiusY, Shader.TileMode.CLAMP)
+    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()
+
+    // ④ Apply GPU blur + tint as a chained RenderEffect (single GPU pass)
+    val radius     = blurRadiusFromAmount(blurAmount)
+    val blurEffect = RenderEffect.createBlurEffect(radius, radius, Shader.TileMode.MIRROR)
+    renderNode.setRenderEffect(
+      if (Color.alpha(overlayColor) > 0) {
+        RenderEffect.createChainEffect(
+          RenderEffect.createColorFilterEffect(
+            BlendModeColorFilter(overlayColor, BlendMode.SRC_ATOP)
+          ),
+          blurEffect
+        )
+      } else blurEffect
     )
+
+    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
     val w = width.toFloat();  if (w <= 0f) return
     val h = height.toFloat(); if (h <= 0f) return
+    if (!renderNode.hasDisplayList()) return
 
-    // Guard: only draw if blurNode has a valid recorded display list
-    if (!blurNode.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 the blurred backdrop
-    canvas.drawRenderNode(blurNode)
+    // Draw GPU-blurred + tinted result from RenderNode
+    canvas.drawRenderNode(renderNode)
 
-    // Step 3: progressive alpha mask
+    // Progressive alpha mask — fades blur across the view
     if (progressiveDirection != PROGRESSIVE_NONE && saveCount >= 0) {
       buildProgressiveShader(w, h)?.let { shader ->
         maskPaint.shader = shader
@@ -232,53 +273,43 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
       canvas.restoreToCount(saveCount)
     }
 
-    // Step 4: overlay tint
-    if (Color.alpha(overlayColor) > 0) {
-      overlayPaint.color = overlayColor
-      if (cornerRadiusPx > 0f) {
-        canvas.drawRoundRect(RectF(0f, 0f, w, h), cornerRadiusPx, cornerRadiusPx, overlayPaint)
-      } else {
-        canvas.drawRect(0f, 0f, w, h, overlayPaint)
-      }
+    // Noise grain overlay
+    noiseBitmap?.takeIf { !it.isRecycled && noiseFactor > 0f }?.let { noise ->
+      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)
     }
 
-    // Step 5: noise grain
-    noiseBitmap?.takeIf { !it.isRecycled }?.let { bmp ->
-      if (noiseFactor > 0f) {
-        noisePaint.alpha  = (noiseFactor * 255f).toInt().coerceIn(0, 255)
-        noisePaint.shader = BitmapShader(bmp, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT)
-        canvas.drawRect(0f, 0f, w, h, noisePaint)
-      }
-    }
+    // 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 ────────────────────────────────────────────────────
 
   private fun buildProgressiveShader(w: Float, h: Float): Shader? {
-    val startColor = Color.argb((progressiveStartIntensity.coerceIn(0f,1f) * 255).toInt(), 0,0,0)
-    val endColor   = Color.argb((progressiveEndIntensity.coerceIn(0f,1f)   * 255).toInt(), 0,0,0)
+    val sc = Color.argb((progressiveStartIntensity.coerceIn(0f,1f)*255).toInt(),0,0,0)
+    val ec = Color.argb((progressiveEndIntensity.coerceIn(0f,1f)*255).toInt(),0,0,0)
     return when (progressiveDirection) {
-      PROGRESSIVE_TOP_TO_BOTTOM -> LinearGradient(0f,0f,0f,h, startColor,endColor, Shader.TileMode.CLAMP)
-      PROGRESSIVE_BOTTOM_TO_TOP -> LinearGradient(0f,h,0f,0f, startColor,endColor, Shader.TileMode.CLAMP)
-      PROGRESSIVE_LEFT_TO_RIGHT -> LinearGradient(0f,0f,w,0f, startColor,endColor, Shader.TileMode.CLAMP)
-      PROGRESSIVE_RIGHT_TO_LEFT -> LinearGradient(w,0f,0f,0f, startColor,endColor, Shader.TileMode.CLAMP)
-      PROGRESSIVE_RADIAL        -> RadialGradient(w/2f,h/2f, min(w,h)/2f, startColor,endColor, Shader.TileMode.CLAMP)
-      else                      -> null
+      PROGRESSIVE_TOP_TO_BOTTOM -> LinearGradient(0f,0f,0f,h,sc,ec,Shader.TileMode.CLAMP)
+      PROGRESSIVE_BOTTOM_TO_TOP -> LinearGradient(0f,h,0f,0f,sc,ec,Shader.TileMode.CLAMP)
+      PROGRESSIVE_LEFT_TO_RIGHT -> LinearGradient(0f,0f,w,0f,sc,ec,Shader.TileMode.CLAMP)
+      PROGRESSIVE_RIGHT_TO_LEFT -> LinearGradient(w,0f,0f,0f,sc,ec,Shader.TileMode.CLAMP)
+      PROGRESSIVE_RADIAL        -> RadialGradient(w/2f,h/2f,min(w,h)/2f,sc,ec,Shader.TileMode.CLAMP)
+      else -> null
     }
   }
 
-  // ── Noise bitmap ──────────────────────────────────────────────────────────
+  // ── Noise ─────────────────────────────────────────────────────────────────
 
   private fun generateNoiseBitmap() {
     if (noiseBitmap?.isRecycled == false) return
     val size = 64
     val bmp  = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)
     val rng  = Random(42)
-    for (x in 0 until size) {
-      for (y in 0 until size) {
-        val v = rng.nextInt(256)
-        bmp.setPixel(x, y, Color.argb(255, v, v, v))
-      }
+    for (x in 0 until size) for (y in 0 until size) {
+      val v = rng.nextInt(256)
+      bmp.setPixel(x, y, Color.argb(255, v, v, v))
     }
     noiseBitmap = bmp
   }
@@ -286,75 +317,68 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   // ── Public setters ─────────────────────────────────────────────────────────
 
   fun setBlurAmount(amount: Float) {
-    val t = amount.coerceIn(0f, 100f) / 100f
-    blurRadiusX = t * t * MAX_BLUR_RADIUS
-    blurRadiusY = blurRadiusX
-    applyBlurRenderEffect()
-    scheduleFrame()
+    blurAmount = amount.coerceIn(0f, 100f); scheduleFrame()
   }
 
   fun setOverlayColor(colorString: String?) {
     overlayColor = parseHexColor(colorString ?: "transparent") ?: Color.TRANSPARENT
-    invalidate()
+    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()
   }
 
-  fun setReducedTransparencyFallbackColor(@Suppress("UNUSED_PARAMETER") color: String?) { }
+  fun setReducedTransparencyFallbackColor(@Suppress("UNUSED_PARAMETER") c: String?) {}
 
-  fun setProgressiveBlurDirection(direction: String?) {
-    progressiveDirection = when (direction) {
+  fun setProgressiveBlurDirection(d: String?) {
+    progressiveDirection = when (d) {
       "topToBottom" -> PROGRESSIVE_TOP_TO_BOTTOM
       "bottomToTop" -> PROGRESSIVE_BOTTOM_TO_TOP
       "leftToRight" -> PROGRESSIVE_LEFT_TO_RIGHT
       "rightToLeft" -> PROGRESSIVE_RIGHT_TO_LEFT
       "radial"      -> PROGRESSIVE_RADIAL
       else          -> PROGRESSIVE_NONE
-    }
-    invalidate()
+    }; invalidate()
   }
 
-  fun setProgressiveStartIntensity(intensity: Float) {
-    progressiveStartIntensity = intensity.coerceIn(0f, 1f); invalidate()
-  }
-
-  fun setProgressiveEndIntensity(intensity: Float) {
-    progressiveEndIntensity = intensity.coerceIn(0f, 1f); invalidate()
-  }
-
-  fun setNoiseFactor(factor: Float) {
-    noiseFactor = factor.coerceIn(0f, 1f); invalidate()
-  }
+  fun setProgressiveStartIntensity(v: Float) { progressiveStartIntensity = v.coerceIn(0f,1f); invalidate() }
+  fun setProgressiveEndIntensity(v: Float)   { progressiveEndIntensity   = v.coerceIn(0f,1f); invalidate() }
+  fun setNoiseFactor(v: Float)               { noiseFactor = v.coerceIn(0f,1f); invalidate() }
 
   fun applyBlurEnabled(enabled: Boolean) {
-    if (!enabled) {
+    blurEnabled = enabled
+    if (enabled) { safeAddPreDrawListener(); scheduleFrame() }
+    else {
       blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
       Choreographer.getInstance().removeFrameCallback(frameCallback)
       frameScheduled = false
-      blurNode.discardDisplayList()
-      contentNode.discardDisplayList()
+      renderNode.discardDisplayList()
       invalidate()
-    } else {
-      blurRoot?.viewTreeObserver?.addOnPreDrawListener(preDrawListener)
-      scheduleFrame()
     }
   }
 
-  fun setAutoUpdate(autoUpdate: Boolean) {
-    if (autoUpdate) {
-      blurRoot?.viewTreeObserver?.addOnPreDrawListener(preDrawListener)
-    } else {
+  fun setAutoUpdate(update: Boolean) {
+    autoUpdate = update
+    if (update) safeAddPreDrawListener()
+    else {
       blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
       Choreographer.getInstance().removeFrameCallback(frameCallback)
       frameScheduled = false
@@ -364,12 +388,15 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   // ── Helpers ────────────────────────────────────────────────────────────────
 
   private fun scheduleFrame() {
-    if (!frameScheduled) {
+    if (!frameScheduled && blurEnabled) {
       frameScheduled = true
       Choreographer.getInstance().postFrameCallback(frameCallback)
     }
   }
 
+  private fun blurRadiusFromAmount(amount: Float): Float =
+    ((amount / 100f).let { it * it } * 25f).coerceIn(1f, 25f)
+
   private fun findBlurRoot(): ViewGroup? {
     var p = parent
     while (p != null) {
@@ -406,16 +433,14 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     } catch (_: NumberFormatException) { null }
   }
 
-  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) { }
+  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {}
 
   companion object {
-    private const val MAX_BLUR_RADIUS     = 25f
-    private const val DEFAULT_BLUR_RADIUS = 2.5f
-    const val PROGRESSIVE_NONE           = 0
-    const val PROGRESSIVE_TOP_TO_BOTTOM  = 1
-    const val PROGRESSIVE_BOTTOM_TO_TOP  = 2
-    const val PROGRESSIVE_LEFT_TO_RIGHT  = 3
-    const val PROGRESSIVE_RIGHT_TO_LEFT  = 4
-    const val PROGRESSIVE_RADIAL         = 5
+    const val PROGRESSIVE_NONE          = 0
+    const val PROGRESSIVE_TOP_TO_BOTTOM = 1
+    const val PROGRESSIVE_BOTTOM_TO_TOP = 2
+    const val PROGRESSIVE_LEFT_TO_RIGHT = 3
+    const val PROGRESSIVE_RIGHT_TO_LEFT = 4
+    const val PROGRESSIVE_RADIAL        = 5
   }
 }

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,30 @@ 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
+    private const val DOWNSAMPLE_FACTOR = 4f
+    private const val BLUR_RADIUS       = 8f
+    private const val BLUR_ROUNDS       = 2
   }
 
   // ── 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,19 +54,23 @@ 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() }
   var autoUpdate:   Boolean = true
     set(value) {
       field = value
-      if (value) rootView.viewTreeObserver.addOnPreDrawListener(preDrawListener)
+      if (value) safeAddPreDrawListener()
       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 +80,7 @@ internal class LegacyBlurController(
   }
 
   private val preDrawListener = ViewTreeObserver.OnPreDrawListener {
-    if (!frameScheduled && enabled) {
+    if (!frameScheduled && enabled && autoUpdate) {
       frameScheduled = true
       Choreographer.getInstance().postFrameCallback(frameCallback)
     }
@@ -99,7 +91,7 @@ internal class LegacyBlurController(
 
   init {
     initRenderScript()
-    rootView.viewTreeObserver.addOnPreDrawListener(preDrawListener)
+    safeAddPreDrawListener()
   }
 
   private fun initRenderScript() {
@@ -112,7 +104,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 +112,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
@@ -218,7 +212,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
@@ -228,9 +222,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.9",
+  "version": "0.1.11",
   "description": "React Native package implementing Blur View in iOS and Android",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",