react-native-blur-vibe 0.1.8 → 0.1.9

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

@@ -28,28 +28,6 @@ import com.facebook.react.views.view.ReactViewGroup
 import kotlin.math.min
 import kotlin.random.Random
 
-/**
- * BlurVibeViewApi31 — GPU backdrop blur for Android API 31+
- *
- * Features:
- *  • Dual-RenderNode blur (backdrop-filter CSS semantics)
- *  • Progressive / gradient blur (vertical, horizontal, radial)
- *  • Noise texture overlay (tactile frosted-glass feel, like Haze)
- *  • Overlay tint with full RGBA support
- *  • Corner radius with hardware clipping
- *  • Choreographer-gated updates (max 1 capture per vsync)
- *
- * Progressive blur technique (from Haze docs):
- *   Uses a mask approach — a LinearGradient/RadialGradient is drawn as an
- *   alpha mask over the blur output using PorterDuff.DST_IN.
- *   This fades the blur from full-strength to zero across the view.
- *   Per Haze docs: "masks are much faster with negligible performance cost"
- *   vs true per-pixel radius variation which costs ~25% more on API 33+.
- *
- * Noise texture:
- *   Haze uses noise at 15% opacity by default for tactility.
- *   We generate a small tileable noise bitmap once and draw it with low alpha.
- */
 @RequiresApi(Build.VERSION_CODES.S)
 class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
 
@@ -62,35 +40,48 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
 
   // ── Progressive blur params ────────────────────────────────────────────────
 
-  private var progressiveDirection = PROGRESSIVE_NONE
-  private var progressiveStartIntensity = 1f   // 0.0–1.0, full blur at start
-  private var progressiveEndIntensity   = 0f   // 0.0–1.0, no blur at end
+  private var progressiveDirection      = PROGRESSIVE_NONE
+  private var progressiveStartIntensity = 1f
+  private var progressiveEndIntensity   = 0f
 
   // ── Noise params ──────────────────────────────────────────────────────────
 
-  private var noiseFactor = 0.08f   // Haze default is 0.15 — we use 0.08 as default (subtler)
+  private var noiseFactor = 0.08f
   private var noiseBitmap: Bitmap? = null
-  private val noisePaint  = Paint().apply { alpha = (noiseFactor * 255).toInt() }
+  private val noisePaint  = Paint()
 
   // ── RenderNodes ───────────────────────────────────────────────────────────
+  //
+  // contentNode: records root-view draw commands ("what's behind me")
+  // blurNode:    crops + translates contentNode to this view's position,
+  //              with RenderEffect blur applied
+  //
+  // 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.
+  //
+  // 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).
 
-  /** Records the root-view content — "what's behind me" */
-  private val contentNode = RenderNode("BlurVibeContent").apply {
-    setUseCompositingLayer(true, null)  // caches as GPU texture — repeated reads are free
-  }
+  private val contentNode = RenderNode("BlurVibeContent")
+  private val blurNode    = RenderNode("BlurVibeBlur")
+
+  // ── Recording guard — prevents double-beginRecording crashes ─────────────
+  //
+  // 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.
 
-  /** Holds contentNode cropped to this view's position, with RenderEffect blur applied */
-  private val blurNode = RenderNode("BlurVibeBlur")
+  private var isCapturing = false
 
-  // ── Paint objects (reused, no per-frame allocation) ───────────────────────
+  // ── Paint objects ──────────────────────────────────────────────────────────
 
-  private val overlayPaint    = Paint(Paint.ANTI_ALIAS_FLAG)
-  private val maskPaint       = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+  private val overlayPaint = Paint(Paint.ANTI_ALIAS_FLAG)
+  private val maskPaint    = Paint(Paint.ANTI_ALIAS_FLAG).apply {
     xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
   }
-  private val clearPaint      = Paint().apply {
-    xfermode = PorterDuffXfermode(PorterDuff.Mode.CLEAR)
-  }
 
   // ── Root view ─────────────────────────────────────────────────────────────
 
@@ -106,6 +97,7 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
       invalidate()
     }
   }
+
   private val preDrawListener = ViewTreeObserver.OnPreDrawListener {
     if (!frameScheduled) {
       frameScheduled = true
@@ -120,8 +112,10 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     setWillNotDraw(false)
     super.setBackgroundColor(Color.TRANSPARENT)
     clipToOutline = true
-    // Enable hardware layer so onDraw() runs on GPU
-    setLayerType(LAYER_TYPE_HARDWARE, null)
+    // 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 ──────────────────────────────────────────────────────────────
@@ -137,55 +131,68 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
     Choreographer.getInstance().removeFrameCallback(frameCallback)
     frameScheduled = false
-    blurRoot = null
+    isCapturing    = false
+    blurRoot       = null
     noiseBitmap?.recycle()
     noiseBitmap = null
+    // Discard RenderNode display lists to free GPU memory
+    contentNode.discardDisplayList()
+    blurNode.discardDisplayList()
     super.onDetachedFromWindow()
   }
 
   override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
     super.onSizeChanged(w, h, oldw, oldh)
-    blurNode.setPosition(0, 0, w, h)
-    applyBlurRenderEffect()
+    // Update blurNode bounds — contentNode bounds are set in captureRootIntoNode
+    if (w > 0 && h > 0) {
+      blurNode.setPosition(0, 0, w, h)
+      applyBlurRenderEffect()
+    }
   }
 
