react-native-blur-vibe 0.1.11 → 0.1.12

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

@@ -33,7 +33,7 @@ class BlurVibeView(context: Context) : ReactViewGroup(context) {
 
   init {
     setWillNotDraw(false)
-    super.setBackgroundColor(Color.TRANSPARENT)
+    // DO NOT call setBackgroundColor — see BlurVibeViewApi31 for explanation.
   }
 
   // ── Lifecycle ──────────────────────────────────────────────────────────────
@@ -137,8 +137,10 @@ class BlurVibeView(context: Context) : ReactViewGroup(context) {
   // ── 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
+    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

@@ -117,7 +117,12 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
 
   init {
     setWillNotDraw(false)
-    super.setBackgroundColor(Color.TRANSPARENT)
+    // 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 ──────────────────────────────────────────────────────────────
@@ -219,18 +224,24 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     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)
+    // ④ 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 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)
           ),
-          blurEffect
+          doubleBlur
         )
-      } else blurEffect
+      } else doubleBlur
     )
 
     invalidate()
@@ -394,8 +405,16 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     }
   }
 
-  private fun blurRadiusFromAmount(amount: Float): Float =
-    ((amount / 100f).let { it * it } * 25f).coerceIn(1f, 25f)
+  private fun blurRadiusFromAmount(amount: Float): Float {
+    // 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? {
     var p = parent

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

@@ -33,9 +33,17 @@ internal class LegacyBlurController(
 ) {
 
   companion object {
-    private const val DOWNSAMPLE_FACTOR = 4f
-    private const val BLUR_RADIUS       = 8f
-    private const val BLUR_ROUNDS       = 2
+    // 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 ────────────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-blur-vibe",
-  "version": "0.1.11",
+  "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",