@sbaiahmed1/react-native-blur 3.1.2 → 4.0.0

package/ios/Views/AdvancedBlurView.swift

@@ -1,59 +1,35 @@
 import SwiftUI
 import UIKit
 
-// MARK: - UIKit Wrapper
+// MARK: - UIKit Wrapper for Blur
 
 @objc public class AdvancedBlurView: UIView {
 
   private var hostingController: UIHostingController<BasicColoredView>?
 
-  @objc public var glassTintColor: UIColor = .clear {
-    didSet {
-      updateView()
-    }
-  }
-
-  @objc public var glassOpacity: Double = 1.0 {
-    didSet {
-      updateView()
-    }
-  }
-
   @objc public var blurAmount: Double = 10.0 {
     didSet {
       updateView()
     }
   }
 
-  @objc public var type: String = "blur" {
-    didSet {
-      updateView()
-    }
-  }
-
   @objc public var blurTypeString: String = "xlight" {
     didSet {
       updateView()
     }
   }
 
-  @objc public var glassType: String = "clear" {
-    didSet {
-      updateView()
-    }
-  }
-
   @objc public var reducedTransparencyFallbackColor: UIColor = .white {
     didSet {
       updateView()
     }
   }
 
-  @objc public var isInteractive: Bool = true {
+  @objc public var ignoreSafeArea: Bool = false {
     didSet {
       updateView()
     }
-  }
+ }
 
   public override init(frame: CGRect) {
     super.init(frame: frame)
@@ -82,14 +58,10 @@ import UIKit
 
     let blurStyle = blurStyleFromString(blurTypeString)
     let swiftUIView = BasicColoredView(
-      glassTintColor: glassTintColor,
-      glassOpacity: glassOpacity,
       blurAmount: blurAmount,
       blurStyle: blurStyle,
-      type: type,
-      glassType: glassType,
-      reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
-      isInteractive: isInteractive
+      ignoreSafeArea: ignoreSafeArea,
+      reducedTransparencyFallbackColor: reducedTransparencyFallbackColor
     )
 
     let hosting = UIHostingController(rootView: swiftUIView)
@@ -117,7 +89,7 @@ import UIKit
       setupHostingController()
     }
   }
