@sbaiahmed1/react-native-blur 3.1.2 → 4.0.0

package/ios/ReactNativeBlurView.mm

@@ -28,13 +28,13 @@ using namespace facebook::react;
   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(@"[ReactNativeBlurView] Warning: Color string too long, using default clear color");
     return [UIColor clearColor];
   }
-  
+
   // Handle common color names
   NSDictionary *colorMap = @{
     @"red": [UIColor redColor],
@@ -49,12 +49,12 @@ using namespace facebook::react;
     @"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:@"#"]) {
@@ -64,7 +64,7 @@ using namespace facebook::react;
     }
     hexString = [hexString substringFromIndex:1];
   }
-  
+
   // Validate hex string contains only valid hex characters
   NSCharacterSet *hexCharacterSet = [NSCharacterSet characterSetWithCharactersInString:@"0123456789ABCDEFabcdef"];
   NSCharacterSet *invalidCharacters = [hexCharacterSet invertedSet];
@@ -72,7 +72,7 @@ using namespace facebook::react;
     NSLog(@"[ReactNativeBlurView] 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;
@@ -104,7 +104,7 @@ using namespace facebook::react;
       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
@@ -112,10 +112,10 @@ using namespace facebook::react;
     }
   }
   else {
-    NSLog(@"[ReactNativeBlurView] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters", 
+    NSLog(@"[ReactNativeBlurView] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters",
           (unsigned long)hexString.length, colorString);
   }
-  
+
   NSLog(@"[ReactNativeBlurView] Warning: Could not parse color '%@', using default clear color", colorString);
   return [UIColor clearColor]; // Fallback to clear
 }
@@ -132,48 +132,30 @@ using namespace facebook::react;
   if (self = [super initWithFrame:frame]) {
     static const auto defaultProps = std::make_shared<const ReactNativeBlurViewProps>();
     _props = defaultProps;
-    
+
     const auto &bvProps = *std::static_pointer_cast<const ReactNativeBlurViewProps>(defaultProps);
-    
+
     _advancedBlurView = [ReactNativeBlurViewHelper createBlurViewWithFrame:frame];
-    
-    // Set initial glassTintColor from default props
-    NSString *defaultGlassTintColorString = [[NSString alloc] initWithUTF8String:bvProps.glassTintColor.c_str()];
-    UIColor *defaultGlassTintColor = [ReactNativeBlurView colorFromString:defaultGlassTintColorString];
-    [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassTintColor:defaultGlassTintColor];
-    
-    // Set initial glassOpacity from default props
-    [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassOpacity:bvProps.glassOpacity];
-    
+
     // Set initial blurAmount from default props
     [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurAmount:bvProps.blurAmount];
-    
+
     // Set initial blurType from default props
     if (bvProps.blurType != facebook::react::ReactNativeBlurViewBlurType::Xlight) {
       NSString *blurTypeString = [[NSString alloc] initWithUTF8String:toString(bvProps.blurType).c_str()];
       [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurType:blurTypeString];
     }
-    
-    // Set initial isInteractive from default props
-      [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIsInteractive:bvProps.isInteractive];
-    
-    // Set initial glassType from default props
-    if (bvProps.glassType != facebook::react::ReactNativeBlurViewGlassType::Clear) {
-      NSString *glassTypeString = [[NSString alloc] initWithUTF8String:toString(bvProps.glassType).c_str()];
-      [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassType:glassTypeString];
-    }
-    
-    // Set initial type from default props
-    NSString *blurTypeString = [[NSString alloc] initWithUTF8String:toString(bvProps.type).c_str()];
-    [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withType:blurTypeString];
-    
+
     // Set initial reducedTransparencyFallbackColor from default props
     if (!bvProps.reducedTransparencyFallbackColor.empty()) {
       NSString *fallbackColorString = [[NSString alloc] initWithUTF8String:bvProps.reducedTransparencyFallbackColor.c_str()];
       UIColor *fallbackColor = [ReactNativeBlurView colorFromString:fallbackColorString];
       [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withReducedTransparencyFallbackColor:fallbackColor];
     }
-    
+
+    // Set initial ignoreSafeArea from default props
+    [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIgnoringSafeArea:bvProps.ignoreSafeArea];
+
     [self addSubview:_advancedBlurView];
   }
   return self;
