@sbaiahmed1/react-native-blur 4.2.0 → 4.2.1

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.
@@ -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(4.0F)
       updateCornerRadius()
 
       // Set transparent background to prevent visual artifacts
@@ -322,31 +326,37 @@ class ReactNativeBlurView : BlurViewGroup {
     }
   }
 
+  override fun generateDefaultLayoutParams(): ViewGroup.LayoutParams {
+    return ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
+  }
+
+  override fun generateLayoutParams(attrs: AttributeSet?): ViewGroup.LayoutParams {
+    return ViewGroup.MarginLayoutParams(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
 
@@ -106,6 +107,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbaiahmed1/react-native-blur",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",