-  
+
   public override func didMoveToWindow() {
     super.didMoveToWindow()
     if window != nil {

package/ios/Views/BasicColoredView.swift

@@ -3,56 +3,49 @@
 import SwiftUI
 import UIKit
 
-// MARK: - SwiftUI View Component
+// MARK: - SwiftUI View Component for Blur
 
 struct BasicColoredView: View {
-  var glassTintColor: UIColor
-  var glassOpacity: Double
-  var blurAmount: Double
-  var blurStyle: UIBlurEffect.Style
-  var type: String
-  var glassType: String
-  var reducedTransparencyFallbackColor: UIColor
-  var isInteractive: Bool
+  let blurAmount: Double
+  let blurStyle: UIBlurEffect.Style
+  let reducedTransparencyFallbackColor: UIColor
+  let blurIntensity: Double
+  let ignoreSafeArea: Bool
 
-  var body: some View {
-    let blurIntensity = mapBlurAmountToIntensity(blurAmount)
+  let isReducedTransparencyEnabled = UIAccessibility.isReduceTransparencyEnabled
+
+  init(blurAmount: Double,
+       blurStyle: UIBlurEffect.Style,
+       ignoreSafeArea: Bool,
+       reducedTransparencyFallbackColor: UIColor) {
+    self.blurAmount = blurAmount
+    self.blurStyle = blurStyle
+    self.ignoreSafeArea = ignoreSafeArea
+    self.reducedTransparencyFallbackColor = reducedTransparencyFallbackColor
+    self.blurIntensity = mapBlurAmountToIntensity(blurAmount)
+  }
 
-    // Check if reduced transparency is enabled
-    let isReducedTransparencyEnabled = UIAccessibility.isReduceTransparencyEnabled
+  var body: some View {
+    content
+      .ignoresSafeArea(ignoreSafeArea ? .all : [])
+  }
 
+  private var content: some View {
     if isReducedTransparencyEnabled {
-      // Use fallback color when reduced transparency is enabled
-      Rectangle()
-        .fill(Color(reducedTransparencyFallbackColor))
-    } else {
-      if (type == "liquidGlass"){
-        if #available(iOS 26.0, *) {
-          let baseGlassEffect = glassEffectFromString(glassType)
-          Rectangle()
-            .glassEffect(
-              baseGlassEffect
-                .tint(Color(glassTintColor)
-                  .opacity(glassOpacity))
-                .interactive(isInteractive)
-              , in: .rect)
-
-        } else {
-          // Use proper blur intensity control for liquid glass fallback
-          Rectangle()
-            .fill(Color(.clear))
-            .background(Blur(style: blurStyle, intensity: blurIntensity))
-            .overlay(
-              Color(glassTintColor)
-                .opacity(glassOpacity)
-            )
-        }
-      }else {
-        // Use proper blur intensity control for regular blur
+      AnyView(
         Rectangle()
-          .fill(Color(.clear))
-          .background(Blur(style: blurStyle, intensity: blurIntensity))
-      }
+          .fill(Color(reducedTransparencyFallbackColor))
+      )
+    } else {
+      AnyView(regularBlurView)
     }
   }
-}
+
+  private var regularBlurView: some View {
+    // Use proper blur intensity control for regular blur
+    Rectangle()
+      .fill(Color(.clear))
+      .background(Blur(style: blurStyle, intensity: blurIntensity))
+  }
+}
+

package/ios/Views/LiquidGlassContainerView.swift

@@ -0,0 +1,173 @@
+import UIKit
+
+// MARK: - UIKit-only Wrapper for Liquid Glass (following Expo's approach)
+
+@objc public class LiquidGlassContainerView: UIView {
+  private var glassEffectView: UIVisualEffectView?
+  private var glassEffect: Any?
+  private var currentGlassStyle: String = "clear" // Track current style
+
+  @objc public var glassTintColor: UIColor = .clear {
+    didSet {
+      updateEffect()
+    }
+  }
+
+  @objc public var glassOpacity: Double = 1.0 {
+    didSet {
+      updateEffect()
+    }
+  }
+
+  @objc public var glassType: String = "clear" {
+    didSet {
+      updateEffect()
+    }
+  }
+
+  @objc public var reducedTransparencyFallbackColor: UIColor = .white {
+    didSet {
+      updateFallback()
+    }
+  }
+
+  @objc public var isInteractive: Bool = true {
+    didSet {
+      updateEffect()
+    }
+  }
+
+  @objc public var ignoreSafeArea: Bool = false {
+    didSet {
+      // Not used in UIKit approach
+    }
+  }
+
+  // Border radius storage for React Native's style system
+  private var topLeftRadius: CGFloat = 0
+  private var topRightRadius: CGFloat = 0
+  private var bottomLeftRadius: CGFloat = 0
+  private var bottomRightRadius: CGFloat = 0
+  private var allBorderRadius: CGFloat = 0
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupView()
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setupView()
+  }
+
+  private func setupView() {
+    let effectView = UIVisualEffectView()
+    effectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+    effectView.frame = bounds
+    addSubview(effectView)
+    self.glassEffectView = effectView
+    
+    updateEffect()
+  }
+
+  // MARK: - Border Radius Methods (called by React Native's style system)
+  
+  @objc public func setBorderRadius(_ radius: CGFloat) {
+    allBorderRadius = radius
+    topLeftRadius = radius
+    topRightRadius = radius
+    bottomLeftRadius = radius
+    bottomRightRadius = radius
+    updateBorderRadius()
+  }
+  
+  @objc public func setBorderTopLeftRadius(_ radius: CGFloat) {
+    topLeftRadius = radius
+    updateBorderRadius()
+  }
+  
+  @objc public func setBorderTopRightRadius(_ radius: CGFloat) {
+    topRightRadius = radius
+    updateBorderRadius()
+  }
+  
+  @objc public func setBorderBottomLeftRadius(_ radius: CGFloat) {
+    bottomLeftRadius = radius
+    updateBorderRadius()
+  }
+  
+  @objc public func setBorderBottomRightRadius(_ radius: CGFloat) {
+    bottomRightRadius = radius
+    updateBorderRadius()
+  }
+
+  private func updateEffect() {
+    if #available(iOS 26.0, *) {
+      #if compiler(>=6.2)
+      let style: UIGlassEffect.Style = glassType == "regular" ? .regular : .clear
+      
+      // Always create a new effect to ensure proper rendering
+      let effect = UIGlassEffect(style: style)
+      effect.tintColor = glassTintColor.withAlphaComponent(glassOpacity)
+      effect.isInteractive = isInteractive
+      
+      glassEffectView?.effect = effect
+      glassEffect = effect
+      currentGlassStyle = glassType
+      
+      updateBorderRadius()
+      #endif
+    } else {
+      // Fallback for iOS < 26
+      updateFallback()
+    }
+  }
+
+  private func updateFallback() {
+    if #available(iOS 26.0, *) {
+      // Do nothing if iOS 26+
+    } else {
+      backgroundColor = reducedTransparencyFallbackColor
+      layer.cornerRadius = allBorderRadius
+      layer.masksToBounds = true
+    }
+  }
+
+  private func updateBorderRadius() {
+    if #available(iOS 26.0, *) {
+      #if compiler(>=6.2)
+      let topLeft = UICornerRadius(floatLiteral: Double(topLeftRadius))
+      let topRight = UICornerRadius(floatLiteral: Double(topRightRadius))
+      let bottomLeft = UICornerRadius(floatLiteral: Double(bottomLeftRadius))
+      let bottomRight = UICornerRadius(floatLiteral: Double(bottomRightRadius))
+      
+      glassEffectView?.cornerConfiguration = .corners(
+        topLeftRadius: topLeft,
+        topRightRadius: topRight,
+        bottomLeftRadius: bottomLeft,
+        bottomRightRadius: bottomRight
+      )
+      #else
+      layer.cornerRadius = allBorderRadius
+      layer.masksToBounds = true
+      #endif
+    } else {
+      layer.cornerRadius = allBorderRadius
+      layer.masksToBounds = true
+    }
+  }
+
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    glassEffectView?.frame = bounds
+  }
+  
+  // For child view mounting
+  @objc public func getContentView() -> UIView? {
+    if #available(iOS 26.0, *) {
+      return glassEffectView?.contentView
+    } else {
+      return self
+    }
+  }
+}

