@sbaiahmed1/react-native-blur 0.2.1 → 3.0.0-beta.1

package/ios/ReactNativeBlurView.swift

@@ -0,0 +1,321 @@
+// ReactNativeBlurView.swift
+
+import SwiftUI
+import UIKit
+
+// MARK: Blur View with proper intensity control
+
+class BlurEffectView: UIVisualEffectView {
+  private var animator: UIViewPropertyAnimator?
+  private var blurStyle: UIBlurEffect.Style = .systemMaterial
+  private var intensity: Double = 1.0
+
+  override init(effect: UIVisualEffect?) {
+    super.init(effect: effect)
+    setupBlur()
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setupBlur()
+  }
+
+  func updateBlur(style: UIBlurEffect.Style, intensity: Double) {
+    self.blurStyle = style
+    self.intensity = intensity
+    setupBlur()
+  }
+
+  private func setupBlur() {
+    // Clean up existing animator
+    animator?.stopAnimation(true)
+    animator?.finishAnimation(at: .current)
+    animator = nil
+
+    // Reset effect
+    effect = nil
+
+    // Create new animator
+    animator = UIViewPropertyAnimator(duration: 1, curve: .linear)
+    animator?.addAnimations { [weak self] in
+      self?.effect = UIBlurEffect(style: self?.blurStyle ?? .systemMaterial)
+    }
+
+    // Set intensity and pause
+    animator?.fractionComplete = intensity
+    animator?.pauseAnimation()
+  }
+
+  deinit {
+    animator?.stopAnimation(true)
+    animator?.finishAnimation(at: .current)
+  }
+}
+
+struct Blur: UIViewRepresentable {
+  var style: UIBlurEffect.Style = .systemMaterial
+  var intensity: Double = 1.0
+
+  func makeUIView(context: Context) -> BlurEffectView {
+    let effectView = BlurEffectView(effect: nil)
+    effectView.updateBlur(style: style, intensity: intensity)
+    return effectView
+  }
+
+  func updateUIView(_ uiView: BlurEffectView, context: Context) {
+    uiView.updateBlur(style: style, intensity: intensity)
+  }
+}
+
+// MARK: - Helper Functions
+
+private func blurStyleFromString(_ styleString: String) -> UIBlurEffect.Style {
+  switch styleString {
+  case "xlight":
+    return .extraLight
+  case "light":
+    return .light
+  case "dark":
+    return .dark
+  case "extraDark":
+    return .systemThickMaterialDark
+  case "regular":
+    return .regular
+  case "prominent":
+    return .prominent
+  case "systemUltraThinMaterial":
+    return .systemUltraThinMaterial
+  case "systemThinMaterial":
+    return .systemThinMaterial
+  case "systemMaterial":
+    return .systemMaterial
+  case "systemThickMaterial":
+    return .systemThickMaterial
+  case "systemChromeMaterial":
+    return .systemChromeMaterial
+  default:
+    return .extraLight
+  }
+}
+
+@available(iOS 26.0, *)
+private func glassEffectFromString(_ glassTypeString: String) -> Glass {
+  switch glassTypeString {
+  case "regular":
+    return .regular
+  case "clear":
+    return .clear
+  default:
+    return .clear
+  }
+}
+
+// MARK: - Helper Functions for Blur Amount Mapping
+
+/// Maps blur amount (0-100) to proper blur intensity using UIViewPropertyAnimator approach
+private func mapBlurAmountToIntensity(_ amount: Double) -> Double {
+  let clampedAmount = max(0.0, min(100.0, amount))
+
+  // Map 0-100 to 0-1.0 intensity for smooth progression
+  return clampedAmount / 100.0
+}
+
+// MARK: - Simple SwiftUI View
+
+private 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
+
+  var body: some View {
+    let blurIntensity = mapBlurAmountToIntensity(blurAmount)
+
+    // Check if reduced transparency is enabled
+    let isReducedTransparencyEnabled = UIAccessibility.isReduceTransparencyEnabled
+
+    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
+        Rectangle()
+          .fill(Color(.clear))
+          .background(Blur(style: blurStyle, intensity: blurIntensity))
+      }
+    }
+  }
+}
+
+// MARK: - UIKit Wrapper
+
+@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 {
+    didSet {
+      updateView()
+    }
+  }
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupHostingController()
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setupHostingController()
+  }
+
+  private func setupHostingController() {
+    let blurStyle = blurStyleFromString(blurTypeString)
+    let swiftUIView = BasicColoredView(glassTintColor: glassTintColor, glassOpacity: glassOpacity, blurAmount: blurAmount, blurStyle: blurStyle, type: type, glassType: glassType, reducedTransparencyFallbackColor: reducedTransparencyFallbackColor, isInteractive: isInteractive)
+    let hosting = UIHostingController(rootView: swiftUIView)
+
+    hosting.view.backgroundColor = .clear
+    hosting.view.translatesAutoresizingMaskIntoConstraints = false
+
+    addSubview(hosting.view)
+    NSLayoutConstraint.activate([
+      hosting.view.topAnchor.constraint(equalTo: topAnchor),
+      hosting.view.leadingAnchor.constraint(equalTo: leadingAnchor),
+      hosting.view.trailingAnchor.constraint(equalTo: trailingAnchor),
+      hosting.view.bottomAnchor.constraint(equalTo: bottomAnchor)
+    ])
+
+    self.hostingController = hosting
+  }
+
+  private func updateView() {
+    let blurStyle = blurStyleFromString(blurTypeString)
+    let newSwiftUIView = BasicColoredView(glassTintColor: glassTintColor, glassOpacity: glassOpacity, blurAmount: blurAmount, blurStyle: blurStyle, type:type, glassType: glassType, reducedTransparencyFallbackColor: reducedTransparencyFallbackColor, isInteractive: isInteractive)
+    hostingController?.rootView = newSwiftUIView
+  }
+}
+
+// MARK: - Objective-C Bridging Helpers
+
+@objc public class ReactNativeBlurViewHelper: NSObject {
+
+  /// Creates and returns a view containing a colored rectangle.
+  @objc public static func createBlurViewWithFrame(_ frame: CGRect) -> AdvancedBlurView {
+    return AdvancedBlurView(frame: frame)
+  }
+
+  /// Updates the blur view with a new glass tint color.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withGlassTintColor glassTintColor: UIColor) {
+    blurView.glassTintColor = glassTintColor
+  }
+
+  /// Updates the blur view with a new glass opacity.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withGlassOpacity glassOpacity: Double) {
+    blurView.glassOpacity = glassOpacity
+  }
+
+  /// Updates the blur view with a new blur amount.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withBlurAmount blurAmount: Double) {
+    blurView.blurAmount = blurAmount
+  }
+
+  /// Updates the blur view with a new blur type.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withBlurType blurType: String) {
+    blurView.blurTypeString = blurType
+  }
+
+  /// Updates the blur view with a new glass type.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withGlassType glassType: String) {
+    blurView.glassType = glassType
+  }
+
+  /// Updates the blur view with a new blur style.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withType type: String) {
+    blurView.type = type
+  }
+
+  /// Updates the blur view with a new blur style.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withIsInteractive isInteractive: Bool) {
+    blurView.isInteractive = isInteractive
+  }
+
+  /// Updates the blur view with a new reduced transparency fallback color.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withReducedTransparencyFallbackColor fallbackColor: UIColor) {
+    blurView.reducedTransparencyFallbackColor = fallbackColor
+  }
+
+  /// No-op updater kept for API compatibility.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView) {
+    // Nothing to update in the minimal implementation
+  }
+}
+

