@sbaiahmed1/react-native-blur 4.2.2 → 4.3.1

package/README.md

@@ -246,7 +246,7 @@ The library uses native Android blur with automatic platform detection. No addit
 > 📦 **Dependency**: The library uses [QmBlurView](https://github.com/QmDeve/QmBlurView) from Maven Central:
 >
 > ```gradle
-> implementation 'com.qmdeve:QmBlurView:1.0.5-Beta01'
+> implementation 'com.qmdeve.blurview:core:1.0.5'
 > ```
 
 The implementation automatically handles different Android versions:
@@ -428,7 +428,10 @@ Use `LiquidGlassContainer` to create a glass container with configurable spacing
 
 ```tsx
 import React from 'react';
-import { LiquidGlassContainer, LiquidGlassView } from '@sbaiahmed1/react-native-blur';
+import {
+  LiquidGlassContainer,
+  LiquidGlassView,
+} from '@sbaiahmed1/react-native-blur';
 
 function GlassContainerExample() {
   return (
@@ -459,7 +462,10 @@ function GlassContainerExample() {
 ```tsx
 import React, { useRef } from 'react';
 import { Animated } from 'react-native';
-import { LiquidGlassContainer, LiquidGlassView } from '@sbaiahmed1/react-native-blur';
+import {
+  LiquidGlassContainer,
+  LiquidGlassView,
+} from '@sbaiahmed1/react-native-blur';
 
 function AnimatedGlassContainer() {
   const translateX = useRef(new Animated.Value(0)).current;
@@ -508,28 +514,30 @@ The library now provides four separate components with their own props:
 
 All props are optional and have sensible defaults.
 
-| Prop                               | Type        | Default     | Description                                                                   |
-| ---------------------------------- | ----------- | ----------- | ----------------------------------------------------------------------------- |
-| `blurType`                         | `BlurType`  | `'xlight'`  | The type of blur effect to apply                                              |
-| `blurAmount`                       | `number`    | `10.0`      | The intensity of the blur effect (0-100)                                      |
-| `ignoreSafeArea`                   | `boolean`   | `false`     | (iOS only) Controls whether the blur effect should ignore all safe area edges |
-| `reducedTransparencyFallbackColor` | `string`    | `'#FFFFFF'` | Fallback color when reduced transparency is enabled                           |
-| `style`                            | `ViewStyle` | `undefined` | Style object for the blur view                                                |
-| `children`                         | `ReactNode` | `undefined` | Child components to render inside the blur view                               |
+| Prop                               | Type         | Default     | Description                                                                   |
+| ---------------------------------- | ------------ | ----------- | ----------------------------------------------------------------------------- |
+| `blurType`                         | `BlurType`   | `'xlight'`  | The type of blur effect to apply                                              |
+| `blurAmount`                       | `number`     | `10.0`      | The intensity of the blur effect (0-100)                                      |
+| `ignoreSafeArea`                   | `boolean`    | `false`     | (iOS only) Controls whether the blur effect should ignore all safe area edges |
+| `reducedTransparencyFallbackColor` | `string`     | `'#FFFFFF'` | Fallback color when reduced transparency is enabled                           |
+| `overlayColor`                     | `ColorValue` | `undefined` | The overlay color to apply on top of the blur effect                          |
+| `style`                            | `ViewStyle`  | `undefined` | Style object for the blur view                                                |
+| `children`                         | `ReactNode`  | `undefined` | Child components to render inside the blur view                               |
 
 ### ProgressiveBlurView Props
 
 All props are optional and have sensible defaults.
 
-| Prop                               | Type                                                 | Default                   | Description                                         |
-| ---------------------------------- | ---------------------------------------------------- | ------------------------- | --------------------------------------------------- |
-| `blurType`                         | `BlurType`                                           | `'regular'`               | The type of blur effect to apply                    |
-| `blurAmount`                       | `number`                                             | `20.0`                    | Maximum blur radius in pixels                       |
-| `direction`                        | `'blurredTopClearBottom' \| 'blurredBottomClearTop'` | `'blurredTopClearBottom'` | Direction of the blur gradient                      |
-| `startOffset`                      | `number`                                             | `0.0`                     | Where the gradient starts (0.0 to 1.0)              |
-| `reducedTransparencyFallbackColor` | `string`                                             | `'#FFFFFF'`               | Fallback color when reduced transparency is enabled |
-| `style`                            | `ViewStyle`                                          | `undefined`               | Style object for the blur view                      |
-| `children`                         | `ReactNode`                                          | `undefined`               | Child components to render inside the blur view     |
+| Prop                               | Type                                                 | Default                   | Description                                          |
+| ---------------------------------- | ---------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
+| `blurType`                         | `BlurType`                                           | `'regular'`               | The type of blur effect to apply                     |
+| `blurAmount`                       | `number`                                             | `20.0`                    | Maximum blur radius in pixels                        |
+| `direction`                        | `'blurredTopClearBottom' \| 'blurredBottomClearTop'` | `'blurredTopClearBottom'` | Direction of the blur gradient                       |
+| `startOffset`                      | `number`                                             | `0.0`                     | Where the gradient starts (0.0 to 1.0)               |
+| `reducedTransparencyFallbackColor` | `string`                                             | `'#FFFFFF'`               | Fallback color when reduced transparency is enabled  |
+| `overlayColor`                     | `ColorValue`                                         | `undefined`               | The overlay color to apply on top of the blur effect |
+| `style`                            | `ViewStyle`                                          | `undefined`               | Style object for the blur view                       |
+| `children`                         | `ReactNode`                                          | `undefined`               | Child components to render inside the blur view      |
 
 > **Platform Note**: `ProgressiveBlurView` works on both **iOS** and **Android**.
 >
@@ -555,11 +563,11 @@ All props are optional and have sensible defaults.
 
 All props are optional and have sensible defaults.
 
-| Prop       | Type        | Default     | Description                                                                                          |
-| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------------- |
-| `spacing`  | `number`    | `0`         | (iOS 26+ only) The spacing value between glass elements in the container                            |
-| `style`    | `ViewStyle` | `undefined` | Style object for the glass container                                                                 |
-| `children` | `ReactNode` | `undefined` | Child components to render inside the glass container (typically `LiquidGlassView` components)       |
+| Prop       | Type        | Default     | Description                                                                                    |
+| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------- |
+| `spacing`  | `number`    | `0`         | (iOS 26+ only) The spacing value between glass elements in the container                       |
+| `style`    | `ViewStyle` | `undefined` | Style object for the glass container                                                           |
+| `children` | `ReactNode` | `undefined` | Child components to render inside the glass container (typically `LiquidGlassView` components) |
 
 > **Note**: The `BlurType` and `GlassType` are exported types from the library. See [Blur Types](#blur-types) and [Glass Types](#glass-types) sections below for all available values.
 
@@ -695,6 +703,7 @@ const blurProps: BlurViewProps = {
   blurType: 'systemMaterial',
   blurAmount: 50,
   reducedTransparencyFallbackColor: '#FFFFFF',
+  overlayColor: '#FF000040',
 };
 
 // Example with LiquidGlassView properties

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.blurview:core:1.0.5'
+  implementation 'com.qmdeve.blurview:core:1.0.6'
 }
 
 react {

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

@@ -2,10 +2,15 @@ package com.sbaiahmed1.reactnativeblur
 
 import android.content.Context
 import android.graphics.Color
+import android.graphics.Outline
+import android.os.Build
 import android.util.AttributeSet
 import android.util.Log
 import android.util.TypedValue
+import android.view.View
 import android.view.ViewGroup
+import android.view.ViewOutlineProvider
+import androidx.annotation.RequiresApi
 import com.qmdeve.blurview.widget.BlurViewGroup
 import androidx.core.graphics.toColorInt
 
@@ -22,8 +27,6 @@ class ReactNativeBlurView : BlurViewGroup {
   private var currentBlurRadius = DEFAULT_BLUR_RADIUS
   private var currentOverlayColor = Color.TRANSPARENT
   private var currentCornerRadius = 0f
-  private var originalBackgroundColor: Int? = null
-  private var hasExplicitBackground: Boolean = false
   private var glassTintColor: Int = Color.TRANSPARENT
   private var glassOpacity: Float = 1.0f
   private var viewType: String = "blur"
@@ -84,10 +87,14 @@ class ReactNativeBlurView : BlurViewGroup {
       super.setBlurRadius(currentBlurRadius)
       super.setOverlayColor(currentOverlayColor)
       super.setDownsampleFactor(6.0F)
-      updateCornerRadius()
 
-      // Set transparent background to prevent visual artifacts
-      super.setBackgroundColor(Color.TRANSPARENT)
+      clipChildren = true
+
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+        super.setBackgroundColor(currentOverlayColor)
+      }
+
+      updateCornerRadius()
 
       logDebug("QmBlurView initialized with blurRadius: $currentBlurRadius, overlayColor: $currentOverlayColor")
     } catch (e: Exception) {
@@ -95,30 +102,6 @@ class ReactNativeBlurView : BlurViewGroup {
     }
   }
 
-  /**
-   * Override setBackgroundColor to handle background preservation.
-   * @param color The background color to apply
-   */
-  override fun setBackgroundColor(color: Int) {
-    logDebug("setBackgroundColor called: $color")
-
-    // Store the original background color if it's not transparent
-    if (color != Color.TRANSPARENT) {
-      originalBackgroundColor = color
-      hasExplicitBackground = true
-      logDebug("Stored explicit background color: $color")
-    }
-
-    // Apply background color over blur if explicitly set
-    if (hasExplicitBackground && color != Color.TRANSPARENT) {
-      logDebug("Applying background color over blur: $color")
-      super.setBackgroundColor(color)
-    } else {
-      logDebug("Keeping transparent background for blur effect")
-      super.setBackgroundColor(Color.TRANSPARENT)
-    }
-  }
-
   /**
    * Called when the view is detached from a window.
    * Performs cleanup to prevent memory leaks.
@@ -133,8 +116,6 @@ class ReactNativeBlurView : BlurViewGroup {
    * Helps prevent memory leaks and ensures clean state.
    */
   fun cleanup() {
-    hasExplicitBackground = false
-    originalBackgroundColor = null
     removeCallbacks(null)
     logDebug("View cleaned up")
   }
@@ -167,31 +148,12 @@ class ReactNativeBlurView : BlurViewGroup {
     try {
       // QmBlurView uses setOverlayColor() to set the tint/overlay color
       super.setOverlayColor(currentOverlayColor)
-    } catch (e: Exception) {
-      logError("Failed to set overlay color: ${e.message}", e)
-    }
-  }
 
-  /**
-   * Set the fallback color for reduced transparency accessibility mode.
-   * @param color The color string in hex format (e.g., "#FF0000") or null to clear
-   */
-  fun setReducedTransparencyFallbackColor(color: String?) {
-    color?.let {
-      try {
-        val fallbackColor = it.toColorInt()
-        logDebug("setReducedTransparencyFallbackColor: $color -> $fallbackColor (stored but not applied unless accessibility requires it)")
-
-        // Store the fallback color but don't apply it unless accessibility settings require it
-        // For now, we'll just log it since Android doesn't have a direct equivalent to iOS's
-        // "Reduce Transparency" setting that we can easily check
-        // The blur effect should remain the primary visual
-
-      } catch (e: Exception) {
-        logWarning("Invalid color format for reduced transparency fallback: $color")
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+        super.setBackgroundColor(currentOverlayColor)
       }
-    } ?: run {
-      logDebug("Cleared reduced transparency fallback color")
+    } catch (e: Exception) {
+      logError("Failed to set overlay color: ${e.message}", e)
     }
   }
 
@@ -288,6 +250,10 @@ class ReactNativeBlurView : BlurViewGroup {
         // Restore original blur overlay color
         try {
           super.setOverlayColor(currentOverlayColor)
+
+          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            super.setBackgroundColor(currentOverlayColor)
+          }
         } catch (e: Exception) {
           logError("Failed to restore blur overlay: ${e.message}", e)
         }
@@ -319,6 +285,18 @@ class ReactNativeBlurView : BlurViewGroup {
         currentCornerRadius,
         context.resources.displayMetrics
       )
+
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+        rootView.outlineProvider = object : ViewOutlineProvider() {
+          @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
+          override fun getOutline(view: View, outline: Outline?) {
+            outline?.setRoundRect(0, 0, view.width, view.height, radiusInPixels)
+          }
+        }
+
+        clipToOutline = true
+      }
+
       super.setCornerRadius(radiusInPixels)
       logDebug("Updated corner radius: ${currentCornerRadius}dp -> ${radiusInPixels}px")
     } catch (e: Exception) {

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

@@ -39,16 +39,16 @@ class ReactNativeBlurViewManager : ViewGroupManager<ReactNativeBlurView>(),
     view?.setBlurAmount(blurAmount.toFloat())
   }
 
-  @ReactProp(name = "reducedTransparencyFallbackColor")
-  override fun setReducedTransparencyFallbackColor(view: ReactNativeBlurView?, reducedTransparencyFallbackColor: String?) {
-    view?.setReducedTransparencyFallbackColor(reducedTransparencyFallbackColor)
-  }
-
   @ReactProp(name = "borderRadius")
   override fun setBorderRadius(view: ReactNativeBlurView?, borderRadius: Float) {
     view?.setBorderRadius(borderRadius)
   }
 
+  @ReactProp(name = "reducedTransparencyFallbackColor")
+  override fun setReducedTransparencyFallbackColor(view: ReactNativeBlurView?, reducedTransparencyFallbackColor: String?) {
+    // no-op
+  }
+
   @ReactProp(name = "ignoreSafeArea")
   override fun setIgnoreSafeArea(view: ReactNativeBlurView?, ignoreSafeArea: Boolean) {
     // no-op

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

@@ -90,7 +90,7 @@ class ReactNativeProgressiveBlurView : FrameLayout {
         setDownsampleFactor(6.0F)
         blurRounds = 3
         overlayColor = currentOverlayColor
-        setBackgroundColor(Color.TRANSPARENT)
+        setBackgroundColor(currentOverlayColor)
       }
       addView(blurView)
 
@@ -209,26 +209,6 @@ class ReactNativeProgressiveBlurView : FrameLayout {
     canvas.restoreToCount(saveCount)
   }
 
-  /**
-   * Override setBackgroundColor to handle background preservation.
-   */
-  override fun setBackgroundColor(color: Int) {
-    logDebug("setBackgroundColor called: $color")
-
-    if (color != Color.TRANSPARENT) {
-      hasExplicitBackground = true
-      logDebug("Stored explicit background color: $color")
-    }
-
-    if (hasExplicitBackground && color != Color.TRANSPARENT) {
-      logDebug("Applying background color: $color")
-      super.setBackgroundColor(color)
-    } else {
-      logDebug("Keeping transparent background for blur effect")
-      super.setBackgroundColor(Color.TRANSPARENT)
-    }
-  }
-
   /**
    * Called when the view is detached from a window.
    */
@@ -320,25 +300,4 @@ class ReactNativeProgressiveBlurView : FrameLayout {
       logError("Failed to set overlay color: ${e.message}", e)
     }
   }
-
-  /**
-   * Set the fallback color for reduced transparency accessibility mode.
-   * @param color The color string in hex format (e.g., "#FF0000") or null to clear
-   */
-  fun setReducedTransparencyFallbackColor(color: String?) {
-    if (color.isNullOrBlank()) {
-      logDebug("Cleared reduced transparency fallback color")
-      return
-    }
-
-    try {
-      val fallbackColor = color.toColorInt()
-      logDebug("setReducedTransparencyFallbackColor: $color -> ${Integer.toHexString(fallbackColor)}")
-      // Android doesn't have a direct equivalent to iOS's "Reduce Transparency" setting
-    } catch (e: IllegalArgumentException) {
-      logWarning("Invalid color format for reduced transparency fallback: $color - ${e.message}")
-    } catch (e: Exception) {
-      logError("Error parsing reduced transparency fallback color: $color", e)
-    }
-  }
 }

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