@@ -183,26 +165,12 @@ using namespace facebook::react;
 {
   const auto &oldViewProps = *std::static_pointer_cast<ReactNativeBlurViewProps const>(_props);
   const auto &newViewProps = *std::static_pointer_cast<ReactNativeBlurViewProps const>(props);
-  
-  // Update glassTintColor if it has changed
-  if (oldViewProps.glassTintColor != newViewProps.glassTintColor) {
-    if (!newViewProps.glassTintColor.empty()) {
-      NSString *glassTintColorString = [[NSString alloc] initWithUTF8String:newViewProps.glassTintColor.c_str()];
-      UIColor *newGlassTintColor = [ReactNativeBlurView colorFromString:glassTintColorString];
-      [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassTintColor:newGlassTintColor];
-    }
-  }
-  
-  // Update glassOpacity if it has changed
-  if (oldViewProps.glassOpacity != newViewProps.glassOpacity) {
-    [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassOpacity:newViewProps.glassOpacity];
-  }
-  
+
   // Update blurAmount if it has changed
   if (oldViewProps.blurAmount != newViewProps.blurAmount) {
     [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurAmount:newViewProps.blurAmount];
   }
-  
+
   // Update blurType if it has changed
   if (oldViewProps.blurType != newViewProps.blurType) {
     if (newViewProps.blurType != facebook::react::ReactNativeBlurViewBlurType::Xlight) {
@@ -210,26 +178,7 @@ using namespace facebook::react;
       [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurType:blurTypeString];
     }
   }
-  
-  // Update glassType if it has changed
-  if (oldViewProps.glassType != newViewProps.glassType) {
-    if (newViewProps.glassType != facebook::react::ReactNativeBlurViewGlassType::Clear) {
-      NSString *glassTypeString = [[NSString alloc] initWithUTF8String:toString(newViewProps.glassType).c_str()];
-      [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withGlassType:glassTypeString];
-    }
-  }
-  
-  // Update type if it has changed
-  if (oldViewProps.type != newViewProps.type) {
-    NSString *blurTypeString = [[NSString alloc] initWithUTF8String:toString(newViewProps.type).c_str()];
-    [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withType:blurTypeString];
-  }
-  
-  // Update isInteractive if it has changed
-  if (oldViewProps.isInteractive != newViewProps.isInteractive) {
-    [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIsInteractive:newViewProps.isInteractive];
-  }
-  
+
   // Update reducedTransparencyFallbackColor if it has changed
   if (oldViewProps.reducedTransparencyFallbackColor != newViewProps.reducedTransparencyFallbackColor) {
     if (!newViewProps.reducedTransparencyFallbackColor.empty()) {
@@ -238,10 +187,15 @@ using namespace facebook::react;
       [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withReducedTransparencyFallbackColor:fallbackColor];
     }
   }
-  
+
+  // Update ignoreSafeArea if it has changed
+  if (oldViewProps.ignoreSafeArea != newViewProps.ignoreSafeArea) {
+    [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIgnoringSafeArea:newViewProps.ignoreSafeArea];
+  }
+
   // Store the new props
   _props = props;
-  
+
   [super updateProps:props oldProps:oldProps];
 }
 

package/ios/{ReactNativeBlurViewManager.m → ReactNativeBlurViewManager.mm}

@@ -25,18 +25,6 @@ RCT_EXPORT_MODULE(ReactNativeBlurView)
 // 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)
 {
@@ -50,24 +38,6 @@ RCT_CUSTOM_VIEW_PROPERTY(blurType, NSString, AdvancedBlurView)
   [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";
@@ -75,19 +45,25 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
   [ReactNativeBlurViewHelper updateBlurView:view withReducedTransparencyFallbackColor:color];
 }
 
+RCT_CUSTOM_VIEW_PROPERTY(ignoreSafeArea, BOOL, AdvancedBlurView)
+{
+  BOOL ignoreSafeArea = json ? [RCTConvert BOOL:json] : NO;
+  [ReactNativeBlurViewHelper updateBlurView:view withIgnoringSafeArea:ignoreSafeArea];
+}
+
 // 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],
@@ -102,12 +78,12 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
     @"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:@"#"]) {
@@ -117,7 +93,7 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
     }
     hexString = [hexString substringFromIndex:1];
   }
