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

package/ios/ReactNativeBlurView.mm

@@ -6,98 +6,172 @@
 #import <react/renderer/components/ReactNativeBlurViewSpec/RCTComponentViewHelpers.h>
 
 #import "RCTFabricComponentsPlugins.h"
+#import "ReactNativeBlur-Swift.h" // Swift bridging header
 
 using namespace facebook::react;
 
 @interface ReactNativeBlurView () <RCTReactNativeBlurViewViewProtocol>
-
 @end
 
 @implementation ReactNativeBlurView {
-  UIVisualEffectView * _blurView;
-  UIView * _fallbackView;
-}
-
-+ (ComponentDescriptorProvider)componentDescriptorProvider
-{
-  return concreteComponentDescriptorProvider<ReactNativeBlurViewComponentDescriptor>();
+  AdvancedBlurView *_advancedBlurView;
+  Props::Shared _props;
 }
 
-- (instancetype)initWithFrame:(CGRect)frame
-{
-  if (self = [super initWithFrame:frame]) {
-    static const auto defaultProps = std::make_shared<const ReactNativeBlurViewProps>();
-    _props = defaultProps;
-    
-    [self setupBlurView];
++ (UIColor *)colorFromString:(NSString *)colorString {
+  // Input validation
+  if (!colorString || [colorString isEqualToString:@""] || colorString.length == 0) {
+    return [UIColor clearColor]; // Default color
   }
   
-  return self;
-}
-
-- (void)setupBlurView
-{
-  // Create blur effect
-  UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
-  _blurView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
-  _blurView.frame = self.bounds;
-  _blurView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+  // 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],
+    @"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;
+  }
   
-  // Create fallback view for reduced transparency
-  _fallbackView = [[UIView alloc] init];
-  _fallbackView.frame = self.bounds;
-  _fallbackView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
-  _fallbackView.backgroundColor = [UIColor colorWithWhite:0.8 alpha:0.8];
-  _fallbackView.hidden = YES;
+  // Handle hex colors (e.g., "#FF0000", "FF0000", "#FF00FF00", "FF00FF00")
+  NSString *hexString = colorString;
+  if ([hexString hasPrefix:@"#"]) {
+    if (hexString.length < 2) {
+      NSLog(@"[ReactNativeBlurView] Warning: Invalid hex color format '%@', using default clear color", colorString);
+      return [UIColor clearColor];
+    }
+    hexString = [hexString substringFromIndex:1];
+  }
   
-  // Insert blur views at index 0 to avoid interfering with React's child view management
-  [self insertSubview:_blurView atIndex:0];
-  [self insertSubview:_fallbackView atIndex:0];
+  // Validate hex string contains only valid hex characters
+  NSCharacterSet *hexCharacterSet = [NSCharacterSet characterSetWithCharactersInString:@"0123456789ABCDEFabcdef"];
+  NSCharacterSet *invalidCharacters = [hexCharacterSet invertedSet];
+  if ([hexString rangeOfCharacterFromSet:invalidCharacters].location != NSNotFound) {
+    NSLog(@"[ReactNativeBlurView] Warning: Invalid hex color format '%@', contains non-hex characters", colorString);
+    return [UIColor clearColor];
+  }
   
-  // Check for reduced transparency
-  [self updateForReducedTransparency];
+  // 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(@"[ReactNativeBlurView] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters", 
+          (unsigned long)hexString.length, colorString);
+  }
   
-  // Listen for accessibility changes
-  [[NSNotificationCenter defaultCenter] addObserver:self
-                                           selector:@selector(updateForReducedTransparency)
-                                               name:UIAccessibilityReduceTransparencyStatusDidChangeNotification
-                                             object:nil];
+  NSLog(@"[ReactNativeBlurView] Warning: Could not parse color '%@', using default clear color", colorString);
+  return [UIColor clearColor]; // Fallback to clear
 }
 