@@ -62,7 +62,7 @@ class ReactNativeProgressiveBlurViewManager : SimpleViewManager<ReactNativeProgr
     view: ReactNativeProgressiveBlurView?,
     reducedTransparencyFallbackColor: String?
   ) {
-    view?.setReducedTransparencyFallbackColor(reducedTransparencyFallbackColor)
+    // no-op
   }
 
   /**

package/lib/module/BlurView.js

@@ -30,11 +30,15 @@ export const BlurView = ({
   blurType = 'xlight',
   blurAmount = 10,
   reducedTransparencyFallbackColor = '#FFFFFF',
+  overlayColor,
   style,
   children,
   ignoreSafeArea = false,
   ...props
 }) => {
+  const overlay = {
+    backgroundColor: overlayColor
+  };
   const commonProps = {
     blurType,
     blurAmount,
@@ -45,7 +49,7 @@ export const BlurView = ({
   // If no children, render the blur view directly (for background use)
   if (!Children.count(children)) {
     return /*#__PURE__*/_jsx(ReactNativeBlurView, {
-      style: style,
+      style: [style, overlay],
       ...commonProps,
       ...props
     });
@@ -53,17 +57,19 @@ export const BlurView = ({
 
   // If children exist, use the style default for Android
   if (Platform.OS === 'android') {
-    return /*#__PURE__*/_jsx(ReactNativeBlurView, {
+    return /*#__PURE__*/_jsxs(ReactNativeBlurView, {
       style: style,
       ...commonProps,
       ...props,
-      children: children
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [StyleSheet.absoluteFill, overlay]
+      }), children]
     });
   }
 
   // If children exist, use the absolute positioning pattern for iOS and others
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
+    style: [styles.container, style, overlay],
     children: [/*#__PURE__*/_jsx(ReactNativeBlurView, {
       style: StyleSheet.absoluteFill,
       ...commonProps,

package/lib/module/BlurView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Children","Platform","StyleSheet","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","style","children","ignoreSafeArea","props","commonProps","count","OS","styles","container","absoluteFill","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEzD,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAgD9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAiC,GAAGA,CAAC;EAChDC,QAAQ,GAAG,QAAQ;EACnBC,UAAU,GAAG,EAAE;EACfC,gCAAgC,GAAG,SAAS;EAC5CC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAG,KAAK;EACtB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,WAA0B,GAAG;IACjCP,QAAQ;IACRC,UAAU;IACVI,cAAc;IACdH;EACF,CAAC;;EAED;EACA,IAAI,CAACZ,QAAQ,CAACkB,KAAK,CAACJ,QAAQ,CAAC,EAAE;IAC7B,oBAAOR,IAAA,CAACF,mBAAmB;MAACS,KAAK,EAAEA,KAAM;MAAA,GAAKI,WAAW;MAAA,GAAMD;IAAK,CAAG,CAAC;EAC1E;;EAEA;EACA,IAAIf,QAAQ,CAACkB,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEb,IAAA,CAACF,mBAAmB;MAACS,KAAK,EAAEA,KAAM;MAAA,GAAKI,WAAW;MAAA,GAAMD,KAAK;MAAAF,QAAA,EAC1DA;IAAQ,CACU,CAAC;EAE1B;;EAEA;EACA,oBACEN,KAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAACO,MAAM,CAACC,SAAS,EAAER,KAAK,CAAE;IAAAC,QAAA,gBAErCR,IAAA,CAACF,mBAAmB;MAClBS,KAAK,EAAEX,UAAU,CAACoB,YAAa;MAAA,GAC3BL,WAAW;MAAA,GACXD;IAAK,CACV,CAAC,eAEFV,IAAA,CAACH,IAAI;MAACU,KAAK,EAAEO,MAAM,CAACN,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeL,QAAQ;AAEvB,MAAMW,MAAM,GAAGlB,UAAU,CAACqB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDX,QAAQ,EAAE;IACRU,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Children","Platform","StyleSheet","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","overlayColor","style","children","ignoreSafeArea","props","overlay","backgroundColor","commonProps","count","OS","absoluteFill","styles","container","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEzD,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAuD9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAiC,GAAGA,CAAC;EAChDC,QAAQ,GAAG,QAAQ;EACnBC,UAAU,GAAG,EAAE;EACfC,gCAAgC,GAAG,SAAS;EAC5CC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAG,KAAK;EACtB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEN;EAAa,CAAC;EACjD,MAAMO,WAA0B,GAAG;IACjCV,QAAQ;IACRC,UAAU;IACVK,cAAc;IACdJ;EACF,CAAC;;EAED;EACA,IAAI,CAACZ,QAAQ,CAACqB,KAAK,CAACN,QAAQ,CAAC,EAAE;IAC7B,oBACET,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAE,CAACA,KAAK,EAAEI,OAAO,CAAE;MAAA,GACpBE,WAAW;MAAA,GACXH;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,IAAIhB,QAAQ,CAACqB,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEd,KAAA,CAACJ,mBAAmB;MAACU,KAAK,EAAEA,KAAM;MAAA,GAAKM,WAAW;MAAA,GAAMH,KAAK;MAAAF,QAAA,gBAC3DT,IAAA,CAACH,IAAI;QAACW,KAAK,EAAE,CAACZ,UAAU,CAACqB,YAAY,EAAEL,OAAO;MAAE,CAAE,CAAC,EAElDH,QAAQ;IAAA,CACU,CAAC;EAE1B;;EAEA;EACA,oBACEP,KAAA,CAACL,IAAI;IAACW,KAAK,EAAE,CAACU,MAAM,CAACC,SAAS,EAAEX,KAAK,EAAEI,OAAO,CAAE;IAAAH,QAAA,gBAE9CT,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAEZ,UAAU,CAACqB,YAAa;MAAA,GAC3BH,WAAW;MAAA,GACXH;IAAK,CACV,CAAC,eAEFX,IAAA,CAACH,IAAI;MAACW,KAAK,EAAEU,MAAM,CAACT,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeN,QAAQ;AAEvB,MAAMe,MAAM,GAAGtB,UAAU,CAACwB,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDb,QAAQ,EAAE;IACRY,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/LiquidGlassContainer.js

@@ -12,6 +12,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * Platform: iOS only (iOS 26+)
  *
+ * @platform ios
+ *
  * @example
  * ```tsx
  * <LiquidGlassContainer spacing={20} style={{ flex: 1 }}>

package/lib/module/LiquidGlassContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","View","ReactNativeLiquidGlassContainer","jsx","_jsx","LiquidGlassContainer","spacing","style","children","rest","isCompatibleIOS","OS","parseInt","Version"],"sourceRoot":"../../src","sources":["LiquidGlassContainer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,IAAI,QAAwB,cAAc;AAC7D,OAAOC,+BAA+B,MAAM,kDAAkD;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAW/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAyD,GAAGA,CAAC;EACxEC,OAAO,GAAG,CAAC;EACXC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,eAAe,GACnBV,QAAQ,CAACW,EAAE,KAAK,KAAK,IAAIC,QAAQ,CAACZ,QAAQ,CAACa,OAAO,EAAY,EAAE,CAAC,IAAI,EAAE;EAEzE,IAAI,CAACH,eAAe,EAAE;IACpB;IACA,oBACEN,IAAA,CAACH,IAAI;MAACM,KAAK,EAAEA,KAAM;MAAA,GAAKE,IAAI;MAAAD,QAAA,EACzBA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEJ,IAAA,CAACF,+BAA+B;IAACI,OAAO,EAAEA,OAAQ;IAACC,KAAK,EAAEA,KAAM;IAAA,GAAKE,IAAI;IAAAD,QAAA,EACtEA;EAAQ,CACsB,CAAC;AAEtC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Platform","View","ReactNativeLiquidGlassContainer","jsx","_jsx","LiquidGlassContainer","spacing","style","children","rest","isCompatibleIOS","OS","parseInt","Version"],"sourceRoot":"../../src","sources":["LiquidGlassContainer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,IAAI,QAAwB,cAAc;AAC7D,OAAOC,+BAA+B,MAAM,kDAAkD;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAY/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAyD,GAAGA,CAAC;EACxEC,OAAO,GAAG,CAAC;EACXC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,eAAe,GACnBV,QAAQ,CAACW,EAAE,KAAK,KAAK,IAAIC,QAAQ,CAACZ,QAAQ,CAACa,OAAO,EAAY,EAAE,CAAC,IAAI,EAAE;EAEzE,IAAI,CAACH,eAAe,EAAE;IACpB;IACA,oBACEN,IAAA,CAACH,IAAI;MAACM,KAAK,EAAEA,KAAM;MAAA,GAAKE,IAAI;MAAAD,QAAA,EACzBA;IAAQ,CACL,CAAC;EAEX;EAEA,oBACEJ,IAAA,CAACF,+BAA+B;IAACI,OAAO,EAAEA,OAAQ;IAACC,KAAK,EAAEA,KAAM;IAAA,GAAKE,IAAI;IAAAD,QAAA,EACtEA;EAAQ,CACsB,CAAC;AAEtC,CAAC","ignoreList":[]}

package/lib/module/LiquidGlassView.js

@@ -53,8 +53,14 @@ export const LiquidGlassView = ({
   // Only render on iOS 26+ (fallback otherwise)
   if (!isIos || isIos && Number.parseInt(String(Platform.Version), 10) < 26) {
     console.warn('LiquidGlassView is only supported on iOS. Rendering children without glass effect.');
+
+    // Compute overlay color with opacity for Android native handling
+    const overlayColorWithAlpha = glassTintColor + Math.floor(glassOpacity * 255).toString(16).padStart(2, '0');
     return /*#__PURE__*/_jsx(BlurView, {
       blurAmount: 70,
+      overlayColor: overlayColorWithAlpha,
+      reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
+      ignoreSafeArea: ignoreSafeArea,
       style: style,
       children: children
     });

package/lib/module/LiquidGlassView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","ReactNativeLiquidGlassView","BlurView","jsx","_jsx","LiquidGlassView","glassType","glassTintColor","glassOpacity","reducedTransparencyFallbackColor","isInteractive","ignoreSafeArea","style","children","props","isIos","OS","Number","parseInt","String","Version","console","warn","blurAmount"],"sourceRoot":"../../src","sources":["LiquidGlassView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,cAAc;AAEvC,OAAOC,0BAA0B,MAE1B,6CAA6C;AACpD,OAAOC,QAAQ,MAAM,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAwDlC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAA+C,GAAGA,CAAC;EAC9DC,SAAS,GAAG,OAAO;EACnBC,cAAc,GAAG,OAAO;EACxBC,YAAY,GAAG,GAAG;EAClBC,gCAAgC,GAAG,SAAS;EAC5CC,aAAa,GAAG,IAAI;EACpBC,cAAc,GAAG,KAAK;EACtBC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGf,QAAQ,CAACgB,EAAE,KAAK,KAAK;;EAEnC;EACA,IAAI,CAACD,KAAK,IAAKA,KAAK,IAAIE,MAAM,CAACC,QAAQ,CAACC,MAAM,CAACnB,QAAQ,CAACoB,OAAO,CAAC,EAAE,EAAE,CAAC,GAAG,EAAG,EAAE;IAC3EC,OAAO,CAACC,IAAI,CACV,oFACF,CAAC;IACD,oBACElB,IAAA,CAACF,QAAQ;MAACqB,UAAU,EAAE,EAAG;MAACX,KAAK,EAAEA,KAAM;MAAAC,QAAA,EACpCA;IAAQ,CACD,CAAC;EAEf;;EAEA;EACA,oBACET,IAAA,CAACH,0BAA0B;IACzBK,SAAS,EAAEA,SAAU;IACrBC,cAAc,EAAEA,cAAe;IAC/BC,YAAY,EAAEA,YAAa;IAC3BC,gCAAgC,EAAEA,gCAAiC;IACnEC,aAAa,EAAEA,aAAc;IAC7BC,cAAc,EAAEA,cAAe;IAC/BC,KAAK,EAAEA,KAAM;IAAA,GACTE,KAAK;IAAAD,QAAA,EAERA;EAAQ,CACiB,CAAC;AAEjC,CAAC;AAED,eAAeR,eAAe","ignoreList":[]}
+{"version":3,"names":["React","Platform","ReactNativeLiquidGlassView","BlurView","jsx","_jsx","LiquidGlassView","glassType","glassTintColor","glassOpacity","reducedTransparencyFallbackColor","isInteractive","ignoreSafeArea","style","children","props","isIos","OS","Number","parseInt","String","Version","console","warn","overlayColorWithAlpha","Math","floor","toString","padStart","blurAmount","overlayColor"],"sourceRoot":"../../src","sources":["LiquidGlassView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,cAAc;AAEvC,OAAOC,0BAA0B,MAE1B,6CAA6C;AACpD,OAAOC,QAAQ,MAAM,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAA+C,GAAGA,CAAC;EAC9DC,SAAS,GAAG,OAAO;EACnBC,cAAc,GAAG,OAAO;EACxBC,YAAY,GAAG,GAAG;EAClBC,gCAAgC,GAAG,SAAS;EAC5CC,aAAa,GAAG,IAAI;EACpBC,cAAc,GAAG,KAAK;EACtBC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGf,QAAQ,CAACgB,EAAE,KAAK,KAAK;;EAEnC;EACA,IAAI,CAACD,KAAK,IAAKA,KAAK,IAAIE,MAAM,CAACC,QAAQ,CAACC,MAAM,CAACnB,QAAQ,CAACoB,OAAO,CAAC,EAAE,EAAE,CAAC,GAAG,EAAG,EAAE;IAC3EC,OAAO,CAACC,IAAI,CACV,oFACF,CAAC;;IAED;IACA,MAAMC,qBAAqB,GACzBhB,cAAc,GACdiB,IAAI,CAACC,KAAK,CAACjB,YAAY,GAAG,GAAG,CAAC,CAC3BkB,QAAQ,CAAC,EAAE,CAAC,CACZC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IAErB,oBACEvB,IAAA,CAACF,QAAQ;MACP0B,UAAU,EAAE,EAAG;MACfC,YAAY,EAAEN,qBAAsB;MACpCd,gCAAgC,EAAEA,gCAAiC;MACnEE,cAAc,EAAEA,cAAe;MAC/BC,KAAK,EAAEA,KAAM;MAAAC,QAAA,EAEZA;IAAQ,CACD,CAAC;EAEf;;EAEA;EACA,oBACET,IAAA,CAACH,0BAA0B;IACzBK,SAAS,EAAEA,SAAU;IACrBC,cAAc,EAAEA,cAAe;IAC/BC,YAAY,EAAEA,YAAa;IAC3BC,gCAAgC,EAAEA,gCAAiC;IACnEC,aAAa,EAAEA,aAAc;IAC7BC,cAAc,EAAEA,cAAe;IAC/BC,KAAK,EAAEA,KAAM;IAAA,GACTE,KAAK;IAAAD,QAAA,EAERA;EAAQ,CACiB,CAAC;AAEjC,CAAC;AAED,eAAeR,eAAe","ignoreList":[]}

package/lib/module/ProgressiveBlurView.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React from 'react';
+import React, { Children } from 'react';
 import { StyleSheet, View } from 'react-native';
 import ReactNativeProgressiveBlurView from './ReactNativeProgressiveBlurViewNativeComponent';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -50,26 +50,31 @@ export const ProgressiveBlurView = ({
   direction = 'blurredTopClearBottom',
   startOffset = 0.0,
   reducedTransparencyFallbackColor = '#FFFFFF',
+  overlayColor,
   style,
   children,
   ...props
 }) => {
+  const overlay = {
+    backgroundColor: overlayColor
+  };
+
   // If no children, render the blur view directly (for background use)
-  if (React.Children.count(children) === 0) {
+  if (!Children.count(children)) {
     return /*#__PURE__*/_jsx(ReactNativeProgressiveBlurView, {
       blurType: blurType,
       blurAmount: blurAmount,
       direction: direction,
       startOffset: startOffset,
       reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
-      style: style,
+      style: [style, overlay],
       ...props
     });
   }
 
   // If children exist, use the absolute positioning pattern
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
+    style: [styles.container, style, overlay],
     children: [/*#__PURE__*/_jsx(ReactNativeProgressiveBlurView, {
       blurType: blurType,
       blurAmount: blurAmount,

package/lib/module/ProgressiveBlurView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","ReactNativeProgressiveBlurView","jsx","_jsx","jsxs","_jsxs","ProgressiveBlurView","blurType","blurAmount","direction","startOffset","reducedTransparencyFallbackColor","style","children","props","Children","count","styles","container","absoluteFill","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["ProgressiveBlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,OAAOC,8BAA8B,MAG9B,iDAAiD;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA4DzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAuD,GAAGA,CAAC;EACtEC,QAAQ,GAAG,SAAS;EACpBC,UAAU,GAAG,EAAE;EACfC,SAAS,GAAG,uBAAuB;EACnCC,WAAW,GAAG,GAAG;EACjBC,gCAAgC,GAAG,SAAS;EAC5CC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,IAAIhB,KAAK,CAACiB,QAAQ,CAACC,KAAK,CAACH,QAAQ,CAAC,KAAK,CAAC,EAAE;IACxC,oBACEV,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEA,KAAM;MAAA,GACTE;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACET,KAAA,CAACL,IAAI;IAACY,KAAK,EAAE,CAACK,MAAM,CAACC,SAAS,EAAEN,KAAK,CAAE;IAAAC,QAAA,gBAErCV,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEb,UAAU,CAACoB,YAAa;MAAA,GAC3BL;IAAK,CACV,CAAC,eACFX,IAAA,CAACH,IAAI;MAACY,KAAK,EAAEK,MAAM,CAACJ,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeP,mBAAmB;AAElC,MAAMW,MAAM,GAAGlB,UAAU,CAACqB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDT,QAAQ,EAAE;IACRQ,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Children","StyleSheet","View","ReactNativeProgressiveBlurView","jsx","_jsx","jsxs","_jsxs","ProgressiveBlurView","blurType","blurAmount","direction","startOffset","reducedTransparencyFallbackColor","overlayColor","style","children","props","overlay","backgroundColor","count","styles","container","absoluteFill","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["ProgressiveBlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,OAAOC,8BAA8B,MAG9B,iDAAiD;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAmEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAuD,GAAGA,CAAC;EACtEC,QAAQ,GAAG,SAAS;EACpBC,UAAU,GAAG,EAAE;EACfC,SAAS,GAAG,uBAAuB;EACnCC,WAAW,GAAG,GAAG;EACjBC,gCAAgC,GAAG,SAAS;EAC5CC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEL;EAAa,CAAC;;EAEjD;EACA,IAAI,CAACd,QAAQ,CAACoB,KAAK,CAACJ,QAAQ,CAAC,EAAE;IAC7B,oBACEX,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEE,KAAK,EAAE,CAACA,KAAK,EAAEG,OAAO,CAAE;MAAA,GACpBD;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEV,KAAA,CAACL,IAAI;IAACa,KAAK,EAAE,CAACM,MAAM,CAACC,SAAS,EAAEP,KAAK,EAAEG,OAAO,CAAE;IAAAF,QAAA,gBAE9CX,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEE,KAAK,EAAEd,UAAU,CAACsB,YAAa;MAAA,GAC3BN;IAAK,CACV,CAAC,eAEFZ,IAAA,CAACH,IAAI;MAACa,KAAK,EAAEM,MAAM,CAACL,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeR,mBAAmB;AAElC,MAAMa,MAAM,GAAGpB,UAAU,CAACuB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDV,QAAQ,EAAE;IACRS,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/BlurView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ViewStyle, StyleProp } from 'react-native';
+import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
 import { type BlurType } from './ReactNativeBlurViewNativeComponent';
 export interface BlurViewProps {
     /**
@@ -22,6 +22,12 @@ export interface BlurViewProps {
      * @default '#FFFFFF'
      */
     reducedTransparencyFallbackColor?: string;
+    /**
+     * @description The overlay color to apply on top of the blur effect
+     *
+     * @default undefined
+     */
+    overlayColor?: ColorValue;
     /**
      * @description style object for the blur view
      *

package/lib/typescript/src/BlurView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2C5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrE,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/typescript/src/LiquidGlassContainer.d.ts

@@ -4,6 +4,7 @@ export interface LiquidGlassContainerProps extends ViewProps {
     /**
      * The spacing value for the glass container effect
      * Platform: iOS only (iOS 26+)
+     *
      * @default 0
      */
     spacing?: number;
@@ -16,6 +17,8 @@ export interface LiquidGlassContainerProps extends ViewProps {
  *
  * Platform: iOS only (iOS 26+)
  *
+ * @platform ios
+ *
  * @example
  * ```tsx
  * <LiquidGlassContainer spacing={20} style={{ flex: 1 }}>

package/lib/typescript/src/LiquidGlassContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiquidGlassContainer.d.ts","sourceRoot":"","sources":["../../../src/LiquidGlassContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAuBpE,CAAC"}
+{"version":3,"file":"LiquidGlassContainer.d.ts","sourceRoot":"","sources":["../../../src/LiquidGlassContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAuBpE,CAAC"}

package/lib/typescript/src/LiquidGlassView.d.ts

@@ -5,18 +5,22 @@ export interface LiquidGlassViewProps {
     /**
      * The type of glass effect to apply
      * Platform: iOS 26+ only
+     *
      * @default 'clear'
      */
-    glassType?: GlassType /**
+    glassType?: GlassType;
+    /**
      * The tint color of the glass effect
      * Accepts hex color strings like '#FFFFFF' or color names
      * Platform: iOS 26+ only
+     *
      * @default 'clear'
-     */;
+     */
     glassTintColor?: string;
     /**
      * The opacity of the glass effect (0-1)
      * Platform: iOS 26+ only
+     *
      * @default 1.0
      */
     glassOpacity?: number;
@@ -24,18 +28,21 @@ export interface LiquidGlassViewProps {
      * Fallback color when reduced transparency is enabled or on older iOS versions
      * Accepts hex color strings like '#FFFFFF'
      * Platform: iOS only
+     *
      * @default '#FFFFFF'
      */
     reducedTransparencyFallbackColor?: string;
     /**
      * Whether the glass view should be interactive
      * Platform: iOS 26+ only
+     *
      * @default true
      */
     isInteractive?: boolean;
     /**
      * Whether the glass view should ignore safe area insets
      * Platform: iOS 26+ only
+     *
      * @default false
      */
     ignoreSafeArea?: boolean;

package/lib/typescript/src/LiquidGlassView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiquidGlassView.d.ts","sourceRoot":"","sources":["../../../src/LiquidGlassView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAmC,EACjC,KAAK,SAAS,EACf,MAAM,6CAA6C,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;;;;;OAKnB,CAAC;IACJ,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwC1D,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"LiquidGlassView.d.ts","sourceRoot":"","sources":["../../../src/LiquidGlassView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAmC,EACjC,KAAK,SAAS,EACf,MAAM,6CAA6C,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;;OAMG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsD1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/typescript/src/ProgressiveBlurView.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ViewStyle, StyleProp } from 'react-native';
+import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
 import { type BlurType, type ProgressiveBlurDirection } from './ReactNativeProgressiveBlurViewNativeComponent';
 export interface ProgressiveBlurViewProps {
     /**
@@ -39,6 +39,12 @@ export interface ProgressiveBlurViewProps {
      * @default '#FFFFFF'
      */
     reducedTransparencyFallbackColor?: string;
+    /**
+     * @description The overlay color to apply on top of the blur effect
+     *
+     * @default undefined
+     */
+    overlayColor?: ColorValue;
     /**
      * @description style object for the progressive blur view
      *

package/lib/typescript/src/ProgressiveBlurView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressiveBlurView.d.ts","sourceRoot":"","sources":["../../../src/ProgressiveBlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAuC,EACrC,KAAK,QAAQ,EACb,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAEzD,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,wBAAwB,CAAC;IAErC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyClE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ProgressiveBlurView.d.ts","sourceRoot":"","sources":["../../../src/ProgressiveBlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrE,OAAuC,EACrC,KAAK,QAAQ,EACb,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAEzD,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,wBAAwB,CAAC;IAErC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA6ClE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/package.json

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

package/src/BlurView.tsx

@@ -1,6 +1,6 @@
 import React, { Children } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
-import type { ViewStyle, StyleProp } from 'react-native';
+import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
 import ReactNativeBlurView, {
   type BlurType,
 } from './ReactNativeBlurViewNativeComponent';
@@ -29,6 +29,13 @@ export interface BlurViewProps {
    */
   reducedTransparencyFallbackColor?: string;
 
+  /**
+   * @description The overlay color to apply on top of the blur effect
+   *
+   * @default undefined
+   */
+  overlayColor?: ColorValue;
+
   /**
    * @description style object for the blur view
    *
@@ -77,11 +84,13 @@ export const BlurView: React.FC<BlurViewProps> = ({
   blurType = 'xlight',
   blurAmount = 10,
   reducedTransparencyFallbackColor = '#FFFFFF',
+  overlayColor,
   style,
   children,
   ignoreSafeArea = false,
   ...props
 }) => {
+  const overlay = { backgroundColor: overlayColor };
   const commonProps: BlurViewProps = {
     blurType,
     blurAmount,
@@ -91,13 +100,21 @@ export const BlurView: React.FC<BlurViewProps> = ({
 
   // If no children, render the blur view directly (for background use)
   if (!Children.count(children)) {
-    return <ReactNativeBlurView style={style} {...commonProps} {...props} />;
+    return (
+      <ReactNativeBlurView
+        style={[style, overlay]}
+        {...commonProps}
+        {...props}
+      />
+    );
   }
 
   // If children exist, use the style default for Android
   if (Platform.OS === 'android') {
     return (
       <ReactNativeBlurView style={style} {...commonProps} {...props}>
+        <View style={[StyleSheet.absoluteFill, overlay]} />
+
         {children}
       </ReactNativeBlurView>
     );
@@ -105,7 +122,7 @@ export const BlurView: React.FC<BlurViewProps> = ({
 
   // If children exist, use the absolute positioning pattern for iOS and others
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, style, overlay]}>
       {/* Blur effect positioned absolutely behind content */}
       <ReactNativeBlurView
         style={StyleSheet.absoluteFill}

package/src/LiquidGlassContainer.tsx

@@ -6,6 +6,7 @@ export interface LiquidGlassContainerProps extends ViewProps {
   /**
    * The spacing value for the glass container effect
    * Platform: iOS only (iOS 26+)
+   *
    * @default 0
    */
   spacing?: number;
@@ -19,6 +20,8 @@ export interface LiquidGlassContainerProps extends ViewProps {
  *
  * Platform: iOS only (iOS 26+)
  *
+ * @platform ios
+ *
  * @example
  * ```tsx
  * <LiquidGlassContainer spacing={20} style={{ flex: 1 }}>

package/src/LiquidGlassView.tsx

@@ -10,19 +10,24 @@ export interface LiquidGlassViewProps {
   /**
    * The type of glass effect to apply
    * Platform: iOS 26+ only
+   *
    * @default 'clear'
    */
-  glassType?: GlassType /**
+  glassType?: GlassType;
+
+  /**
    * The tint color of the glass effect
    * Accepts hex color strings like '#FFFFFF' or color names
    * Platform: iOS 26+ only
+   *
    * @default 'clear'
-   */;
+   */
   glassTintColor?: string;
 
   /**
    * The opacity of the glass effect (0-1)
    * Platform: iOS 26+ only
+   *
    * @default 1.0
    */
   glassOpacity?: number;
@@ -31,6 +36,7 @@ export interface LiquidGlassViewProps {
    * Fallback color when reduced transparency is enabled or on older iOS versions
    * Accepts hex color strings like '#FFFFFF'
    * Platform: iOS only
+   *
    * @default '#FFFFFF'
    */
   reducedTransparencyFallbackColor?: string;
@@ -38,6 +44,7 @@ export interface LiquidGlassViewProps {
   /**
    * Whether the glass view should be interactive
    * Platform: iOS 26+ only
+   *
    * @default true
    */
   isInteractive?: boolean;
@@ -45,6 +52,7 @@ export interface LiquidGlassViewProps {
   /**
    * Whether the glass view should ignore safe area insets
    * Platform: iOS 26+ only
+   *
    * @default false
    */
   ignoreSafeArea?: boolean;
@@ -110,8 +118,22 @@ export const LiquidGlassView: React.FC<LiquidGlassViewProps> = ({
     console.warn(
       'LiquidGlassView is only supported on iOS. Rendering children without glass effect.'
     );
+
+    // Compute overlay color with opacity for Android native handling
+    const overlayColorWithAlpha =
+      glassTintColor +
+      Math.floor(glassOpacity * 255)
+        .toString(16)
+        .padStart(2, '0');
+
     return (
-      <BlurView blurAmount={70} style={style}>
+      <BlurView
+        blurAmount={70}
+        overlayColor={overlayColorWithAlpha}
+        reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
+        ignoreSafeArea={ignoreSafeArea}
+        style={style}
+      >
         {children}
       </BlurView>
     );

package/src/ProgressiveBlurView.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { Children } from 'react';
 import { StyleSheet, View } from 'react-native';
-import type { ViewStyle, StyleProp } from 'react-native';
+import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
 import ReactNativeProgressiveBlurView, {
   type BlurType,
   type ProgressiveBlurDirection,
@@ -49,6 +49,13 @@ export interface ProgressiveBlurViewProps {
    */
   reducedTransparencyFallbackColor?: string;
 
+  /**
+   * @description The overlay color to apply on top of the blur effect
+   *
+   * @default undefined
+   */
+  overlayColor?: ColorValue;
+
   /**
    * @description style object for the progressive blur view
    *
@@ -110,12 +117,15 @@ export const ProgressiveBlurView: React.FC<ProgressiveBlurViewProps> = ({
   direction = 'blurredTopClearBottom',
   startOffset = 0.0,
   reducedTransparencyFallbackColor = '#FFFFFF',
+  overlayColor,
   style,
   children,
   ...props
 }) => {
+  const overlay = { backgroundColor: overlayColor };
+
   // If no children, render the blur view directly (for background use)
-  if (React.Children.count(children) === 0) {
+  if (!Children.count(children)) {
     return (
       <ReactNativeProgressiveBlurView
         blurType={blurType}
@@ -123,7 +133,7 @@ export const ProgressiveBlurView: React.FC<ProgressiveBlurViewProps> = ({
         direction={direction}
         startOffset={startOffset}
         reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
-        style={style}
+        style={[style, overlay]}
         {...props}
       />
     );
@@ -131,7 +141,7 @@ export const ProgressiveBlurView: React.FC<ProgressiveBlurViewProps> = ({
 
   // If children exist, use the absolute positioning pattern
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, style, overlay]}>
       {/* Blur effect positioned absolutely behind content */}
       <ReactNativeProgressiveBlurView
         blurType={blurType}
@@ -142,6 +152,7 @@ export const ProgressiveBlurView: React.FC<ProgressiveBlurViewProps> = ({
         style={StyleSheet.absoluteFill}
         {...props}
       />
+
       <View style={styles.children}>{children}</View>
     </View>
   );