react-native-blur-vibe 0.1.4 → 0.1.6

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

@@ -3,10 +3,7 @@ package com.blurvibe
 import android.content.Context
 import android.graphics.Color
 import android.graphics.Outline
-import android.os.Handler
-import android.os.Looper
 import android.util.TypedValue
-import android.view.Choreographer
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewOutlineProvider
@@ -16,308 +13,244 @@ import com.qmdeve.blurview.base.BaseBlurViewGroup
 import com.qmdeve.blurview.widget.BlurViewGroup
 
 /**
- * BlurVibeView — Optimised Android backdrop-blur (QmBlurView / CSS backdrop-filter parity)
+ * BlurVibeView — Android backdrop blur implementation
  *
- * ─── What was killing performance (3 FPS) ────────────────────────────────────
+ * Extends QmBlurView's BlurViewGroup — a high-performance blur library
+ * that correctly implements CSS backdrop-filter: blur() semantics:
+ *   - Blurs content BEHIND the view, not the view itself
+ *   - Hardware accelerated via native blur algorithms
+ *   - Handles scroll, animation, zIndex, absolute positioning correctly
+ *   - Never causes draw loops or bitmap capture on the JS thread
  *
- *  1. blurRounds = 5
- *     The single biggest killer. Each "round" is a full downsample → Gaussian → upsample
- *     pipeline. At 60 fps that's 300 blur operations/second. One round looks identical
- *     to the human eye and costs 1/5 as much. Fixed: blurRounds = 1.
+ * Uses reflection to redirect the blur capture root from the activity
+ * decor view to the nearest ReactRootView or react-native-screens Screen,
+ * preventing full-screen blur and navigation transition artifacts.
  *
- *  2. Blur radius mapped 0–100 instead of 0–25
- *     mapBlurAmountToRadius() was returning up to 100.0. QmBlurView's Gaussian kernel
- *     at radius=100 iterates a ~200-wide kernel per-pixel every frame.
- *     Fixed: map blurAmount 0–100 → radius 0–25.
- *
- *  3. OnPreDrawListener fires every frame with no throttling
- *     The listener was doing full blur work synchronously inside the pre-draw callback,
- *     blocking the draw thread on every invalidation of every child in the tree.
- *     Fixed: listener only sets a dirty flag; actual blur work is deferred to a
- *     Choreographer.FrameCallback which fires at most once-per-vsync.
- *
- *  4. preDrawListener leaked on re-attach
- *     Each call to onAttachedToWindow re-added the listener without removing the old one,
- *     multiplying the per-frame cost every time a modal or navigator re-mounted the view.
- *     Fixed: detachPreDrawListener() called before every re-attach.
- *
- * ─── Performance profile after fixes ─────────────────────────────────────────
- *
- *  • blur cost reduced ~40× (5 rounds → 1, radius 100 → 25, gated to 1/vsync)
- *  • zero JS thread work (Choreographer callback runs on UI thread only)
- *  • zero GC pressure (no bitmap allocations on hot path)
- *  • works with: Modal, ScrollView, FlatList, FlashList, ImageBackground,
- *                Reanimated (both JS and UI thread), react-navigation transitions
+ * Credit: approach adapted from sbaiahmed1/react-native-blur
  */
 class BlurVibeView(context: Context) : BlurViewGroup(context, null) {
 
-  // ── Blur state ─────────────────────────────────────────────────────────────
-
-  private var pendingBlurRadius = DEFAULT_BLUR_RADIUS
+  private var currentBlurRadius = DEFAULT_BLUR_RADIUS
   private var currentOverlayColor = Color.TRANSPARENT
   private var currentCornerRadius = 0f
-  private var isSetupDone = false
-
-  // ── Choreographer frame gate ───────────────────────────────────────────────
-  //
-  // OnPreDrawListener sets pendingFrame = true and returns immediately (never
-  // blocks). Choreographer fires frameCallback at the next vsync boundary,
-  // which calls invalidate() → QmBlurView captures + blurs + draws exactly once.
-  // pendingFrame prevents multiple queued callbacks stacking up.
-
-  private var pendingFrame = false
-
-  private val frameCallback = Choreographer.FrameCallback {
-    pendingFrame = false
-    if (isAttachedToWindow) triggerBlurUpdate()
-  }
+  private var isBlurInitialized = false
 
-  // ── PreDraw listener — sets dirty flag only, does zero work ───────────────
-
-  private var attachedRoot: View? = null
-
-  private val preDrawListener = ViewTreeObserver.OnPreDrawListener {
-    if (!pendingFrame) {
-      pendingFrame = true
-      Choreographer.getInstance().postFrameCallback(frameCallback)
+  companion object {
+    private const val DEFAULT_BLUR_RADIUS = 10f
+    private const val MIN_BLUR_AMOUNT = 0f
+    private const val MAX_BLUR_AMOUNT = 100f
+    private const val MAX_BLUR_RADIUS = 25f  // QmBlurView Gaussian kernel designed for 0-25
+
+    // Maps 0–100 blurAmount to 0–25 QmBlurView radius range
+    private fun mapBlurAmountToRadius(amount: Float): Float {
+      val clamped = amount.coerceIn(MIN_BLUR_AMOUNT, MAX_BLUR_AMOUNT)
+      return (clamped / MAX_BLUR_AMOUNT) * MAX_BLUR_RADIUS
     }
-    true  // MUST return true — false would block the entire frame draw pass
   }
 
-  // ── Init ──────────────────────────────────────────────────────────────────
-
   init {
-    super.setBackgroundColor(Color.TRANSPARENT)
+    super.setBackgroundColor(currentOverlayColor)
     clipChildren = true
     clipToOutline = true
-
-    // THE critical fix #1: 1 round instead of 5.
-    // A single Gaussian pass on a downsampled bitmap is perceptually identical
-    // to 5 passes and costs exactly 1/5 as much GPU/CPU time.
-    blurRounds = 1
-
-    // Aggressive downsample: capture at 1/8 resolution before blurring.
-    // The blur kernel smooths away all pixel-level detail so 1/8 is sufficient.
-    // This reduces the bitmap size 64× and the blur kernel work proportionally.
-    super.setDownsampleFactor(8f)
+    blurRounds = 1          // was 5 — single pass is visually identical, 5x cheaper
+    super.setDownsampleFactor(8.0f)  // was 6 — 1/64 pixel count, blur hides the difference
   }
 
-  // ── Lifecycle ─────────────────────────────────────────────────────────────
-
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
-    attachPreDrawListenerToOptimalRoot()
-    if (!isSetupDone) applyPendingBlurConfig()
+    if (isBlurInitialized) return
+    swapBlurRootToOptimalAncestor()
+    initializeBlur()
   }
 
   override fun onDetachedFromWindow() {
-    detachPreDrawListener()
-    Choreographer.getInstance().removeFrameCallback(frameCallback)
-    pendingFrame = false
-    isSetupDone = false
     super.onDetachedFromWindow()
+    isBlurInitialized = false
   }
 
-  // ── Root attachment ───────────────────────────────────────────────────────
-
-  private fun attachPreDrawListenerToOptimalRoot() {
-    detachPreDrawListener() // always detach first to prevent listener leaks
+  private var frameScheduled = false
 
-    val root: ViewGroup = findNearestScreenAncestor()
-      ?: findNearestReactRootView()
-      ?: (rootView as? ViewGroup)
-      ?: return
-
-    attachedRoot = root
-    root.viewTreeObserver.addOnPreDrawListener(preDrawListener)
-    redirectQmBlurCaptureRoot(root)
-  }
-
-  private fun detachPreDrawListener() {
-    attachedRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
-    attachedRoot = null
+  private val frameCallback = android.view.Choreographer.FrameCallback {
+    frameScheduled = false
+    try { invalidate() } catch (_: Exception) {}
   }
 
   /**
-   * Redirects QmBlurView's internal bitmap-capture root (mDecorView) to [newRoot]
-   * via reflection. This scopes QmBlurView's capture to the chosen subtree instead
-   * of the full activity decor view — smaller captures = faster blur.
-   *
-   * We do NOT mirror QmBlurView's internal preDrawListener. We own the invalidation
-   * cycle via our own Choreographer-gated listener above.
+   * Redirects QmBlurView's internal preDrawListener from the old root to [newRoot].
+   * Also wraps it in a Choreographer gate so blur work fires at most ONCE per vsync,
+   * even when many views invalidate simultaneously (scroll, animation, etc).
    */
-  private fun redirectQmBlurCaptureRoot(newRoot: ViewGroup) {
+  private fun swapBlurRootToOptimalAncestor() {
+    val newRoot = findNearestScreenAncestor() ?: findNearestReactRootView() ?: return
+
     try {
-      val baseField = BlurViewGroup::class.java.getDeclaredField("mBaseBlurViewGroup")
+      val blurViewGroupClass = BlurViewGroup::class.java
+      val baseField = blurViewGroupClass.getDeclaredField("mBaseBlurViewGroup")
       baseField.isAccessible = true
-      val base = baseField.get(this) ?: return
+      val baseBlurViewGroup = baseField.get(this) ?: return
 
       val baseClass = BaseBlurViewGroup::class.java
 
-      val decorField = baseClass.getDeclaredField("mDecorView")
-      decorField.isAccessible = true
-      decorField.set(base, newRoot)
-
-      val diffRootField = baseClass.getDeclaredField("mDifferentRoot")
-      diffRootField.isAccessible = true
-      diffRootField.setBoolean(base, newRoot.rootView != this.rootView)
-
-      val forceRedrawField = baseClass.getDeclaredField("mForceRedraw")
-      forceRedrawField.isAccessible = true
-      forceRedrawField.setBoolean(base, true)
-
-    } catch (_: Exception) {
-      // Reflection failed (library updated internals).
-      // Fall back gracefully — blur still works via the decor view.
+      val decorViewField = baseClass.getDeclaredField("mDecorView")
+      decorViewField.isAccessible = true
+      val oldDecorView = decorViewField.get(baseBlurViewGroup) as? View
+
+      val preDrawListenerField = baseClass.getDeclaredField("preDrawListener")
+      preDrawListenerField.isAccessible = true
+      val preDrawListener = preDrawListenerField.get(baseBlurViewGroup)
+        as? ViewTreeObserver.OnPreDrawListener
+
+      if (oldDecorView != null && preDrawListener != null) {
+        // Remove listener from old root
+        oldDecorView.viewTreeObserver.removeOnPreDrawListener(preDrawListener)
+
+        // Set new root
+        decorViewField.set(baseBlurViewGroup, newRoot)
+
+        // Wrap in Choreographer gate: fires at most once per vsync regardless of
+        // how many child invalidations happen in the same frame
+        val gatedListener = ViewTreeObserver.OnPreDrawListener {
+          if (!frameScheduled) {
+            frameScheduled = true
+            android.view.Choreographer.getInstance().postFrameCallback(frameCallback)
+          }
+          true  // never block the draw pass
+        }
+
+        // Add gated listener to new root (NOT the original raw listener)
+        newRoot.viewTreeObserver.addOnPreDrawListener(gatedListener)
+
+        // Update mDifferentRoot flag
+        val differentRootField = baseClass.getDeclaredField("mDifferentRoot")
+        differentRootField.isAccessible = true
+        differentRootField.setBoolean(baseBlurViewGroup, newRoot.rootView != this.rootView)
+
+        // Force redraw
+        val forceRedrawField = baseClass.getDeclaredField("mForceRedraw")
+        forceRedrawField.isAccessible = true
+        forceRedrawField.setBoolean(baseBlurViewGroup, true)
+      }
+    } catch (e: Exception) {
+      // Reflection failed — QmBlurView internals changed
+      // Fall back gracefully to default decor view blur root
     }
   }
 
-  // ── Blur update (fires via Choreographer, once per vsync at most) ─────────
+  private fun findNearestScreenAncestor(): ViewGroup? {
+    var current = parent
+    while (current != null) {
+      if (current.javaClass.name == "com.swmansion.rnscreens.Screen") {
+        return current as? ViewGroup
+      }
+      current = current.parent
+    }
+    return null
+  }
 
-  private fun triggerBlurUpdate() {
-    try {
-      if (!isSetupDone) applyPendingBlurConfig() else invalidate()
-    } catch (_: Exception) {}
+  private fun findNearestReactRootView(): ViewGroup? {
+    var current = parent
+    while (current != null) {
+      if (current.javaClass.name == "com.facebook.react.ReactRootView") {
+        return current as? ViewGroup
+      }
+      current = current.parent
+    }
+    return null
   }
 
-  private fun applyPendingBlurConfig() {
+  private fun initializeBlur() {
+    if (isBlurInitialized) return
     try {
-      super.setBlurRadius(pendingBlurRadius)
+      super.setBlurRadius(currentBlurRadius)
       super.setOverlayColor(currentOverlayColor)
-      updateCornerRadiusInternal()
-      isSetupDone = true
-    } catch (_: Exception) {
-      // Not fully attached yet — next Choreographer tick will retry
+      updateCornerRadius()
+      isBlurInitialized = true
+    } catch (e: Exception) {
+      // Ignore — view may not be fully attached yet
     }
   }
 
-  // ── Public setters (ViewManager → UI thread) ──────────────────────────────
+  // MARK: - Public setters
 
-  /**
-   * blurAmount: JS-facing 0–100.
-   * Mapped to 0–25 internally (QmBlurView Gaussian kernel's designed range).
-   * Values above 25 produce no visible increase in blur but cost more.
-   */
   fun setBlurAmount(amount: Float) {
-    pendingBlurRadius = mapBlurAmount(amount)
-    if (isSetupDone) {
-      try { super.setBlurRadius(pendingBlurRadius) } catch (_: Exception) {}
-      scheduleBlurFrame()
-    }
+    currentBlurRadius = mapBlurAmountToRadius(amount)
+    try { super.setBlurRadius(currentBlurRadius) } catch (e: Exception) {}
   }
 
   fun setOverlayColor(colorString: String?) {
     currentOverlayColor = parseHexColor(colorString ?: "transparent") ?: Color.TRANSPARENT
-    if (isSetupDone) {
-      try {
-        super.setBackgroundColor(Color.TRANSPARENT)
-        super.setOverlayColor(currentOverlayColor)
-      } catch (_: Exception) {}
-      scheduleBlurFrame()
-    }
+    try {
+      super.setBackgroundColor(currentOverlayColor)
+      super.setOverlayColor(currentOverlayColor)
+    } catch (e: Exception) {}
   }
 
-  /** downsample factor override (1–8). Higher = faster + softer. */
-  fun setBlurRadius(factor: Int) {
-    try { super.setDownsampleFactor(factor.coerceIn(1, 8).toFloat()) } catch (_: Exception) {}
-    scheduleBlurFrame()
+  fun setReducedTransparencyFallbackColor(colorString: String?) {
+    // Stored for future use — QmBlurView handles accessibility fallback internally
   }
 
-  fun applyBorderRadius(radiusDp: Float) {
-    currentCornerRadius = radiusDp
-    updateCornerRadiusInternal()
+  fun setBlurRadius(radius: Int) {
+    // blurRadius is the Android downscale factor — map to QmBlurView's downsample factor
+    val downsample = radius.coerceIn(1, 8).toFloat()
+    try { super.setDownsampleFactor(downsample) } catch (e: Exception) {}
   }
 
-  fun setReducedTransparencyFallbackColor(@Suppress("UNUSED_PARAMETER") colorString: String?) {
-    // Reserved — QmBlurView handles its own reduced-transparency fallback
+  fun setBorderRadius(radius: Float) {
+    currentCornerRadius = radius
+    updateCornerRadius()
   }
 
-  // ── Corner radius ─────────────────────────────────────────────────────────
-
-  private fun updateCornerRadiusInternal() {
-    val px = TypedValue.applyDimension(
-      TypedValue.COMPLEX_UNIT_DIP, currentCornerRadius, context.resources.displayMetrics
+  private fun updateCornerRadius() {
+    val radiusPx = TypedValue.applyDimension(
+      TypedValue.COMPLEX_UNIT_DIP,
+      currentCornerRadius,
+      context.resources.displayMetrics
     )
     outlineProvider = object : ViewOutlineProvider() {
       override fun getOutline(view: View, outline: Outline) {
-        outline.setRoundRect(0, 0, view.width, view.height, px)
+        outline.setRoundRect(0, 0, view.width, view.height, radiusPx)
       }
     }
-    clipToOutline = currentCornerRadius > 0f
-    try { super.setCornerRadius(px) } catch (_: Exception) {}
-  }
-
-  // ── Helpers ───────────────────────────────────────────────────────────────
-
-  private fun scheduleBlurFrame() {
-    if (!pendingFrame) {
-      pendingFrame = true
-      Choreographer.getInstance().postFrameCallback(frameCallback)
-    }
-  }
-
-  private fun mapBlurAmount(amount: Float): Float =
-    (amount.coerceIn(0f, 100f) / 100f) * 25f
-
-  // ── Ancestor finders ──────────────────────────────────────────────────────
-
-  private fun findNearestScreenAncestor(): ViewGroup? {
-    var p = parent
-    while (p != null) {
-      if (p.javaClass.name == "com.swmansion.rnscreens.Screen") return p as? ViewGroup
-      p = (p as? View)?.parent
-    }
-    return null
-  }
-
-  private fun findNearestReactRootView(): ViewGroup? {
-    var p = parent
-    while (p != null) {
-      if (p.javaClass.name == "com.facebook.react.ReactRootView") return p as? ViewGroup
-      p = (p as? View)?.parent
-    }
-    return null
+    clipToOutline = true
+    try { super.setCornerRadius(radiusPx) } catch (e: Exception) {}
   }
 
-  // ── React Native layout passthrough ───────────────────────────────────────
-
+  // React Native handles layout — prevent superclass from interfering
   override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
-    // Yoga handles all child layout. Calling super here would cause QmBlurView's
-    // FrameLayout logic to fight RN's layout system.
+    // No-op: layout handled by React Native's Yoga engine
   }
 
-  // ── Color parser ──────────────────────────────────────────────────────────
-  // Supports: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA", named colors
-
-  private fun parseHexColor(s: String): Int? {
-    val t = s.trim()
-    if (t.equals("transparent", ignoreCase = true)) return Color.TRANSPARENT
-    if (!t.startsWith("#")) return try { t.toColorInt() } catch (_: Exception) { null }
-    val hex = t.removePrefix("#")
+  // MARK: - Color parser
+  // Supports: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
+  private fun parseHexColor(colorString: String): Int? {
+    val s = colorString.trim()
+    if (s.equals("transparent", ignoreCase = true)) return Color.TRANSPARENT
+    if (!s.startsWith("#")) {
+      return try { s.toColorInt() } catch (e: Exception) { null }
+    }
+    val hex = s.removePrefix("#")
     return try {
       when (hex.length) {
-        3 -> Color.argb(255,
+        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[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))
+          hex.substring(4, 6).toInt(16)
+        )
         8 -> Color.argb(
-          hex.substring(6, 8).toInt(16), // alpha is LAST byte in #RRGGBBAA
+          hex.substring(6, 8).toInt(16), // AA is last in #RRGGBBAA
           hex.substring(0, 2).toInt(16),
           hex.substring(2, 4).toInt(16),
-          hex.substring(4, 6).toInt(16))
+          hex.substring(4, 6).toInt(16)
+        )
         else -> null
       }
-    } catch (_: NumberFormatException) { null }
-  }
-
-  // ── Constants ─────────────────────────────────────────────────────────────
-
-  companion object {
-    // blurAmount=10 → radius 2.5 — a gentle, performant default
-    private const val DEFAULT_BLUR_RADIUS = 2.5f
+    } catch (e: NumberFormatException) { null }
   }
 }

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

@@ -7,8 +7,8 @@ import com.facebook.react.uimanager.annotations.ReactProp
 /**
  * BlurVibeViewManager
  *
- * ViewGroupManager because BlurVibeView (→ BlurViewGroup → FrameLayout) hosts
- * React children. needsCustomLayoutForChildren() = false lets Yoga own layout.
+ * ViewGroupManager — BlurVibeView (which extends BlurViewGroup/FrameLayout)
+ * hosts React children, so we must use ViewGroupManager, not SimpleViewManager.
  */
 class BlurVibeViewManager : ViewGroupManager<BlurVibeView>() {
 
@@ -17,30 +17,35 @@ class BlurVibeViewManager : ViewGroupManager<BlurVibeView>() {
   override fun createViewInstance(context: ThemedReactContext) = BlurVibeView(context)
 
   @ReactProp(name = "blurAmount", defaultFloat = 10f)
-  fun setBlurAmount(view: BlurVibeView, amount: Float) = view.setBlurAmount(amount)
+  fun setBlurAmount(view: BlurVibeView, amount: Float) {
+    view.setBlurAmount(amount)
+  }
 
   @ReactProp(name = "blurType")
   fun setBlurType(view: BlurVibeView, type: String?) {
-    // No-op on Android — blurType is an iOS UIBlurEffectStyle concept only
+    // No-op on Android — blurType maps to iOS UIBlurEffectStyle only
   }
 
   @ReactProp(name = "overlayColor")
-  fun setOverlayColor(view: BlurVibeView, color: String?) = view.setOverlayColor(color)
+  fun setOverlayColor(view: BlurVibeView, color: String?) {
+    view.setOverlayColor(color)
+  }
 
   @ReactProp(name = "reducedTransparencyFallbackColor")
-  fun setReducedTransparencyFallbackColor(view: BlurVibeView, color: String?) =
+  fun setReducedTransparencyFallbackColor(view: BlurVibeView, color: String?) {
     view.setReducedTransparencyFallbackColor(color)
+  }
 
   @ReactProp(name = "blurRadius", defaultInt = 4)
-  fun setBlurRadius(view: BlurVibeView, radius: Int) = view.setBlurRadius(radius)
+  fun setBlurRadius(view: BlurVibeView, radius: Int) {
+    view.setBlurRadius(radius)
+  }
 
   @ReactProp(name = "borderRadius", defaultFloat = 0f)
-  fun setBlurBorderRadius(view: BlurVibeView, radius: Float) = view.applyBorderRadius(radius)
-
-  override fun onDropViewInstance(view: BlurVibeView) {
-    super.onDropViewInstance(view)
+  fun setBlurBorderRadius(view: BlurVibeView, radius: Float) {
+    view.setBorderRadius(radius)
   }
 
-  // Yoga drives all child layout — return false
+  // React Native's Yoga handles child layout — return false
   override fun needsCustomLayoutForChildren(): Boolean = false
 }

package/package.json

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