package/lib/module/BlurView.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import ReactNativeBlurView from './ReactNativeBlurViewNativeComponent';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -32,60 +32,46 @@ export const BlurView = ({
   reducedTransparencyFallbackColor = '#FFFFFF',
   style,
   children,
-  type = 'blur',
-  glassType = 'clear',
-  glassTintColor = 'clear',
-  glassOpacity = 1.0,
-  isInteractive = true,
+  ignoreSafeArea = false,
   ...props
 }) => {
   // If no children, render the blur view directly (for background use)
   if (React.Children.count(children) === 0) {
     return /*#__PURE__*/_jsx(ReactNativeBlurView, {
+      ignoreSafeArea: ignoreSafeArea,
       blurType: blurType,
       blurAmount: blurAmount,
-      glassType: glassType,
-      glassTintColor: glassTintColor,
-      glassOpacity: glassOpacity,
-      type: type,
       reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
       style: style,
-      isInteractive: isInteractive,
       ...props
     });
   }
 
   // If children exist, use the absolute positioning pattern
   return /*#__PURE__*/_jsxs(View, {
-    style: [{
-      position: 'relative',
-      overflow: 'hidden'
-    }, style],
+    style: [styles.container, style],
     children: [/*#__PURE__*/_jsx(ReactNativeBlurView, {
+      ignoreSafeArea: ignoreSafeArea,
       blurType: blurType,
       blurAmount: blurAmount,
-      glassType: glassType,
-      glassTintColor: glassTintColor,
-      glassOpacity: glassOpacity,
-      type: type,
-      isInteractive: isInteractive,
       reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
-      style: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0
-      },
+      style: StyleSheet.absoluteFill,
       ...props
     }), /*#__PURE__*/_jsx(View, {
-      style: {
-        position: 'relative',
-        zIndex: 1
-      },
+      style: styles.children,
       children: children
     })]
   });
 };
 export default BlurView;
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  children: {
+    position: 'relative',
+    zIndex: 1
+  }
+});
 //# sourceMappingURL=BlurView.js.map

