@sbaiahmed1/react-native-blur 4.1.1 → 4.2.0

package/README.md

@@ -1,8 +1,8 @@
 # @sbaiahmed1/react-native-blur
 
-A modern React Native library providing **three specialized components** for advanced visual effects: `BlurView` for native blur effects, `LiquidGlassView` for cutting-edge liquid glass effects on iOS 26+ (with Android fallback to enhanced blur) and `ProgressiveBlurView` for smooth, variable blur transitions.`
+A modern React Native library providing **four specialized components** for advanced visual effects: `BlurView` for native blur effects, `LiquidGlassView` for cutting-edge liquid glass effects on iOS 26+ (with Android fallback to enhanced blur), `LiquidGlassContainer` for iOS 26+ glass container effects with configurable spacing, and `ProgressiveBlurView` for smooth, variable blur transitions.
 
-> **📦 Current Version: 4.0.0** | **⚠️ Breaking Changes**: If upgrading from 3.x, see [Breaking Changes](#️-breaking-changes-in-v400) section.
+> **⚠️ Breaking Changes**: If upgrading from 3.x, see [Breaking Changes](#️-breaking-changes-in-v400) section.
 
 <div align="center">
   <p>
@@ -133,15 +133,16 @@ import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
 
 ## Features
 
-- � **Three Specialized Components**:
+- ✨ **Four Specialized Components**:
   - `BlurView` - Dedicated blur effects component with multiple blur types
   - `ProgressiveBlurView` - Variable/gradient blur transitions (iOS & Android)
   - `LiquidGlassView` - Separate component for iOS 26+ liquid glass effects
+  - `LiquidGlassContainer` - iOS 26+ glass container with configurable spacing for grouping glass elements
 - �🌊 **Liquid Glass Effects**: Revolutionary glass effects using iOS 26+ UIGlassEffect API
 - 🎨 **Multiple Blur Types**: Support for various blur styles including system materials on iOS
 - 📱 **Cross-Platform**: Works on both iOS and Android
 - ♿ **Accessibility**: Automatic fallback for reduced transparency settings
-- 🔧 **TypeScript**: Full TypeScript support with proper type definitions for both components
+- 🔧 **TypeScript**: Full TypeScript support with proper type definitions for all components
 - 🚀 **Turbo Module**: Built with React Native's new architecture (Fabric)
 - 🎯 **Customizable**: Adjustable blur intensity, glass tint colors, and opacity
 - 💡 **Performance Optimized**: Uses hardware acceleration for smooth rendering
@@ -153,12 +154,12 @@ import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
 
 ### Key Advantages
 
-- **Two Specialized Components**: Separate `BlurView` and `LiquidGlassView` components for clean architecture
-- **Liquid Glass Effects**: Only library with iOS 26+ UIGlassEffect support
+- **Four Specialized Components**: Separate `BlurView`, `LiquidGlassView`, `LiquidGlassContainer`, and `ProgressiveBlurView` components for clean architecture
+- **Liquid Glass Effects**: Only library with iOS 26+ UIGlassEffect and UIGlassContainerEffect support
 - **Real Android Blur**: Hardware-accelerated blur on Android (not overlay)
 - **New Architecture**: Built for Fabric/Turbo Modules
 - **Modern Stack**: SwiftUI for iOS, Kotlin for Android
-- **Full TypeScript**: Complete type definitions for both components
+- **Full TypeScript**: Complete type definitions for all components
 
 ### vs. @react-native-community/blur
 
@@ -245,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.4.3'
+> implementation 'com.qmdeve:QmBlurView:1.0.5-Beta01'
 > ```
 
 The implementation automatically handles different Android versions:
@@ -256,7 +257,7 @@ The implementation automatically handles different Android versions:
 
 ## Usage
 
-The library now provides **three specialized components** for different visual effects:
+The library now provides **four specialized components** for different visual effects:
 
 ### BlurView - Standard Blur Effects
 