-  // ── Capture ────────────────────────────────────────────────────────────────
+  // ── Capture pipeline ───────────────────────────────────────────────────────
 
   private fun captureRootIntoNode() {
+    if (isCapturing) return  // guard against re-entrant / double recording crash
     val root = blurRoot ?: return
-    if (root.width <= 0 || root.height <= 0) return
-
-    contentNode.setPosition(0, 0, root.width, root.height)
+    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
 
-    val canvas = contentNode.beginRecording()
+    isCapturing = true
     try {
-      canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
-      root.draw(canvas)
-    } finally {
-      contentNode.endRecording()
-    }
-
-    rebuildBlurNode()
-  }
-
-  private fun rebuildBlurNode() {
-    val root = blurRoot ?: return
-    if (width <= 0 || height <= 0) return
-
-    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()
+      // 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
+      }
 
-    blurNode.setPosition(0, 0, width, height)
-    applyBlurRenderEffect()
+      // 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()
+      }
 
-    val canvas = blurNode.beginRecording()
-    try {
-      canvas.translate(-offsetX, -offsetY)
-      canvas.drawRenderNode(contentNode)
     } finally {
-      blurNode.endRecording()
+      isCapturing = false
     }
   }
 
@@ -202,34 +209,30 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   // ── Draw ───────────────────────────────────────────────────────────────────
 
   override fun onDraw(canvas: Canvas) {
-    val w = width.toFloat()
-    val h = height.toFloat()
-    if (w <= 0f || h <= 0f) return
+    val w = width.toFloat();  if (w <= 0f) return
+    val h = height.toFloat(); if (h <= 0f) return
 
+    // Guard: only draw if blurNode has a valid recorded display list
     if (!blurNode.hasDisplayList()) return
 
-    // ── Step 1: Save layer so we can apply mask on top of blur ────────────────
-    // saveLayer lets us composite blur + progressive mask as a unit
+    // Step 1: save layer for progressive mask compositing
     val saveCount = if (progressiveDirection != PROGRESSIVE_NONE) {
       canvas.saveLayer(0f, 0f, w, h, null)
-    } else {
-      -1
-    }
+    } else -1
 
-    // ── Step 2: Draw blurred backdrop ─────────────────────────────────────────
+    // Step 2: draw the blurred backdrop
     canvas.drawRenderNode(blurNode)
 
-    // ── Step 3: Progressive mask (alpha gradient fades the blur) ──────────────
+    // Step 3: progressive alpha mask
     if (progressiveDirection != PROGRESSIVE_NONE && saveCount >= 0) {
-      val shader = buildProgressiveShader(w, h)
-      if (shader != null) {
+      buildProgressiveShader(w, h)?.let { shader ->
         maskPaint.shader = shader
         canvas.drawRect(0f, 0f, w, h, maskPaint)
       }
       canvas.restoreToCount(saveCount)
     }
 
-    // ── Step 4: Overlay tint ──────────────────────────────────────────────────
+    // Step 4: overlay tint
     if (Color.alpha(overlayColor) > 0) {
       overlayPaint.color = overlayColor
       if (cornerRadiusPx > 0f) {
@@ -239,58 +242,38 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
       }
     }
 
-    // ── Step 5: Noise texture (tactile frosted-glass feel) ────────────────────
-    if (noiseFactor > 0f && noiseBitmap != null && !noiseBitmap!!.isRecycled) {
-      noisePaint.alpha = (noiseFactor * 255f).toInt().coerceIn(0, 255)
-      val noiseShader = BitmapShader(noiseBitmap!!, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT)
-      noisePaint.shader = noiseShader
-      canvas.drawRect(0f, 0f, w, h, noisePaint)
+    // 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)
+      }
     }
   }
 
-  // ── Progressive shader builder ────────────────────────────────────────────
+  // ── Progressive shader ────────────────────────────────────────────────────
 
   private fun buildProgressiveShader(w: Float, h: Float): Shader? {
-    // Map intensity values to alpha: 1.0 = fully opaque (full blur), 0.0 = fully transparent (no blur)
-    val startAlpha = progressiveStartIntensity.coerceIn(0f, 1f)
-    val endAlpha   = progressiveEndIntensity.coerceIn(0f, 1f)
-    val startColor = Color.argb((startAlpha * 255).toInt(), 0, 0, 0)
-    val endColor   = Color.argb((endAlpha   * 255).toInt(), 0, 0, 0)
-
+    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)
     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, 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
     }
   }
 
-  // ── Noise generation ─────────────────────────────────────────────────────
-  //
-  // Generates a small (64×64) tileable noise bitmap once.
-  // Haze uses noise at 15% opacity for tactility — the fine grain
-  // breaks up the uniform blur and makes it look more like real frosted glass.
+  // ── Noise bitmap ──────────────────────────────────────────────────────────
 
   private fun generateNoiseBitmap() {
-    if (noiseBitmap != null && !noiseBitmap!!.isRecycled) return
+    if (noiseBitmap?.isRecycled == false) return
     val size = 64
     val bmp  = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)