-- (void)updateForReducedTransparency
+
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
 {
-  BOOL reduceTransparency = UIAccessibilityIsReduceTransparencyEnabled();
-  _blurView.hidden = reduceTransparency;
-  _fallbackView.hidden = !reduceTransparency;
+  return concreteComponentDescriptorProvider<ReactNativeBlurViewComponentDescriptor>();
 }
 
-- (UIBlurEffectStyle)blurEffectStyleFromString:(NSString *)blurType
+- (instancetype)initWithFrame:(CGRect)frame
 {
-  if ([blurType isEqualToString:@"xlight"]) {
-    return UIBlurEffectStyleExtraLight;
-  } else if ([blurType isEqualToString:@"light"]) {
-    return UIBlurEffectStyleLight;
-  } else if ([blurType isEqualToString:@"dark"]) {
-    return UIBlurEffectStyleDark;
-  } else if ([blurType isEqualToString:@"extraDark"]) {
-    return UIBlurEffectStyleSystemThickMaterialDark;
-  } else if ([blurType isEqualToString:@"regular"]) {
-    return UIBlurEffectStyleRegular;
-  } else if ([blurType isEqualToString:@"prominent"]) {
-    return UIBlurEffectStyleProminent;
-  } else if ([blurType isEqualToString:@"systemUltraThinMaterial"]) {
-    return UIBlurEffectStyleSystemUltraThinMaterial;
-  } else if ([blurType isEqualToString:@"systemThinMaterial"]) {
-    return UIBlurEffectStyleSystemThinMaterial;
-  } else if ([blurType isEqualToString:@"systemMaterial"]) {
-    return UIBlurEffectStyleSystemMaterial;
-  } else if ([blurType isEqualToString:@"systemThickMaterial"]) {
-    return UIBlurEffectStyleSystemThickMaterial;
-  } else if ([blurType isEqualToString:@"systemChromeMaterial"]) {
-    return UIBlurEffectStyleSystemChromeMaterial;
+  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];
+    }
+    
+    [self addSubview:_advancedBlurView];
   }
-  
-  return UIBlurEffectStyleLight; // Default
+  return self;
 }
 
 - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
@@ -105,106 +179,76 @@ 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 blur type
-  if (oldViewProps.blurType != newViewProps.blurType) {
-    std::string blurTypeStr = toString(newViewProps.blurType);
-    NSString *blurTypeString = [[NSString alloc] initWithUTF8String:blurTypeStr.c_str()];
-    UIBlurEffectStyle blurStyle = [self blurEffectStyleFromString:blurTypeString];
-    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:blurStyle];
-    _blurView.effect = blurEffect;
+  // 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 blur amount (create custom blur effect)
+  // Update blurAmount if it has changed
   if (oldViewProps.blurAmount != newViewProps.blurAmount) {
-    [self updateBlurEffectWithAmount:newViewProps.blurAmount];
+    [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurAmount:newViewProps.blurAmount];
   }
   