@@ -417,9 +418,91 @@ function InteractiveGlass() {
 }
 ```
 
+### LiquidGlassContainer - Glass Container Effects (iOS 26+)
+
+Use `LiquidGlassContainer` to create a glass container with configurable spacing between glass elements. This component uses iOS 26+ `UIGlassContainerEffect` to create beautiful grouped glass effects.
+
+**Note:** This component automatically falls back to a regular View on Android and older iOS versions.
+
+#### Basic Usage
+
+```tsx
+import React from 'react';
+import { LiquidGlassContainer, LiquidGlassView } from '@sbaiahmed1/react-native-blur';
+
+function GlassContainerExample() {
+  return (
+    <LiquidGlassContainer spacing={20} style={{ flex: 1 }}>
+      <LiquidGlassView
+        glassType="clear"
+        glassTintColor="#000000"
+        glassOpacity={0.3}
+        style={{ width: 120, height: 120, borderRadius: 60 }}
+      >
+        <Text>Circle 1</Text>
+      </LiquidGlassView>
+      <LiquidGlassView
+        glassType="clear"
+        glassTintColor="#000000"
+        glassOpacity={0.3}
+        style={{ width: 120, height: 120, borderRadius: 60 }}
+      >
+        <Text>Circle 2</Text>
+      </LiquidGlassView>
+    </LiquidGlassContainer>
+  );
+}
+```
+
+#### Animated Glass Container
+
+```tsx
+import React, { useRef } from 'react';
+import { Animated } from 'react-native';
+import { LiquidGlassContainer, LiquidGlassView } from '@sbaiahmed1/react-native-blur';
+
+function AnimatedGlassContainer() {
+  const translateX = useRef(new Animated.Value(0)).current;
+
+  const animateElements = () => {
+    Animated.sequence([
+      Animated.timing(translateX, {
+        toValue: -50,
+        duration: 2000,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateX, {
+        toValue: 30,
+        duration: 2000,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  };
+
+  return (
+    <LiquidGlassContainer spacing={30} style={{ flexDirection: 'row' }}>
+      <LiquidGlassView
+        glassType="clear"
+        style={{ width: 100, height: 100, borderRadius: 50 }}
+      >
+        <Text>Static</Text>
+      </LiquidGlassView>
+      <Animated.View style={{ transform: [{ translateX }] }}>
+        <LiquidGlassView
+          glassType="clear"
+          style={{ width: 100, height: 100, borderRadius: 50 }}
+        >
+          <Text>Animated</Text>
+        </LiquidGlassView>
+      </Animated.View>
+    </LiquidGlassContainer>
+  );
+}
+```
+
 ## Props
 
-The library now provides two separate components with their own props:
+The library now provides four separate components with their own props:
 
 ### BlurView Props
 
@@ -449,6 +532,7 @@ All props are optional and have sensible defaults.
 | `children`                         | `ReactNode`                                          | `undefined`               | Child components to render inside the blur view     |
 
 > **Platform Note**: `ProgressiveBlurView` works on both **iOS** and **Android**.
+>
 > - **iOS**: Uses private Core Animation filters for variable blur effects
 > - **Android**: Extends QMBlur's BlurView with custom gradient masking to create progressive blur effect
 
@@ -467,10 +551,22 @@ All props are optional and have sensible defaults.
 | `style`                            | `ViewStyle` | `undefined` | Style object for the glass view                                                            |
 | `children`                         | `ReactNode` | `undefined` | Child components to render inside the glass view                                           |
 
+### LiquidGlassContainer Props
+
+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)       |
+
 > **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.
 
 > **Platform Note**: `LiquidGlassView` automatically falls back to `BlurView` on Android and iOS versions older than iOS 26.
 
+> **Platform Note**: `LiquidGlassContainer` automatically falls back to a regular `View` on Android and iOS versions older than iOS 26.
+
 ## Blur Types (BlurView)
 
 The following blur types are supported for `BlurView`:
@@ -536,7 +632,7 @@ The component uses the QmBlurView library to provide real blur effects with hard
 
 ## Accessibility
 
-Both components automatically respect the "Reduce Transparency" accessibility setting:
+All components automatically respect the "Reduce Transparency" accessibility setting:
 
 ### BlurView
 
@@ -548,20 +644,29 @@ Both components automatically respect the "Reduce Transparency" accessibility se
 - **iOS 26+**: When reduce transparency is enabled, the liquid glass effect is hidden and a fallback view with solid color is shown
 - **iOS < 26 & Android**: Automatically falls back to `BlurView` behavior
 
-You can customize the fallback color using the `reducedTransparencyFallbackColor` prop on both components.
+### LiquidGlassContainer
+
+- **iOS 26+**: When reduce transparency is enabled, falls back to regular View
+- **iOS < 26 & Android**: Always renders as regular View
+
+You can customize the fallback color using the `reducedTransparencyFallbackColor` prop on `BlurView` and `LiquidGlassView` components.
 
 ## TypeScript Support
 
-This package includes full TypeScript definitions for both components:
+This package includes full TypeScript definitions for all components:
 
 ```tsx
 import {
   BlurView,
   LiquidGlassView,
+  LiquidGlassContainer,
+  ProgressiveBlurView,
   BlurType,
   GlassType,
   BlurViewProps,
   LiquidGlassViewProps,
+  LiquidGlassContainerProps,
+  ProgressiveBlurViewProps,
 } from '@sbaiahmed1/react-native-blur';
 
 // BlurType is exported for type checking
@@ -580,6 +685,11 @@ interface MyGlassComponentProps {
   glassProps: LiquidGlassViewProps;
 }
 
+// LiquidGlassContainerProps for glass container props
+interface MyGlassContainerProps {
+  containerProps: LiquidGlassContainerProps;
+}
+
 // Example with BlurView properties
 const blurProps: BlurViewProps = {
   blurType: 'systemMaterial',
@@ -594,16 +704,23 @@ const liquidGlassProps: LiquidGlassViewProps = {
   glassOpacity: 0.8,
   isInteractive: true,
 };
+
+// Example with LiquidGlassContainer properties
+const liquidGlassContainerProps: LiquidGlassContainerProps = {
+  spacing: 20,
+};
 ```
 
 ## Example App
 
-The package includes a comprehensive example app that demonstrates both components with all their features. The example app features:
+The package includes a comprehensive example app that demonstrates all components with all their features. The example app features:
 
 - **BlurView Demo**: Interactive blur type selector with live preview of all blur types
 - **LiquidGlassView Demo**: Showcase of iOS 26+ glass effects with customizable properties
-- **Practical Use Cases**: Real-world examples like cards, modals, and overlays using both components
-- **Comparison Views**: Side-by-side comparisons between BlurView and LiquidGlassView effects
+- **LiquidGlassContainer Demo**: Interactive demonstrations of glass container spacing with animated examples
+- **ProgressiveBlurView Demo**: Variable blur gradient examples for different use cases
+- **Practical Use Cases**: Real-world examples like cards, modals, and overlays using all components
+- **Comparison Views**: Side-by-side comparisons between different effect types
 - **Platform Fallbacks**: Visual demonstrations of how effects degrade gracefully on older platforms
 
 To run the example:
@@ -639,12 +756,32 @@ yarn android
   - Automatic fallback to `BlurView` with enhanced blur effects
   - Same performance characteristics as `BlurView`
 
+### LiquidGlassContainer
+
+- **iOS 26+**:
+  - **Native Container Effects**: Uses `UIGlassContainerEffect` API for efficient glass grouping
+  - **Optimized Spacing**: Hardware-accelerated spacing calculations
+  - **Animation Ready**: Smooth animations with no performance impact
+- **iOS < 26 & Android**:
+  - Lightweight View fallback with minimal overhead
+
 ### General Tips
 
 - Avoid using too many blur/glass views simultaneously on lower-end devices
 - Consider using `reducedTransparencyFallbackColor` for better accessibility
-- `LiquidGlassView` automatically falls back to `BlurView` on unsupported platforms
-- Both components are optimized for React Native's new architecture (Fabric)
+- `LiquidGlassView` and `LiquidGlassContainer` automatically fall back on unsupported platforms
+- All components are optimized for React Native's new architecture (Fabric)
+
+## What's New in v4.1.2
+
+### 🌊 LiquidGlassContainer Component (NEW)
+
+- **New Component**: `LiquidGlassContainer` for iOS 26+ glass container effects
+- Uses iOS 26+ `UIGlassContainerEffect` API for grouping glass elements
+- Configurable spacing between glass elements with the `spacing` prop
+- Perfect for creating interactive, grouped glass interfaces
+- Automatic fallback to regular View on Android and older iOS versions
+- Fully integrated with animated components for dynamic effects
 
 ## What's New in v4.0.0
 
@@ -652,7 +789,7 @@ yarn android
 
 ### 🎯 Component Separation (BREAKING CHANGE)
 
-- **Two Specialized Components**: Split single `BlurView` into dedicated `BlurView` and `LiquidGlassView` components
+- **Four Specialized Components**: Split single `BlurView` into dedicated `BlurView`, `LiquidGlassView`, `LiquidGlassContainer`, and `ProgressiveBlurView` components
 - **Removed `type` prop**: No more switching between blur/liquidGlass modes - use the appropriate component instead
 - **Cleaner APIs**: Each component has focused props without mixing blur and glass properties
 - **Better Architecture**: True separation of concerns following React best practices
@@ -662,6 +799,7 @@ yarn android
 
 - Revolutionary glass effects using Apple's new UIGlassEffect API
 - Dedicated `LiquidGlassView` component for glass-specific effects
+- Dedicated `LiquidGlassContainer` component for grouping glass elements with spacing
 - Customizable glass types: `clear` and `regular`
 - Adjustable tint colors and opacity for stunning visual effects
 - Automatic fallback to enhanced blur on older iOS versions and Android
@@ -675,14 +813,15 @@ yarn android
 
 ### 📱 Enhanced Example App
 
-- Separate demonstrations for BlurView and LiquidGlassView
+- Separate demonstrations for BlurView, LiquidGlassView, LiquidGlassContainer, and ProgressiveBlurView
 - Interactive property controls for real-time customization
 - Practical use case examples (cards, modals, overlays)
-- Comparison views showing both components side by side
+- Comparison views showing different components side by side
+- Animated examples demonstrating LiquidGlassContainer spacing effects
 
 ### 🛠️ Developer Experience
 
-- Full TypeScript support with separate prop types for each component (`BlurViewProps`, `LiquidGlassViewProps`)
+- Full TypeScript support with separate prop types for each component (`BlurViewProps`, `LiquidGlassViewProps`, `LiquidGlassContainerProps`, `ProgressiveBlurViewProps`)
 - Cleaner, more intuitive API design
 - Improved component layout handling
 - Better accessibility support with smart fallbacks

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.4.5'
+  implementation 'com.qmdeve:QmBlurView:1.0.5-Beta01'
 }
 
 react {

package/ios/Helpers/ReactNativeLiquidGlassContainerHelper.swift

@@ -0,0 +1,18 @@
+// ReactNativeLiquidGlassContainerHelper.swift
+
+import UIKit
+
+// MARK: - Objective-C Bridging Helpers for Liquid Glass Container
+
+@objc public class ReactNativeLiquidGlassContainerHelper: NSObject {
+
+  /// Creates and returns a liquid glass container view.
+  @objc public static func createLiquidGlassContainerWithFrame(_ frame: CGRect) -> LiquidGlassContainer {
+    return LiquidGlassContainer(frame: frame)
+  }
+
+  /// Updates the liquid glass container with a new spacing value.
+  @objc public static func updateLiquidGlassContainer(_ container: LiquidGlassContainer, withSpacing spacing: Double) {
+    container.spacing = CGFloat(spacing)
+  }
+}

package/ios/ReactNativeLiquidGlassContainer.h

@@ -0,0 +1,14 @@
+#import <React/RCTViewComponentView.h>
+#import <UIKit/UIKit.h>
+
+#ifndef ReactNativeLiquidGlassContainerNativeComponent_h
+#define ReactNativeLiquidGlassContainerNativeComponent_h
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface ReactNativeLiquidGlassContainer : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif /* ReactNativeLiquidGlassContainerNativeComponent_h */

package/ios/ReactNativeLiquidGlassContainer.mm

@@ -0,0 +1,133 @@
+#import "ReactNativeLiquidGlassContainer.h"
+
+#import <react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h>
+#import <react/renderer/components/ReactNativeBlurViewSpec/Props.h>
+#import <react/renderer/components/ReactNativeBlurViewSpec/RCTComponentViewHelpers.h>
+
+#import "RCTFabricComponentsPlugins.h"
+
+#if __has_include("ReactNativeBlur-Swift.h")
+#import "ReactNativeBlur-Swift.h"
+#else
+#import <ReactNativeBlur/ReactNativeBlur-Swift.h>
+#endif
+
+using namespace facebook::react;
+
+@interface ReactNativeLiquidGlassContainer () <RCTReactNativeLiquidGlassContainerViewProtocol>
+@end
+
+@implementation ReactNativeLiquidGlassContainer {
+  LiquidGlassContainer *_containerView;
+  Props::Shared _props;
+  LayoutMetrics _layoutMetrics;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<ReactNativeLiquidGlassContainerComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const ReactNativeLiquidGlassContainerProps>();
+    _props = defaultProps;
+
+    const auto &containerProps = *std::static_pointer_cast<const ReactNativeLiquidGlassContainerProps>(defaultProps);
+
+    _containerView = [ReactNativeLiquidGlassContainerHelper createLiquidGlassContainerWithFrame:frame];
+
+    // Set initial spacing from default props
+    [ReactNativeLiquidGlassContainerHelper updateLiquidGlassContainer:_containerView withSpacing:containerProps.spacing];
+
+    [self addSubview:_containerView];
+  }
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &oldViewProps = *std::static_pointer_cast<ReactNativeLiquidGlassContainerProps const>(_props);
+  const auto &newViewProps = *std::static_pointer_cast<ReactNativeLiquidGlassContainerProps const>(props);
+
+  // Update spacing if it has changed
+  if (oldViewProps.spacing != newViewProps.spacing) {
+    [ReactNativeLiquidGlassContainerHelper updateLiquidGlassContainer:_containerView withSpacing:newViewProps.spacing];
+  }
+
+  // Store the new props
+  _props = props;
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask
+{
+  [super finalizeUpdates:updateMask];
+
+  // Apply border radius from layout metrics to the container view
+  if (@available(iOS 26.0, *)) {
+    const auto &props = *std::static_pointer_cast<ReactNativeLiquidGlassContainerProps const>(_props);
+    const auto borderMetrics = props.resolveBorderMetrics(_layoutMetrics);
+
+    // Use topLeft.horizontal same as React Native RCTViewComponentView implementation
+    CGFloat radius = borderMetrics.borderRadii.topLeft.horizontal;
+
+    if (radius > 0) {
+      _containerView.layer.cornerRadius = radius;
+      _containerView.layer.masksToBounds = YES;
+    }
+  }
+}
+
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  _containerView.frame = self.bounds;
+
+  // Copy corner radius from the Fabric view to the container view
+  _containerView.layer.cornerRadius = self.layer.cornerRadius;
+  _containerView.layer.cornerCurve = self.layer.cornerCurve;
+  _containerView.layer.masksToBounds = self.layer.masksToBounds;
+}
+
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics
+{
+  _layoutMetrics = layoutMetrics;
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  if (@available(iOS 26.0, *)) {
+    // On iOS 26+, add children to the contentView if available
+    if ([_containerView isKindOfClass:[UIVisualEffectView class]]) {
+      UIVisualEffectView *effectView = (UIVisualEffectView *)_containerView;
+      [effectView.contentView insertSubview:childComponentView atIndex:index];
+      return;
+    }
+  }
+
+  // Fallback: add directly to container view
+  [_containerView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [childComponentView removeFromSuperview];
+}
+
+- (void)dealloc
+{
+  [_containerView removeFromSuperview];
+  _containerView = nil;
+}
+
+@end
+
+Class<RCTComponentViewProtocol> LiquidGlassContainerCls(void)
+{
+  return ReactNativeLiquidGlassContainer.class;
+}

package/ios/ReactNativeLiquidGlassContainerManager.h

@@ -0,0 +1,6 @@
+#import <React/RCTViewManager.h>
+#import <React/RCTUIManager.h>
+#import "RCTBridge.h"
+
+@interface ReactNativeLiquidGlassContainerManager : RCTViewManager
+@end

package/ios/ReactNativeLiquidGlassContainerManager.mm

@@ -0,0 +1,17 @@
+#import "ReactNativeLiquidGlassContainerManager.h"
+#import "ReactNativeLiquidGlassContainer.h"
+#import <React/RCTUIManager.h>
+#import <React/RCTLog.h>
+
+@implementation ReactNativeLiquidGlassContainerManager
+
+RCT_EXPORT_MODULE(ReactNativeLiquidGlassContainer)
+
+RCT_EXPORT_VIEW_PROPERTY(spacing, double)
+
+- (UIView *)view
+{
+  return [[ReactNativeLiquidGlassContainer alloc] init];
+}
+
+@end

package/ios/Views/BlurEffectView.swift

@@ -43,14 +43,19 @@ class BlurEffectView: UIVisualEffectView {
       self?.effect = UIBlurEffect(style: self?.blurStyle ?? .systemMaterial)
     }
 
-    // Set intensity and pause
+    // Set intensity
     animator?.fractionComplete = intensity
-    animator?.pauseAnimation()
+    // Stop the animation at the current state
+    DispatchQueue.main.async { [weak self] in
+      self?.animator?.stopAnimation(true)
+      self?.animator?.finishAnimation(at: .current)
+    }
   }
 
   deinit {
-    animator?.stopAnimation(true)
-    animator?.finishAnimation(at: .current)
+    guard let animator = animator, animator.state == .active else { return }
+    animator.stopAnimation(true)
+    animator.finishAnimation(at: .current)
   }
 }
 
@@ -69,4 +74,4 @@ struct Blur: UIViewRepresentable {
   func updateUIView(_ uiView: BlurEffectView, context: Context) {
     uiView.updateBlur(style: style, intensity: intensity)
   }
-}
+}

package/ios/Views/LiquidGlassContainer.swift

@@ -0,0 +1,33 @@
+import UIKit
+
+// MARK: - Liquid Glass Container (iOS 26+ UIGlassContainerEffect)
+
+#if compiler(>=6.2)
+@objc public class LiquidGlassContainer: UIVisualEffectView {
+  @objc public var spacing: CGFloat = 0 {
+    didSet {
+      if #available(iOS 26.0, *) {
+        setupView()
+      }
+    }
+  }
+
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    if #available(iOS 26.0, *) {
+      setupView()
+    }
+  }
+
+  @available(iOS 26.0, *)
+  private func setupView() {
+    let effect = UIGlassContainerEffect()
+    effect.spacing = spacing
+    self.effect = effect
+  }
+}
+#else
+@objc public class LiquidGlassContainer: UIView {
+  @objc public var spacing: CGFloat = 0
+}
+#endif

package/lib/module/LiquidGlassContainer.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import React from 'react';
+import { Platform, View } from 'react-native';
+import ReactNativeLiquidGlassContainer from './ReactNativeLiquidGlassContainerNativeComponent';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * LiquidGlassContainer component
+ *
+ * A UIKit-based container that applies the iOS 26+ UIGlassContainerEffect.
+ * This component uses the liquid glass container effect with configurable spacing.
+ *
+ * Platform: iOS only (iOS 26+)
+ *
+ * @example
+ * ```tsx
+ * <LiquidGlassContainer spacing={20} style={{ flex: 1 }}>
+ *   <Text>Content inside glass container</Text>
+ * </LiquidGlassContainer>
+ * ```
+ */
+export const LiquidGlassContainer = ({
+  spacing = 0,
+  style,
+  children,
+  ...rest
+}) => {
+  const isCompatibleIOS = Platform.OS === 'ios' && parseInt(Platform.Version, 10) >= 26;
+  if (!isCompatibleIOS) {
+    // Fallback to regular View on non-iOS platforms or older iOS versions
+    return /*#__PURE__*/_jsx(View, {
+      style: style,
+      ...rest,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(ReactNativeLiquidGlassContainer, {
+    spacing: spacing,
+    style: style,
+    ...rest,
+    children: children
+  });
+};
+//# sourceMappingURL=LiquidGlassContainer.js.map

package/lib/module/LiquidGlassContainer.js.map

@@ -0,0 +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":[]}

package/lib/module/ReactNativeLiquidGlassContainerNativeComponent.ts

@@ -0,0 +1,17 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+interface NativeProps extends ViewProps {
+  /**
+   * The spacing value for the glass container effect
+   * Platform: iOS only (iOS 26+)
+   * @default 0
+   */
+  spacing?: Double;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNativeLiquidGlassContainer',
+  { excludedPlatforms: ['android'] }
+);

package/lib/module/index.js

@@ -7,4 +7,6 @@ export { default as ReactNativeLiquidGlassView } from './ReactNativeLiquidGlassV
 export { LiquidGlassView } from "./LiquidGlassView.js";
 export { default as ReactNativeProgressiveBlurView } from './ReactNativeProgressiveBlurViewNativeComponent';
 export { ProgressiveBlurView } from "./ProgressiveBlurView.js";
+export { default as ReactNativeLiquidGlassContainer } from './ReactNativeLiquidGlassContainerNativeComponent';
+export { LiquidGlassContainer } from "./LiquidGlassContainer.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","ReactNativeBlurView","BlurView","ReactNativeLiquidGlassView","LiquidGlassView","ReactNativeProgressiveBlurView","ProgressiveBlurView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,sCAAsC;AACrF,cAAc,sCAAsC;AAEpD,SAASC,QAAQ,IAAIF,OAAO,EAAEE,QAAQ,QAAQ,eAAY;AAG1D,SAASF,OAAO,IAAIG,0BAA0B,QAAQ,6CAA6C;AAGnG,SAASC,eAAe,QAAQ,sBAAmB;AAGnD,SAASJ,OAAO,IAAIK,8BAA8B,QAAQ,iDAAiD;AAG3G,SAASC,mBAAmB,QAAQ,0BAAuB","ignoreList":[]}
+{"version":3,"names":["default","ReactNativeBlurView","BlurView","ReactNativeLiquidGlassView","LiquidGlassView","ReactNativeProgressiveBlurView","ProgressiveBlurView","ReactNativeLiquidGlassContainer","LiquidGlassContainer"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,sCAAsC;AACrF,cAAc,sCAAsC;AAEpD,SAASC,QAAQ,IAAIF,OAAO,EAAEE,QAAQ,QAAQ,eAAY;AAG1D,SAASF,OAAO,IAAIG,0BAA0B,QAAQ,6CAA6C;AAGnG,SAASC,eAAe,QAAQ,sBAAmB;AAGnD,SAASJ,OAAO,IAAIK,8BAA8B,QAAQ,iDAAiD;AAG3G,SAASC,mBAAmB,QAAQ,0BAAuB;AAG3D,SAASN,OAAO,IAAIO,+BAA+B,QAAQ,kDAAkD;AAE7G,SAASC,oBAAoB,QAAQ,2BAAwB","ignoreList":[]}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type ViewProps } from 'react-native';
+export interface LiquidGlassContainerProps extends ViewProps {
+    /**
+     * The spacing value for the glass container effect
+     * Platform: iOS only (iOS 26+)
+     * @default 0
+     */
+    spacing?: number;
+}
+/**
+ * LiquidGlassContainer component
+ *
+ * A UIKit-based container that applies the iOS 26+ UIGlassContainerEffect.
+ * This component uses the liquid glass container effect with configurable spacing.
+ *
+ * Platform: iOS only (iOS 26+)
+ *
+ * @example
+ * ```tsx
+ * <LiquidGlassContainer spacing={20} style={{ flex: 1 }}>
+ *   <Text>Content inside glass container</Text>
+ * </LiquidGlassContainer>
+ * ```
+ */
+export declare const LiquidGlassContainer: React.FC<LiquidGlassContainerProps>;
+//# sourceMappingURL=LiquidGlassContainer.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,13 @@
+import type { ViewProps } from 'react-native';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+interface NativeProps extends ViewProps {
+    /**
+     * The spacing value for the glass container effect
+     * Platform: iOS only (iOS 26+)
+     * @default 0
+     */
+    spacing?: Double;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;
+//# sourceMappingURL=ReactNativeLiquidGlassContainerNativeComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeLiquidGlassContainerNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeLiquidGlassContainerNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AAExE,UAAU,WAAY,SAAQ,SAAS;IACrC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;;AAED,wBAGE"}

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

@@ -10,4 +10,7 @@ export { default as ReactNativeProgressiveBlurView } from './ReactNativeProgress
 export type { ProgressiveBlurDirection } from './ReactNativeProgressiveBlurViewNativeComponent';
 export { ProgressiveBlurView } from './ProgressiveBlurView';
 export type { ProgressiveBlurViewProps } from './ProgressiveBlurView';
+export { default as ReactNativeLiquidGlassContainer } from './ReactNativeLiquidGlassContainerNativeComponent';
+export { LiquidGlassContainer } from './LiquidGlassContainer';
+export type { LiquidGlassContainerProps } from './LiquidGlassContainer';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AACtF,cAAc,sCAAsC,CAAC;AAErD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AACpG,YAAY,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,iDAAiD,CAAC;AAC5G,YAAY,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAEhG,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AACtF,cAAc,sCAAsC,CAAC;AAErD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AACpG,YAAY,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,iDAAiD,CAAC;AAC5G,YAAY,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAEhG,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,kDAAkD,CAAC;AAE9G,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbaiahmed1/react-native-blur",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -165,7 +165,8 @@
       "componentProvider": {
         "ReactNativeBlurView": "ReactNativeBlurView",
         "ReactNativeLiquidGlassView": "ReactNativeLiquidGlassView",
-        "ReactNativeProgressiveBlurView": "ReactNativeProgressiveBlurView"
+        "ReactNativeProgressiveBlurView": "ReactNativeProgressiveBlurView",
+        "ReactNativeLiquidGlassContainer": "ReactNativeLiquidGlassContainer"
       }
     }
   },

package/src/LiquidGlassContainer.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Platform, View, type ViewProps } from 'react-native';
+import ReactNativeLiquidGlassContainer from './ReactNativeLiquidGlassContainerNativeComponent';
+
+export interface LiquidGlassContainerProps extends ViewProps {
+  /**
+   * The spacing value for the glass container effect
+   * Platform: iOS only (iOS 26+)
+   * @default 0
+   */
+  spacing?: number;
+}
+
+/**
+ * LiquidGlassContainer component
+ *
+ * A UIKit-based container that applies the iOS 26+ UIGlassContainerEffect.
+ * This component uses the liquid glass container effect with configurable spacing.
+ *
+ * Platform: iOS only (iOS 26+)
+ *
+ * @example
+ * ```tsx
+ * <LiquidGlassContainer spacing={20} style={{ flex: 1 }}>
+ *   <Text>Content inside glass container</Text>
+ * </LiquidGlassContainer>
+ * ```
+ */
+export const LiquidGlassContainer: React.FC<LiquidGlassContainerProps> = ({
+  spacing = 0,
+  style,
+  children,
+  ...rest
+}) => {
+  const isCompatibleIOS =
+    Platform.OS === 'ios' && parseInt(Platform.Version as string, 10) >= 26;
+
+  if (!isCompatibleIOS) {
+    // Fallback to regular View on non-iOS platforms or older iOS versions
+    return (
+      <View style={style} {...rest}>
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <ReactNativeLiquidGlassContainer spacing={spacing} style={style} {...rest}>
+      {children}
+    </ReactNativeLiquidGlassContainer>
+  );
+};

package/src/ReactNativeLiquidGlassContainerNativeComponent.ts

@@ -0,0 +1,17 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+interface NativeProps extends ViewProps {
+  /**
+   * The spacing value for the glass container effect
+   * Platform: iOS only (iOS 26+)
+   * @default 0
+   */
+  spacing?: Double;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNativeLiquidGlassContainer',
+  { excludedPlatforms: ['android'] }
+);

package/src/index.tsx

@@ -15,3 +15,8 @@ export type { ProgressiveBlurDirection } from './ReactNativeProgressiveBlurViewN
 
 export { ProgressiveBlurView } from './ProgressiveBlurView';
 export type { ProgressiveBlurViewProps } from './ProgressiveBlurView';
+
+export { default as ReactNativeLiquidGlassContainer } from './ReactNativeLiquidGlassContainerNativeComponent';
+
+export { LiquidGlassContainer } from './LiquidGlassContainer';
+export type { LiquidGlassContainerProps } from './LiquidGlassContainer';