-    val rng  = Random(42)  // fixed seed = deterministic noise, no shimmer on re-render
+    val rng  = Random(42)
     for (x in 0 until size) {
       for (y in 0 until size) {
         val v = rng.nextInt(256)
@@ -303,10 +286,9 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   // ── Public setters ─────────────────────────────────────────────────────────
 
   fun setBlurAmount(amount: Float) {
-    val t      = amount.coerceIn(0f, 100f) / 100f
-    val radius = t * t * MAX_BLUR_RADIUS  // quadratic — matches CSS backdrop-blur feel
-    blurRadiusX = radius
-    blurRadiusY = radius
+    val t = amount.coerceIn(0f, 100f) / 100f
+    blurRadiusX = t * t * MAX_BLUR_RADIUS
+    blurRadiusY = blurRadiusX
     applyBlurRenderEffect()
     scheduleFrame()
   }
@@ -329,55 +311,54 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     invalidate()
   }
 
-  fun setReducedTransparencyFallbackColor(@Suppress("UNUSED_PARAMETER") color: String?) {
-    // iOS-only — no-op on Android
-  }
+  fun setReducedTransparencyFallbackColor(@Suppress("UNUSED_PARAMETER") color: String?) { }
 
-  /**
-   * Progressive blur direction.
-   * @param direction one of: "none", "topToBottom", "bottomToTop",
-   *                          "leftToRight", "rightToLeft", "radial"
-   */
   fun setProgressiveBlurDirection(direction: String?) {
     progressiveDirection = when (direction) {
-      "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
+      "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()
   }
 
-  /**
-   * Progressive blur start intensity (0.0 = no blur, 1.0 = full blur).
-   * This is the intensity at the START of the gradient direction.
-   * Default 1.0 — full blur at top/left/center.
-   */
   fun setProgressiveStartIntensity(intensity: Float) {
-    progressiveStartIntensity = intensity.coerceIn(0f, 1f)
-    invalidate()
+    progressiveStartIntensity = intensity.coerceIn(0f, 1f); invalidate()
   }
 
-  /**
-   * Progressive blur end intensity (0.0 = no blur, 1.0 = full blur).
-   * This is the intensity at the END of the gradient direction.
-   * Default 0.0 — fades to no blur at bottom/right/edge.
-   */
   fun setProgressiveEndIntensity(intensity: Float) {
-    progressiveEndIntensity = intensity.coerceIn(0f, 1f)
-    invalidate()
+    progressiveEndIntensity = intensity.coerceIn(0f, 1f); invalidate()
   }
 
-  /**
-   * Noise factor — grain overlay strength for frosted-glass tactility.
-   * 0.0 = no noise, 1.0 = full noise. Default 0.08 (8%).
-   * Haze's default is 0.15. Set 0 to disable.
-   */
   fun setNoiseFactor(factor: Float) {
-    noiseFactor = factor.coerceIn(0f, 1f)
-    invalidate()
+    noiseFactor = factor.coerceIn(0f, 1f); invalidate()
+  }
+
+  fun applyBlurEnabled(enabled: Boolean) {
+    if (!enabled) {
+      blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
+      Choreographer.getInstance().removeFrameCallback(frameCallback)
+      frameScheduled = false
+      blurNode.discardDisplayList()
+      contentNode.discardDisplayList()
+      invalidate()
+    } else {
+      blurRoot?.viewTreeObserver?.addOnPreDrawListener(preDrawListener)
+      scheduleFrame()
+    }
+  }
+
+  fun setAutoUpdate(autoUpdate: Boolean) {
+    if (autoUpdate) {
+      blurRoot?.viewTreeObserver?.addOnPreDrawListener(preDrawListener)
+    } else {
+      blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
+      Choreographer.getInstance().removeFrameCallback(frameCallback)
+      frameScheduled = false
+    }
   }
 
   // ── Helpers ────────────────────────────────────────────────────────────────
@@ -392,14 +373,12 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   private fun findBlurRoot(): ViewGroup? {
     var p = parent
     while (p != null) {
-      if ((p as? View)?.javaClass?.name == "com.swmansion.rnscreens.Screen")
-        return p as? ViewGroup
+      if ((p as? View)?.javaClass?.name == "com.swmansion.rnscreens.Screen") return p as? ViewGroup
       p = (p as? View)?.parent
     }
     p = parent
     while (p != null) {
-      if ((p as? View)?.javaClass?.name == "com.facebook.react.ReactRootView")
-        return p as? ViewGroup
+      if ((p as? View)?.javaClass?.name == "com.facebook.react.ReactRootView") return p as? ViewGroup
       p = (p as? View)?.parent
     }
     return rootView as? ViewGroup
@@ -412,32 +391,26 @@ 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))
-        8 -> Color.argb(
-          hex.substring(6, 8).toInt(16),
-          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),
+                        hex.substring(4,6).toInt(16))
         else -> null
       }
     } catch (_: NumberFormatException) { null }
   }
 
-  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) { }
 
   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