@sbaiahmed1/react-native-blur 4.2.0 → 4.2.2

package/android/build.gradle

@@ -74,7 +74,7 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation 'com.qmdeve:QmBlurView:1.0.5-Beta01'
+  implementation 'com.qmdeve.blurview:core:1.0.5'
 }
 
 react {

package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt

@@ -5,9 +5,12 @@ import android.graphics.Color
 import android.util.AttributeSet
 import android.util.Log
 import android.util.TypedValue
+import android.view.ViewGroup
 import com.qmdeve.blurview.widget.BlurViewGroup
 import androidx.core.graphics.toColorInt
 
+import android.view.View.MeasureSpec
+
 /**
  * Android implementation of React Native BlurView component.
  * Provides cross-platform blur effects using the QmBlurView library.
@@ -28,7 +31,7 @@ class ReactNativeBlurView : BlurViewGroup {
 
   companion object {
     private const val TAG = "ReactNativeBlurView"
-    private const val MAX_BLUR_RADIUS = 25f
+    private const val MAX_BLUR_RADIUS = 100f
     private const val DEFAULT_BLUR_RADIUS = 10f
     private const val DEBUG = false // Set to true for debug builds
 
@@ -80,6 +83,7 @@ class ReactNativeBlurView : BlurViewGroup {
       // setBlurRadius takes Float, setOverlayColor takes Int, setCornerRadius takes Float (in dp)
       super.setBlurRadius(currentBlurRadius)
       super.setOverlayColor(currentOverlayColor)
+      super.setDownsampleFactor(6.0F)
       updateCornerRadius()
 
       // Set transparent background to prevent visual artifacts
@@ -322,31 +326,37 @@ class ReactNativeBlurView : BlurViewGroup {
     }
   }
 
+  override fun generateDefaultLayoutParams(): BlurViewGroup.LayoutParams {
+    return BlurViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
+  }
+
+  override fun generateLayoutParams(attrs: AttributeSet?): BlurViewGroup.LayoutParams {
+    return BlurViewGroup.LayoutParams(context, attrs)
+  }
+
+  override fun generateLayoutParams(p: ViewGroup.LayoutParams?): ViewGroup.LayoutParams {
+    return ViewGroup.MarginLayoutParams(p)
+  }
+
+  override fun checkLayoutParams(p: ViewGroup.LayoutParams?): Boolean {
+    return p is ViewGroup.MarginLayoutParams
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    // Trust React Native to provide correct dimensions
+    setMeasuredDimension(
+      MeasureSpec.getSize(widthMeasureSpec),
+      MeasureSpec.getSize(heightMeasureSpec)
+    )
+  }
+
   /**
    * Override onLayout to properly position children according to React Native's Yoga layout.
-   * This prevents children from stacking on top of each other and ensures they follow
-   * the flexbox layout calculated by React Native.
-   * 
-   * React Native's Yoga layout system calculates positions for all children, but we need
-   * to explicitly apply those positions in onLayout. Without this, BlurViewGroup's default
-   * FrameLayout-like behavior would stack all children at (0,0).
    */
   override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
-    // Position each child according to its layout calculated by React Native's Yoga
-    for (i in 0 until childCount) {
-      val child = getChildAt(i)
-      if (child.visibility != GONE) {
-        // React Native stores the calculated layout in the view's properties
-        // We just need to apply them by calling layout() with the correct coordinates
-        val childLeft = child.left
-        val childTop = child.top
-        val childRight = child.right
-        val childBottom = child.bottom
-        
-        child.layout(childLeft, childTop, childRight, childBottom)
-        
-        logDebug("Laid out child $i at ($childLeft, $childTop, $childRight, $childBottom)")
-      }
-    }
+    // No-op: Layout is handled by React Native's UIManager.
+    // We override this to prevent the superclass (BlurViewGroup/FrameLayout) from
+    // re-positioning children based on its own logic (e.g. gravity), which would
+    // conflict with React Native's layout.
   }
 }

package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeProgressiveBlurView.kt

@@ -11,6 +11,7 @@ import android.graphics.Shader
 import android.util.AttributeSet
 import android.util.Log
 import android.widget.FrameLayout
+import android.view.View.MeasureSpec
 import com.qmdeve.blurview.widget.BlurView
 import androidx.core.graphics.toColorInt
 
@@ -18,14 +19,14 @@ import androidx.core.graphics.toColorInt
  * Android implementation of React Native ProgressiveBlurView component.
  * Uses a combination of normal blur (BlurView) + linear gradient mask to create
  * a progressive blur effect that transitions from blurred to clear.