-  // Update fallback color
-  if (oldViewProps.reducedTransparencyFallbackColor != newViewProps.reducedTransparencyFallbackColor) {
-    if (!newViewProps.reducedTransparencyFallbackColor.empty()) {
-      NSString *colorString = [[NSString alloc] initWithUTF8String:newViewProps.reducedTransparencyFallbackColor.c_str()];
-      _fallbackView.backgroundColor = [self hexStringToColor:colorString];
+  // Update blurType if it has changed
+  if (oldViewProps.blurType != newViewProps.blurType) {
+    if (newViewProps.blurType != facebook::react::ReactNativeBlurViewBlurType::Xlight) {
+      NSString *blurTypeString = [[NSString alloc] initWithUTF8String:toString(newViewProps.blurType).c_str()];
+      [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withBlurType:blurTypeString];
     }
   }
   
-  [super updateProps:props oldProps:oldProps];
-}
-
-- (void)updateBlurEffectWithAmount:(double)amount
-{
-  // For amounts 0-30: Use alpha blending with UIVisualEffectView
-  // For amounts 30+: Create custom blur effect with Core Image
-  
-  if (amount <= 30.0) {
-    // Use standard UIVisualEffectView with alpha
-    CGFloat alpha = amount / 30.0; // Scale to 0-1 for low amounts
-    _blurView.alpha = alpha;
-    
-    // Remove any custom blur layer
-    [self.layer.sublayers enumerateObjectsUsingBlock:^(CALayer *layer, NSUInteger idx, BOOL *stop) {
-      if ([layer.name isEqualToString:@"customBlur"]) {
-        [layer removeFromSuperlayer];
-      }
-    }];
-  } else {
-    // Use full opacity for the base blur
-    _blurView.alpha = 1.0;
-    
-    // Add custom blur overlay for enhanced effect
-    [self addCustomBlurOverlayWithIntensity:(amount - 30.0) / 70.0]; // Scale 30-100 to 0-1
-  }
-}
-
-- (void)addCustomBlurOverlayWithIntensity:(CGFloat)intensity
-{
-  // Remove existing custom blur layer
-  [self.layer.sublayers enumerateObjectsUsingBlock:^(CALayer *layer, NSUInteger idx, BOOL *stop) {
-    if ([layer.name isEqualToString:@"customBlur"]) {
-      [layer removeFromSuperlayer];
+  // 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];
     }
-  }];
-  
-  // Create a semi-transparent overlay that simulates additional blur
-  CALayer *blurOverlay = [CALayer layer];
-  blurOverlay.name = @"customBlur";
-  blurOverlay.frame = self.bounds;
+  }
   
-  // Create a gradient effect that simulates depth
-  CAGradientLayer *gradientLayer = [CAGradientLayer layer];
-  gradientLayer.frame = self.bounds;
+  // 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];
+  }
   
-  // Adjust colors based on blur type
-  UIColor *overlayColor;
-  if ([self.blurType isEqualToString:@"dark"] || [self.blurType isEqualToString:@"extraDark"]) {
-    overlayColor = [UIColor colorWithWhite:0.0 alpha:intensity * 0.3];
-  } else {
-    overlayColor = [UIColor colorWithWhite:1.0 alpha:intensity * 0.2];
+  // Update isInteractive if it has changed
+  if (oldViewProps.isInteractive != newViewProps.isInteractive) {
+    [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withIsInteractive:newViewProps.isInteractive];
   }
   
-  gradientLayer.colors = @[
-    (id)[overlayColor colorWithAlphaComponent:intensity * 0.1].CGColor,
-    (id)[overlayColor colorWithAlphaComponent:intensity * 0.3].CGColor,
-    (id)[overlayColor colorWithAlphaComponent:intensity * 0.1].CGColor
-  ];
+  // 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 = [ReactNativeBlurView colorFromString:fallbackColorString];
+      [ReactNativeBlurViewHelper updateBlurView:_advancedBlurView withReducedTransparencyFallbackColor:fallbackColor];
+    }
+  }
   
-  gradientLayer.locations = @[@0.0, @0.5, @1.0];
+  // Store the new props
+  _props = props;
   
-  [blurOverlay addSublayer:gradientLayer];
-  [self.layer addSublayer:blurOverlay];
+  [super updateProps:props oldProps:oldProps];
 }
 