-  
+
   // Validate hex string contains only valid hex characters
   NSCharacterSet *hexCharacterSet = [NSCharacterSet characterSetWithCharactersInString:@"0123456789ABCDEFabcdef"];
   NSCharacterSet *invalidCharacters = [hexCharacterSet invertedSet];
@@ -125,7 +101,7 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
     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;
@@ -157,7 +133,7 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
       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
@@ -165,10 +141,10 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, AdvancedBlu
     }
   }
   else {
-    NSLog(@"[ReactNativeBlurViewManager] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters", 
+    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
 }

package/ios/ReactNativeLiquidGlassView.h

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

package/ios/ReactNativeLiquidGlassView.mm

@@ -0,0 +1,284 @@
+#import "ReactNativeLiquidGlassView.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 ReactNativeLiquidGlassView () <RCTReactNativeLiquidGlassViewViewProtocol>
+@end
+
+@implementation ReactNativeLiquidGlassView {
+  LiquidGlassContainerView *_liquidGlassView;
+  Props::Shared _props;
+  LayoutMetrics _layoutMetrics;
+}
+
++ (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(@"[ReactNativeLiquidGlassView] 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(@"[ReactNativeLiquidGlassView] 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(@"[ReactNativeLiquidGlassView] 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(@"[ReactNativeLiquidGlassView] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters",
+          (unsigned long)hexString.length, colorString);
+  }
+
+  NSLog(@"[ReactNativeLiquidGlassView] Warning: Could not parse color '%@', using default clear color", colorString);
+  return [UIColor clearColor]; // Fallback to clear
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<ReactNativeLiquidGlassViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const ReactNativeLiquidGlassViewProps>();
+    _props = defaultProps;
+
+    const auto &lgProps = *std::static_pointer_cast<const ReactNativeLiquidGlassViewProps>(defaultProps);
+
+    _liquidGlassView = [ReactNativeLiquidGlassViewHelper createLiquidGlassViewWithFrame:frame];
+
+    // Set initial glassTintColor from default props
+    NSString *defaultGlassTintColorString = [[NSString alloc] initWithUTF8String:lgProps.glassTintColor.c_str()];
+    UIColor *defaultGlassTintColor = [ReactNativeLiquidGlassView colorFromString:defaultGlassTintColorString];
+    [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withGlassTintColor:defaultGlassTintColor];
+
+    // Set initial glassOpacity from default props
+    [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withGlassOpacity:lgProps.glassOpacity];
+
+    // Set initial glassType from default props
+    if (lgProps.glassType != facebook::react::ReactNativeLiquidGlassViewGlassType::Clear) {
+      NSString *glassTypeString = [[NSString alloc] initWithUTF8String:toString(lgProps.glassType).c_str()];
+      [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withGlassType:glassTypeString];
+    }
+
+    // Set initial isInteractive from default props
+    [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withIsInteractive:lgProps.isInteractive];
+
+    // Set initial ignoreSafeArea from default props
+    [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withIgnoringSafeArea:lgProps.ignoreSafeArea];
+
+    // Set initial reducedTransparencyFallbackColor from default props
+    if (!lgProps.reducedTransparencyFallbackColor.empty()) {
+      NSString *fallbackColorString = [[NSString alloc] initWithUTF8String:lgProps.reducedTransparencyFallbackColor.c_str()];
+      UIColor *fallbackColor = [ReactNativeLiquidGlassView colorFromString:fallbackColorString];
+      [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withReducedTransparencyFallbackColor:fallbackColor];
+    }
+
+    [self addSubview:_liquidGlassView];
+  }
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &oldViewProps = *std::static_pointer_cast<ReactNativeLiquidGlassViewProps const>(_props);
+  const auto &newViewProps = *std::static_pointer_cast<ReactNativeLiquidGlassViewProps const>(props);
+
+  // Update glassTintColor if it has changed
+  if (oldViewProps.glassTintColor != newViewProps.glassTintColor) {
+    if (!newViewProps.glassTintColor.empty()) {
+      NSString *glassTintColorString = [[NSString alloc] initWithUTF8String:newViewProps.glassTintColor.c_str()];
+      UIColor *newGlassTintColor = [ReactNativeLiquidGlassView colorFromString:glassTintColorString];
+      [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withGlassTintColor:newGlassTintColor];
+    }
+  }
+
+  // Update glassOpacity if it has changed
+  if (oldViewProps.glassOpacity != newViewProps.glassOpacity) {
+    [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withGlassOpacity:newViewProps.glassOpacity];
+  }
+
+  // Update glassType if it has changed
+  if (oldViewProps.glassType != newViewProps.glassType) {
+    if (newViewProps.glassType != facebook::react::ReactNativeLiquidGlassViewGlassType::Clear) {
+      NSString *glassTypeString = [[NSString alloc] initWithUTF8String:toString(newViewProps.glassType).c_str()];
+      [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withGlassType:glassTypeString];
+    }
+  }
+
+  // Update isInteractive if it has changed
+  if (oldViewProps.isInteractive != newViewProps.isInteractive) {
+    [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withIsInteractive:newViewProps.isInteractive];
+  }
+
+  // Update ignoreSafeArea if it has changed
+  if (oldViewProps.ignoreSafeArea != newViewProps.ignoreSafeArea) {
+    [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withIgnoringSafeArea:newViewProps.ignoreSafeArea];
+  }
+
+  // Update reducedTransparencyFallbackColor if it has changed
+  if (oldViewProps.reducedTransparencyFallbackColor != newViewProps.reducedTransparencyFallbackColor) {
+    if (!newViewProps.reducedTransparencyFallbackColor.empty()) {
+      NSString *fallbackColorString = [[NSString alloc] initWithUTF8String:newViewProps.reducedTransparencyFallbackColor.c_str()];
+      UIColor *fallbackColor = [ReactNativeLiquidGlassView colorFromString:fallbackColorString];
+      [ReactNativeLiquidGlassViewHelper updateLiquidGlassView:_liquidGlassView withReducedTransparencyFallbackColor:fallbackColor];
+    }
+  }
+
+  // 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 inner glass view (Callstack pattern)
+  if (@available(iOS 26.0, *)) {
+    const auto &props = *std::static_pointer_cast<ReactNativeLiquidGlassViewProps 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) {
+      [_liquidGlassView setBorderRadius:radius];
+    }
+  }
+}
+
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  _liquidGlassView.frame = self.bounds;
+  
+  // Copy corner radius from the Fabric view to the inner glass view (Callstack pattern)
+  _liquidGlassView.layer.cornerRadius = self.layer.cornerRadius;
+  _liquidGlassView.layer.cornerCurve = self.layer.cornerCurve;
+  _liquidGlassView.layer.masksToBounds = YES;
+}
+
+- (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics oldLayoutMetrics:(const LayoutMetrics &)oldLayoutMetrics
+{
+  _layoutMetrics = layoutMetrics;
+  [super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  UIView *contentView = [_liquidGlassView getContentView];
+  if (contentView) {
+    [contentView insertSubview:childComponentView atIndex:index];
+  } else {
+    [_liquidGlassView addSubview:childComponentView];
+  }
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [childComponentView removeFromSuperview];
+}
+
+- (void)dealloc
+{
+  [_liquidGlassView removeFromSuperview];
+  _liquidGlassView = nil;
+}
+
+@end
+
+Class<RCTComponentViewProtocol> LiquidGlassViewCls(void)
+{
+  return ReactNativeLiquidGlassView.class;
+}

package/ios/ReactNativeLiquidGlassViewManager.h

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

package/ios/ReactNativeLiquidGlassViewManager.mm

@@ -0,0 +1,20 @@
+#import "ReactNativeLiquidGlassViewManager.h"
+#import "ReactNativeLiquidGlassView.h"
+
+@implementation ReactNativeLiquidGlassViewManager
+
+RCT_EXPORT_MODULE(ReactNativeLiquidGlassView)
+
+- (UIView *)view
+{
+  return [[ReactNativeLiquidGlassView alloc] init];
+}
+
+RCT_EXPORT_VIEW_PROPERTY(glassType, NSString)
+RCT_EXPORT_VIEW_PROPERTY(glassTintColor, NSString)
+RCT_EXPORT_VIEW_PROPERTY(glassOpacity, NSNumber)
+RCT_EXPORT_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString)
+RCT_EXPORT_VIEW_PROPERTY(isInteractive, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(ignoreSafeArea, BOOL)
+
+@end