package/lib/module/BlurView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","style","children","type","glassType","glassTintColor","glassOpacity","isInteractive","props","Children","count","position","overflow","top","left","right","bottom","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAwE9C;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,IAAI,GAAG,MAAM;EACbC,SAAS,GAAG,OAAO;EACnBC,cAAc,GAAG,OAAO;EACxBC,YAAY,GAAG,GAAG;EAClBC,aAAa,GAAG,IAAI;EACpB,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,IAAIlB,KAAK,CAACmB,QAAQ,CAACC,KAAK,CAACR,QAAQ,CAAC,KAAK,CAAC,EAAE;IACxC,oBACER,IAAA,CAACF,mBAAmB;MAClBM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBK,SAAS,EAAEA,SAAU;MACrBC,cAAc,EAAEA,cAAe;MAC/BC,YAAY,EAAEA,YAAa;MAC3BH,IAAI,EAAEA,IAAK;MACXH,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEA,KAAM;MACbM,aAAa,EAAEA,aAAc;MAAA,GACzBC;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEZ,KAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAAC;MAAEU,QAAQ,EAAE,UAAU;MAAEC,QAAQ,EAAE;IAAS,CAAC,EAAEX,KAAK,CAAE;IAAAC,QAAA,gBAEjER,IAAA,CAACF,mBAAmB;MAClBM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBK,SAAS,EAAEA,SAAU;MACrBC,cAAc,EAAEA,cAAe;MAC/BC,YAAY,EAAEA,YAAa;MAC3BH,IAAI,EAAEA,IAAK;MACXI,aAAa,EAAEA,aAAc;MAC7BP,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAE;QACLU,QAAQ,EAAE,UAAU;QACpBE,GAAG,EAAE,CAAC;QACNC,IAAI,EAAE,CAAC;QACPC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACV,CAAE;MAAA,GACER;IAAK,CACV,CAAC,eAEFd,IAAA,CAACH,IAAI;MAACU,KAAK,EAAE;QAAEU,QAAQ,EAAE,UAAU;QAAEM,MAAM,EAAE;MAAE,CAAE;MAAAf,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC/D,CAAC;AAEX,CAAC;AAED,eAAeL,QAAQ","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","style","children","ignoreSafeArea","props","Children","count","styles","container","absoluteFill","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,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;EACA,IAAIf,KAAK,CAACgB,QAAQ,CAACC,KAAK,CAACJ,QAAQ,CAAC,KAAK,CAAC,EAAE;IACxC,oBACER,IAAA,CAACF,mBAAmB;MAClBW,cAAc,EAAEA,cAAe;MAC/BL,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEA,KAAM;MAAA,GACTG;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACER,KAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAACM,MAAM,CAACC,SAAS,EAAEP,KAAK,CAAE;IAAAC,QAAA,gBAErCR,IAAA,CAACF,mBAAmB;MAClBW,cAAc,EAAEA,cAAe;MAC/BL,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEX,UAAU,CAACmB,YAAa;MAAA,GAC3BL;IAAK,CACV,CAAC,eAEFV,IAAA,CAACH,IAAI;MAACU,KAAK,EAAEM,MAAM,CAACL,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeL,QAAQ;AAEvB,MAAMU,MAAM,GAAGjB,UAAU,CAACoB,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/module/LiquidGlassView.js

@@ -0,0 +1,75 @@
+"use strict";
+
+import React from 'react';
+import { Platform } from 'react-native';
+import ReactNativeLiquidGlassView from './ReactNativeLiquidGlassViewNativeComponent';
+import BlurView from "./BlurView.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A Liquid Glass view component that provides iOS 26+ glass effects.
+ *
+ * This component uses the new UIKit glass effect API available on iOS 26+.
+ * On older iOS versions or when reduced transparency is enabled, it falls back
+ * to a solid color background.
+ *
+ * **Platform Support:**
+ * - iOS 26+: Native glass effect with full functionality
+ * - iOS < 26 or Android: Fallback to reducedTransparencyFallbackColor
+ *
+ * This component automatically handles the proper positioning pattern where the glass
+ * effect is positioned absolutely behind the content, ensuring interactive elements
+ * work correctly.
+ *
+ * @example
+ * ```tsx
+ * import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
+ *
+ * <LiquidGlassView
+ *   glassType="clear"
+ *   glassTintColor="#007AFF"
+ *   glassOpacity={0.8}
+ *   style={{ flex: 1 }}
+ * >
+ *   <Text>Content on top of liquid glass</Text>
+ *   <Button title="Interactive Button" onPress={() => {}} />
+ * </LiquidGlassView>
+ * ```
+ *
+ * @platform ios
+ */
+export const LiquidGlassView = ({
+  glassType = 'clear',
+  glassTintColor = 'clear',
+  glassOpacity = 1.0,
+  reducedTransparencyFallbackColor = '#FFFFFF',
+  isInteractive = true,
+  ignoreSafeArea = false,
+  style,
+  children,
+  ...props
+}) => {
+  // Only render on iOS 26+ (fallback otherwise)
+  if (Platform.OS !== 'ios' || Platform.OS === 'ios' && parseInt(Platform.Version, 10) < 26) {
+    console.warn('LiquidGlassView is only supported on iOS. Rendering children without glass effect.');
+    return /*#__PURE__*/_jsx(BlurView, {
+      blurAmount: 70,
+      style: style,
+      children: children
+    });
+  }
+
+  // If children exist, use the absolute positioning pattern
+  return /*#__PURE__*/_jsx(ReactNativeLiquidGlassView, {
+    glassType: glassType,
+    glassTintColor: glassTintColor,
+    glassOpacity: glassOpacity,
+    reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
+    isInteractive: isInteractive,
+    ignoreSafeArea: ignoreSafeArea,
+    style: style,
+    ...props,
+    children: children
+  });
+};
+export default LiquidGlassView;
+//# sourceMappingURL=LiquidGlassView.js.map