-- (NSString *)blurType
+- (void)layoutSubviews
 {
-  const auto &props = *std::static_pointer_cast<ReactNativeBlurViewProps const>(_props);
-  std::string blurTypeStr = toString(props.blurType);
-  return [[NSString alloc] initWithUTF8String:blurTypeStr.c_str()];
+  [super layoutSubviews];
+  _advancedBlurView.frame = self.bounds;
 }
 
 - (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
 {
-  // Always insert React subviews after the blur views (which are at indices 0 and 1)
-  NSInteger adjustedIndex = index + 2;
-  [self insertSubview:childComponentView atIndex:adjustedIndex];
+  [_advancedBlurView addSubview:childComponentView];
 }
 
 - (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
@@ -212,100 +256,16 @@ using namespace facebook::react;
   [childComponentView removeFromSuperview];
 }
 
-- (void)layoutSubviews
-{
-  [super layoutSubviews];
-  
-  // Ensure blur view and fallback view cover the entire bounds
-  if (_blurView) {
-    _blurView.frame = self.bounds;
-  }
-  if (_fallbackView) {
-    _fallbackView.frame = self.bounds;
-  }
-  
-  // Keep blur views at the back without using sendSubviewToBack to avoid index conflicts
-  if (_blurView && _blurView.superview == self) {
-    // Move to index 0 if not already there
-    NSInteger currentIndex = [self.subviews indexOfObject:_blurView];
-    if (currentIndex != 0 && currentIndex != NSNotFound) {
-      [_blurView removeFromSuperview];
-      [self insertSubview:_blurView atIndex:0];
-    }
-  }
-  if (_fallbackView && _fallbackView.superview == self) {
-    // Move to index 1 if not already there (after blur view)
-    NSInteger currentIndex = [self.subviews indexOfObject:_fallbackView];
-    if (currentIndex != 1 && currentIndex != NSNotFound) {
-      [_fallbackView removeFromSuperview];
-      [self insertSubview:_fallbackView atIndex:1];
-    }
-  }
-}
-
 - (void)dealloc
 {
-  [[NSNotificationCenter defaultCenter] removeObserver:self];
-  
-  // Clean up blur views
-  if (_blurView) {
-    [_blurView removeFromSuperview];
-    _blurView = nil;
-  }
-  if (_fallbackView) {
-    [_fallbackView removeFromSuperview];
-    _fallbackView = nil;
-  }
-}
-
-Class<RCTComponentViewProtocol> ReactNativeBlurViewCls(void)
-{
-  return ReactNativeBlurView.class;
-}
-
-// Legacy compatibility methods for Old Architecture
-- (void)setBlurAmount:(NSNumber *)blurAmount
-{
-  if (blurAmount) {
-    [self updateBlurEffectWithAmount:[blurAmount doubleValue]];
-  }
+  [_advancedBlurView removeFromSuperview];
+  _advancedBlurView = nil;
 }
 
-- (void)setBlurType:(NSString *)blurType
-{
-  if (blurType) {
-    UIBlurEffectStyle blurStyle = [self blurEffectStyleFromString:blurType];
-    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:blurStyle];
-    _blurView.effect = blurEffect;
-  }
-}
-
-- (void)setReducedTransparencyFallbackColor:(NSString *)color
-{
-  if (color && color.length > 0) {
-    _fallbackView.backgroundColor = [self hexStringToColor:color];
-  }
-}
+@end
 
-- (UIColor *)hexStringToColor:(NSString *)stringToConvert
+Class<RCTComponentViewProtocol> BlurryViewCls(void)
 {
-  if (!stringToConvert || stringToConvert.length == 0) {
-    return [UIColor clearColor];
-  }
-  
-  NSString *noHashString = [stringToConvert stringByReplacingOccurrencesOfString:@"#" withString:@""];
-  NSScanner *stringScanner = [NSScanner scannerWithString:noHashString];
-  
-  unsigned hex;
-  if (![stringScanner scanHexInt:&hex]) {
-    return [UIColor clearColor];
-  }
-  
-  int r = (hex >> 16) & 0xFF;
-  int g = (hex >> 8) & 0xFF;
-  int b = (hex) & 0xFF;
-  
-  return [UIColor colorWithRed:r / 255.0f green:g / 255.0f blue:b / 255.0f alpha:1.0f];
+  return ReactNativeBlurView.class;
 }
 
-@end