- * 
+ *
  * This approach is more reliable than using the library's ProgressiveBlurView,
  * which has limited control over gradient direction and appearance.
  */
 class ReactNativeProgressiveBlurView : FrameLayout {
   private var blurView: BlurView? = null
   private val gradientPaint = Paint(Paint.ANTI_ALIAS_FLAG)
-  
+
   private var currentBlurRadius = DEFAULT_BLUR_RADIUS
   private var currentOverlayColor = Color.TRANSPARENT
   private var currentDirection = "topToBottom"
@@ -34,7 +35,7 @@ class ReactNativeProgressiveBlurView : FrameLayout {
 
   companion object {
     private const val TAG = "ReactNativeProgressiveBlur"
-    private const val MAX_BLUR_RADIUS = 25f
+    private const val MAX_BLUR_RADIUS = 100f
     private const val DEFAULT_BLUR_RADIUS = 10f
     private const val DEBUG = true
 
@@ -86,7 +87,9 @@ class ReactNativeProgressiveBlurView : FrameLayout {
       blurView = BlurView(context, null).apply {
         layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
         setBlurRadius(currentBlurRadius)
-        setOverlayColor(currentOverlayColor)
+        setDownsampleFactor(6.0F)
+        blurRounds = 3
+        overlayColor = currentOverlayColor
         setBackgroundColor(Color.TRANSPARENT)
       }
       addView(blurView)
@@ -94,7 +97,7 @@ class ReactNativeProgressiveBlurView : FrameLayout {
       // Set up the gradient paint
       gradientPaint.style = Paint.Style.FILL
       setWillNotDraw(false) // Enable onDraw for gradient overlay
-      
+
       // Set transparent background for the container
       super.setBackgroundColor(Color.TRANSPARENT)
 
@@ -106,6 +109,27 @@ class ReactNativeProgressiveBlurView : FrameLayout {
     }
   }
 
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    val width = MeasureSpec.getSize(widthMeasureSpec)
+    val height = MeasureSpec.getSize(heightMeasureSpec)
+    setMeasuredDimension(width, height)
+
+    // Measure the internal blurView to match the parent size
+    blurView?.measure(
+      MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+      MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+    )
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    // Layout the internal blurView to fill the parent
+    val width = right - left
+    val height = bottom - top
+    blurView?.layout(0, 0, width, height)
+
+    // Do NOT call super.onLayout to avoid interfering with React Native children
+  }
+
   override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
     super.onSizeChanged(w, h, oldw, oldh)
     if (w > 0 && h > 0) {
@@ -154,12 +178,12 @@ class ReactNativeProgressiveBlurView : FrameLayout {
         floatArrayOf(0f, 1f),
         Shader.TileMode.CLAMP
       )
-      
+
       gradientPaint.shader = gradient
-      
+
       logDebug("Updated gradient: direction=$currentDirection, start=($x0,$y0), end=($x1,$y1), offset=$currentStartOffset")
       invalidate()
-      
+
     } catch (e: Exception) {
       logError("Failed to update gradient: ${e.message}", e)
     }
@@ -173,15 +197,15 @@ class ReactNativeProgressiveBlurView : FrameLayout {
 
     // Use a layer to apply the gradient mask
     val saveCount = canvas.saveLayer(0f, 0f, width.toFloat(), height.toFloat(), null)
-    
+
     // Draw the blur view
     super.dispatchDraw(canvas)
-    
+
     // Apply gradient mask using DST_IN to make the blur gradually transparent
     gradientPaint.xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
     canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), gradientPaint)
     gradientPaint.xfermode = null
-    
+
     canvas.restoreToCount(saveCount)
   }
 
@@ -190,7 +214,7 @@ class ReactNativeProgressiveBlurView : FrameLayout {
    */
   override fun setBackgroundColor(color: Int) {
     logDebug("setBackgroundColor called: $color")
-    
+
     if (color != Color.TRANSPARENT) {
       hasExplicitBackground = true
       logDebug("Stored explicit background color: $color")
@@ -266,13 +290,13 @@ class ReactNativeProgressiveBlurView : FrameLayout {
   /**
    * Set the start offset for the progressive blur.
    * Controls where the gradient transition begins.
-   * 
+   *
    * @param offset The offset value (0.0 to 1.0) - where 0 starts immediately, 1 delays to the end
    */
   fun setStartOffset(offset: Float) {
     currentStartOffset = offset.coerceIn(0.0f, 1.0f)
     logDebug("setStartOffset: $offset -> clamped to $currentStartOffset")
-    
+
     try {
       updateGradient()
     } catch (e: Exception) {
@@ -306,7 +330,7 @@ class ReactNativeProgressiveBlurView : FrameLayout {
       logDebug("Cleared reduced transparency fallback color")
       return
     }
-    
+
     try {
       val fallbackColor = color.toColorInt()
       logDebug("setReducedTransparencyFallbackColor: $color -> ${Integer.toHexString(fallbackColor)}")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbaiahmed1/react-native-blur",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -116,7 +116,7 @@
       "tagName": "v${version}"
     },
     "npm": {
-      "publish": true
+      "publish": false
     },
     "github": {
       "release": true