package/ios/ReactNativeBlurViewManager.h

@@ -0,0 +1,5 @@
+#import <React/RCTViewManager.h>
+
+@interface ReactNativeBlurViewManager : RCTViewManager
+
+@end

package/ios/ReactNativeBlurViewManager.m

@@ -0,0 +1,171 @@
+#import "ReactNativeBlurViewManager.h"
+#import "ReactNativeBlur-Swift.h"
+#import <React/RCTUIManager.h>
+#import <React/RCTBridge.h>
+
+@interface ReactNativeBlurViewManager ()
+
+@end
+
+@implementation ReactNativeBlurViewManager
+
+RCT_EXPORT_MODULE(ReactNativeBlurView)
+
+- (UIView *)view
+{
+  return [ReactNativeBlurViewHelper createBlurViewWithFrame:CGRectZero];
+}
+
+// Export properties
+
+// Custom setters for proper type conversion
+RCT_CUSTOM_VIEW_PROPERTY(glassTintColor, NSString, AdvancedBlurView)
+{
+  NSString *colorString = json ? [RCTConvert NSString:json] : @"clear";
+  UIColor *color = [self colorFromString:colorString];
+  [ReactNativeBlurViewHelper updateBlurView:view withGlassTintColor:color];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(glassOpacity, NSNumber, AdvancedBlurView)
+{
+  double opacity = json ? [RCTConvert double:json] : 1.0;
+  [ReactNativeBlurViewHelper updateBlurView:view withGlassOpacity:opacity];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(blurAmount, NSNumber, AdvancedBlurView)
+{
+  double amount = json ? [RCTConvert double:json] : 10.0;
+  [ReactNativeBlurViewHelper updateBlurView:view withBlurAmount:amount];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(blurType, NSString, AdvancedBlurView)
+{
+  NSString *blurType = json ? [RCTConvert NSString:json] : @"xlight";
+  [ReactNativeBlurViewHelper updateBlurView:view withBlurType:blurType];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(glassType, NSString, AdvancedBlurView)
+{
+  NSString *glassType = json ? [RCTConvert NSString:json] : @"clear";
+  [ReactNativeBlurViewHelper updateBlurView:view withGlassType:glassType];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(type, NSString, AdvancedBlurView)
+{
+  NSString *type = json ? [RCTConvert NSString:json] : @"blur";
+  [ReactNativeBlurViewHelper updateBlurView:view withType:type];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(isInteractive, NSNumber, AdvancedBlurView)
+{
+  BOOL isInteractive = json ? [RCTConvert BOOL:json] : YES;
+  [ReactNativeBlurViewHelper updateBlurView:view withIsInteractive:isInteractive];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlurView)
+{
+  NSString *colorString = json ? [RCTConvert NSString:json] : @"#FFFFFF";
+  UIColor *color = [self colorFromString:colorString];
+  [ReactNativeBlurViewHelper updateBlurView:view withReducedTransparencyFallbackColor:color];
+}
+
+// Color parsing helper method (copied from ReactNativeBlurView.mm)
+- (UIColor *)colorFromString:(NSString *)colorString {
+  // Input validation
+  if (!colorString || [colorString isEqualToString:@""] || colorString.length == 0) {
+    return [UIColor clearColor]; // Default color
+  }
+  
+  // Prevent excessively long strings that could cause performance issues
+  if (colorString.length > 50) {
+    NSLog(@"[ReactNativeBlurViewManager] Warning: Color string too long, using default clear color");
+    return [UIColor clearColor];
+  }
+  
+  // Handle common color names
+  NSDictionary *colorMap = @{
+    @"red": [UIColor redColor],
+    @"blue": [UIColor blueColor],
+    @"green": [UIColor greenColor],
+    @"yellow": [UIColor yellowColor],
+    @"orange": [UIColor orangeColor],
+    @"purple": [UIColor purpleColor],
+    @"black": [UIColor blackColor],
+    @"white": [UIColor whiteColor],
+    @"gray": [UIColor grayColor],
+    @"clear": [UIColor clearColor],
+    @"transparent": [UIColor clearColor]
+  };
+  
+  UIColor *namedColor = colorMap[colorString.lowercaseString];
+  if (namedColor) {
+    return namedColor;
+  }
+  
+  // Handle hex colors (e.g., "#FF0000", "FF0000", "#FF00FF00", "FF00FF00")
+  NSString *hexString = colorString;
+  if ([hexString hasPrefix:@"#"]) {
+    if (hexString.length < 2) {
+      NSLog(@"[ReactNativeBlurViewManager] Warning: Invalid hex color format '%@', using default clear color", colorString);
+      return [UIColor clearColor];
+    }
+    hexString = [hexString substringFromIndex:1];
+  }
+  
+  // Validate hex string contains only valid hex characters
+  NSCharacterSet *hexCharacterSet = [NSCharacterSet characterSetWithCharactersInString:@"0123456789ABCDEFabcdef"];
+  NSCharacterSet *invalidCharacters = [hexCharacterSet invertedSet];
+  if ([hexString rangeOfCharacterFromSet:invalidCharacters].location != NSNotFound) {
+    NSLog(@"[ReactNativeBlurViewManager] Warning: Invalid hex color format '%@', contains non-hex characters", colorString);
+    return [UIColor clearColor];
+  }
+  
+  // Handle 6-character hex (RGB)
+  if (hexString.length == 6) {
+    unsigned int hexValue;
+    NSScanner *scanner = [NSScanner scannerWithString:hexString];
+    if ([scanner scanHexInt:&hexValue] && [scanner isAtEnd]) {
+      return [UIColor colorWithRed:((hexValue & 0xFF0000) >> 16) / 255.0
+                             green:((hexValue & 0x00FF00) >> 8) / 255.0
+                              blue:(hexValue & 0x0000FF) / 255.0
+                             alpha:1.0];
+    }
+  }
+  // Handle 8-character hex (RGBA)
+  else if (hexString.length == 8) {
+    unsigned long long hexValue;
+    NSScanner *scanner = [NSScanner scannerWithString:hexString];
+    if ([scanner scanHexLongLong:&hexValue] && [scanner isAtEnd]) {
+      return [UIColor colorWithRed:((hexValue & 0xFF000000) >> 24) / 255.0
+                             green:((hexValue & 0x00FF0000) >> 16) / 255.0
+                              blue:((hexValue & 0x0000FF00) >> 8) / 255.0
+                             alpha:(hexValue & 0x000000FF) / 255.0];
+    }
+  }
+  // Handle 3-character hex (RGB shorthand)
+  else if (hexString.length == 3) {
+    unsigned int hexValue;
+    NSScanner *scanner = [NSScanner scannerWithString:hexString];
+    if ([scanner scanHexInt:&hexValue] && [scanner isAtEnd]) {
+      // Expand 3-digit hex to 6-digit (e.g., "F0A" -> "FF00AA")
+      unsigned int r = (hexValue & 0xF00) >> 8;
+      unsigned int g = (hexValue & 0x0F0) >> 4;
+      unsigned int b = (hexValue & 0x00F);
+      
+      return [UIColor colorWithRed:(r | (r << 4)) / 255.0
+                             green:(g | (g << 4)) / 255.0
+                              blue:(b | (b << 4)) / 255.0
+                             alpha:1.0];
+    }
+  }
+  else {
+    NSLog(@"[ReactNativeBlurViewManager] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters", 
+          (unsigned long)hexString.length, colorString);
+  }
+  
+  NSLog(@"[ReactNativeBlurViewManager] Warning: Could not parse color '%@', using default clear color", colorString);
+  return [UIColor clearColor]; // Fallback to clear
+}
+
+@end
+

package/lib/module/BlurView.js

@@ -27,11 +27,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ```
  */
 export const BlurView = ({
-  blurType = 'light',
+  blurType = 'xlight',
   blurAmount = 10,
-  reducedTransparencyFallbackColor,
+  reducedTransparencyFallbackColor = '#FFFFFF',
   style,
   children,
+  type = 'blur',
+  glassType = 'clear',
+  glassTintColor = 'clear',
+  glassOpacity = 1.0,
+  isInteractive = true,
   ...props
 }) => {
   // If no children, render the blur view directly (for background use)
@@ -39,8 +44,13 @@ export const BlurView = ({
     return /*#__PURE__*/_jsx(ReactNativeBlurView, {
       blurType: blurType,
       blurAmount: blurAmount,
+      glassType: glassType,
+      glassTintColor: glassTintColor,
+      glassOpacity: glassOpacity,
+      type: type,
       reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
       style: style,
+      isInteractive: isInteractive,
       ...props
     });
   }
@@ -54,6 +64,11 @@ export const BlurView = ({
     children: [/*#__PURE__*/_jsx(ReactNativeBlurView, {
       blurType: blurType,
       blurAmount: blurAmount,
+      glassType: glassType,
+      glassTintColor: glassTintColor,
+      glassOpacity: glassOpacity,
+      type: type,
+      isInteractive: isInteractive,
       reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
       style: {
         position: 'absolute',

package/lib/module/BlurView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","style","children","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;AAgC9C;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,OAAO;EAClBC,UAAU,GAAG,EAAE;EACfC,gCAAgC;EAChCC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,IAAIb,KAAK,CAACc,QAAQ,CAACC,KAAK,CAACH,QAAQ,CAAC,KAAK,CAAC,EAAE;IACxC,oBACER,IAAA,CAACF,mBAAmB;MAClBM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEA,KAAM;MAAA,GACTE;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEP,KAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAAC;MAAEK,QAAQ,EAAE,UAAU;MAAEC,QAAQ,EAAE;IAAS,CAAC,EAAEN,KAAK,CAAE;IAAAC,QAAA,gBAEjER,IAAA,CAACF,mBAAmB;MAClBM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAE;QACLK,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,eAEFT,IAAA,CAACH,IAAI;MAACU,KAAK,EAAE;QAAEK,QAAQ,EAAE,UAAU;QAAEM,MAAM,EAAE;MAAE,CAAE;MAAAV,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC/D,CAAC;AAEX,CAAC;AAED,eAAeL,QAAQ","ignoreList":[]}
+{"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":[]}

package/lib/module/ReactNativeBlurViewNativeComponent.ts

@@ -18,10 +18,17 @@ export type BlurType =
   | 'systemThickMaterial'
   | 'systemChromeMaterial';
 
+export type GlassType = 'clear' | 'regular';
+
 interface NativeProps extends ViewProps {
-  blurType?: WithDefault<BlurType, 'light'>;
-  blurAmount?: WithDefault<Double, 10>;
-  reducedTransparencyFallbackColor?: string;
+  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>;
 }
 
 export default codegenNativeComponent<NativeProps>('ReactNativeBlurView');

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { ViewStyle, StyleProp } from 'react-native';
 import { type BlurType } from './ReactNativeBlurViewNativeComponent';
+import type { GlassType } from '../src/ReactNativeBlurViewNativeComponent';
 export interface BlurViewProps {
     /**
      * The type of blur effect to apply
-     * @default 'light'
+     * @default 'xlight'
      */
     blurType?: BlurType;
     /**
@@ -15,6 +16,7 @@ export interface BlurViewProps {
     /**
      * Fallback color when reduced transparency is enabled
      * Accepts hex color strings like '#FFFFFF'
+     * @default '#FFFFFF'
      */
     reducedTransparencyFallbackColor?: string;
     /**
@@ -25,6 +27,39 @@ export interface BlurViewProps {
      * Child components to render inside the blur view
      */
     children?: React.ReactNode;
+    /**
+     * Platform: iOS only
+     * The type of glass effect to apply
+     * @default 'clear'
+     */
+    glassType?: GlassType;
+    /**
+     * Platform: iOS only
+     * The tint color of the glass effect
+     * accepts hex color strings like '#FFFFFF'
+     * accepts color names like 'white', 'clear', 'black', 'red', 'green', 'blue', 'yellow', 'cyan', 'magenta'
+     * @default 'clear'
+     */
+    glassTintColor?: string;
+    /**
+     * Platform: iOS only
+     * The opacity of the glass effect (0-1)
+     * @default 1.0
+     */
+    glassOpacity?: number;
+    /**
+     * The type of blur effect to apply
+     * liquidGlass = iOS Only
+     * blur = Android | iOS
+     * @default 'blur'
+     */
+    type?: 'blur' | 'liquidGlass';
+    /**
+     * Platform: iOS only
+     * Whether the blur view should be interactive
+     * @default true
+     */
+    isInteractive?: boolean;
 }
 /**
  * A cross-platform blur view component that provides native blur effects.

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,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0C5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IAE9B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -1,10 +1,16 @@
 import type { ViewProps } from 'react-native';
 import type { WithDefault, Double } from 'react-native/Libraries/Types/CodegenTypes';
 export type BlurType = 'xlight' | 'light' | 'dark' | 'extraDark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial';
+export type GlassType = 'clear' | 'regular';
 interface NativeProps extends ViewProps {
-    blurType?: WithDefault<BlurType, 'light'>;
-    blurAmount?: WithDefault<Double, 10>;
-    reducedTransparencyFallbackColor?: string;
+    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>;
 }
 declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"ReactNativeBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeBlurViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,OAAO,GACP,MAAM,GACN,WAAW,GACX,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,CAAC;AAE3B,UAAU,WAAY,SAAQ,SAAS;IACrC,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IACrC,gCAAgC,CAAC,EAAE,MAAM,CAAC;CAC3C;;AAED,wBAA0E"}
+{"version":3,"file":"ReactNativeBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeBlurViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,OAAO,GACP,MAAM,GACN,WAAW,GACX,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,CAAC;AAE3B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5C,UAAU,WAAY,SAAQ,SAAS;IACrC,cAAc,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAC5C,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClE,aAAa,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;CAC5C;;AAED,wBAA0E"}

package/package.json

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