package/lib/module/LiquidGlassView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","ReactNativeLiquidGlassView","BlurView","jsx","_jsx","LiquidGlassView","glassType","glassTintColor","glassOpacity","reducedTransparencyFallbackColor","isInteractive","ignoreSafeArea","style","children","props","OS","parseInt","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;EACA,IACEd,QAAQ,CAACe,EAAE,KAAK,KAAK,IACpBf,QAAQ,CAACe,EAAE,KAAK,KAAK,IAAIC,QAAQ,CAAChB,QAAQ,CAACiB,OAAO,EAAE,EAAE,CAAC,GAAG,EAAG,EAC9D;IACAC,OAAO,CAACC,IAAI,CACV,oFACF,CAAC;IACD,oBACEf,IAAA,CAACF,QAAQ;MAACkB,UAAU,EAAE,EAAG;MAACR,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":[]}

package/lib/module/ReactNativeBlurViewNativeComponent.ts

@@ -18,17 +18,11 @@ export type BlurType =
   | 'systemThickMaterial'
   | 'systemChromeMaterial';
 
-export type GlassType = 'clear' | 'regular';
-
 interface NativeProps extends ViewProps {
-  glassTintColor?: WithDefault<string, 'clear'>;
-  glassOpacity?: WithDefault<Double, 1.0>;
   blurAmount?: WithDefault<Double, 10.0>;
-  type?: WithDefault<'blur' | 'liquidGlass', 'blur'>;
   blurType?: WithDefault<BlurType, 'xlight'>;
-  glassType?: WithDefault<GlassType, 'clear'>;
   reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
-  isInteractive?: WithDefault<boolean, true>;
+  ignoreSafeArea?: WithDefault<boolean, false>;
 }
 
 export default codegenNativeComponent<NativeProps>('ReactNativeBlurView');

package/lib/module/ReactNativeLiquidGlassViewNativeComponent.ts

@@ -0,0 +1,57 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type {
+  WithDefault,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export type GlassType = 'clear' | 'regular';
+
+interface NativeProps extends ViewProps {
+  /**
+   * The type of glass effect to apply
+   * Platform: iOS only
+   * @default 'clear'
+   */
+  glassType?: WithDefault<GlassType, 'clear'>;
+
+  /**
+   * The tint color of the glass effect
+   * Platform: iOS only
+   * @default 'clear'
+   */
+  glassTintColor?: WithDefault<string, 'clear'>;
+
+  /**
+   * The opacity of the glass effect (0-1)
+   * Platform: iOS only
+   * @default 1.0
+   */
+  glassOpacity?: WithDefault<Double, 1.0>;
+
+  /**
+   * Fallback color when reduced transparency is enabled
+   * Platform: iOS only
+   * @default '#FFFFFF'
+   */
+  reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
+
+  /**
+   * Whether the glass view should be interactive
+   * Platform: iOS only
+   * @default true
+   */
+  isInteractive?: WithDefault<boolean, true>;
+
+  /**
+   * Whether the glass view should ignore safe area insets
+   * Platform: iOS only
+   * @default false
+   */
+  ignoreSafeArea?: WithDefault<boolean, false>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNativeLiquidGlassView',
+  { excludedPlatforms: ['android'] }
+);

package/lib/module/index.js

@@ -3,4 +3,6 @@
 export { default as ReactNativeBlurView } from './ReactNativeBlurViewNativeComponent';
 export * from './ReactNativeBlurViewNativeComponent';
 export { BlurView as default, BlurView } from "./BlurView.js";
+export { default as ReactNativeLiquidGlassView } from './ReactNativeLiquidGlassViewNativeComponent';
+export { LiquidGlassView } from "./LiquidGlassView.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","ReactNativeBlurView","BlurView"],"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","ignoreList":[]}
+{"version":3,"names":["default","ReactNativeBlurView","BlurView","ReactNativeLiquidGlassView","LiquidGlassView"],"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","ignoreList":[]}