@sbaiahmed1/react-native-blur 4.5.7 → 4.5.8-beta.0

package/README.md

@@ -54,7 +54,7 @@ A modern React Native library providing **six specialized components** for advan
 ## Requirements
 
 | Platform                  | Minimum Version                                       |
-| ------------------------- |-------------------------------------------------------|
+| ------------------------- | ----------------------------------------------------- |
 | **iOS**                   | iOS 13.0+                                             |
 | **Xcode**                 | min: Xcode 16; Xcode 26.0+ (for liquid glass support) |
 | **React Native**          | 0.68+ (New Architecture)                              |
@@ -158,7 +158,7 @@ import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
   - `LiquidGlassContainer` - iOS 26+ glass container with configurable spacing for grouping glass elements
   - `BlurSwitch` - Beautiful blur switch button using QmBlurView (Android)
   - `Vibrancy View`- Beautiful Vibrancy view for iOS (iOS only)
- 
+
 - �🌊 **Liquid Glass Effects**: Revolutionary glass effects using iOS 26+ UIGlassEffect API
 - 🎨 **Multiple Blur Types**: Support for various blur styles including system materials on iOS
 - 📱 **Cross-Platform**: Works on both iOS and Android
@@ -380,6 +380,7 @@ function GradientBlurComponent() {
 ```
 
 Tips:
+
 - `startOffset` shifts where the blur plateau begins; 0 = longest body, higher = shorter.
 - `blurAmount` controls peak intensity; center direction balances strength per platform.
 - Works on iOS and Android with matching props.
@@ -625,7 +626,7 @@ All props are optional and have sensible defaults.
 | ---------------------------------- | ------------ | ----------- | ----------------------------------------------------------------------------- |
 | `blurType`                         | `BlurType`   | `'xlight'`  | The type of blur effect to apply                                              |
 | `blurAmount`                       | `number`     | `10.0`      | The intensity of the blur effect (0-100)                                      |
-| `ignoreSafeArea`                   | `boolean`    | `true`     | (iOS only) Controls whether the blur effect should ignore all safe area edges |
+| `ignoreSafeArea`                   | `boolean`    | `true`      | (iOS only) Controls whether the blur effect should ignore all safe area edges |
 | `reducedTransparencyFallbackColor` | `string`     | `'#FFFFFF'` | Fallback color when reduced transparency is enabled                           |
 | `overlayColor`                     | `ColorValue` | `undefined` | The overlay color to apply on top of the blur effect                          |
 | `style`                            | `ViewStyle`  | `undefined` | Style object for the blur view                                                |
@@ -635,27 +636,27 @@ All props are optional and have sensible defaults.
 
 All props are optional and have sensible defaults.
 
-| Prop         | Type         | Default     | Description                                     |
-| ------------ | ------------ | ----------- | ----------------------------------------------- |
-| `blurType`   | `BlurType`   | `'xlight'`  | The type of blur/vibrancy effect to apply       |
-| `blurAmount` | `number`     | `10.0`      | The intensity of the blur effect (0-100)        |
-| `style`      | `ViewStyle`  | `undefined` | Style object for the vibrancy view              |
-| `children`   | `ReactNode`  | `undefined` | Child components to render inside the vibrancy view |
+| Prop         | Type        | Default     | Description                                         |
+| ------------ | ----------- | ----------- | --------------------------------------------------- |
+| `blurType`   | `BlurType`  | `'xlight'`  | The type of blur/vibrancy effect to apply           |
+| `blurAmount` | `number`    | `10.0`      | The intensity of the blur effect (0-100)            |
+| `style`      | `ViewStyle` | `undefined` | Style object for the vibrancy view                  |
+| `children`   | `ReactNode` | `undefined` | Child components to render inside the vibrancy view |
 
 ### ProgressiveBlurView Props
 
 All props are optional and have sensible defaults.
 
-| Prop                               | Type                                                 | Default                   | Description                                          |
-| ---------------------------------- | ---------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
-| `blurType`                         | `BlurType`                                           | `'regular'`               | The type of blur effect to apply                     |
-| `blurAmount`                       | `number`                                             | `20.0`                    | Maximum blur radius in pixels                        |
+| Prop                               | Type                                                                                     | Default                   | Description                                          |
+| ---------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
+| `blurType`                         | `BlurType`                                                                               | `'regular'`               | The type of blur effect to apply                     |
+| `blurAmount`                       | `number`                                                                                 | `20.0`                    | Maximum blur radius in pixels                        |
 | `direction`                        | `'blurredTopClearBottom' \| 'blurredBottomClearTop' \| 'blurredCenterClearTopAndBottom'` | `'blurredTopClearBottom'` | Direction of the blur gradient                       |
-| `startOffset`                      | `number`                                             | `0.0`                     | Where the gradient starts (0.0 to 1.0)               |
-| `reducedTransparencyFallbackColor` | `string`                                             | `'#FFFFFF'`               | Fallback color when reduced transparency is enabled  |
-| `overlayColor`                     | `ColorValue`                                         | `undefined`               | The overlay color to apply on top of the blur effect |
-| `style`                            | `ViewStyle`                                          | `undefined`               | Style object for the blur view                       |
-| `children`                         | `ReactNode`                                          | `undefined`               | Child components to render inside the blur view      |
+| `startOffset`                      | `number`                                                                                 | `0.0`                     | Where the gradient starts (0.0 to 1.0)               |
+| `reducedTransparencyFallbackColor` | `string`                                                                                 | `'#FFFFFF'`               | Fallback color when reduced transparency is enabled  |
+| `overlayColor`                     | `ColorValue`                                                                             | `undefined`               | The overlay color to apply on top of the blur effect |
+| `style`                            | `ViewStyle`                                                                              | `undefined`               | Style object for the blur view                       |
+| `children`                         | `ReactNode`                                                                              | `undefined`               | Child components to render inside the blur view      |
 
 > **Platform Note**: `ProgressiveBlurView` works on both **iOS** and **Android**.
 >
@@ -672,7 +673,7 @@ All props are optional and have sensible defaults.
 | `glassTintColor`                   | `string`    | `'clear'`   | The tint color for glass effect. Accepts hex colors or color names                         |
 | `glassOpacity`                     | `number`    | `1.0`       | The opacity of glass effect (0-1)                                                          |
 | `isInteractive`                    | `boolean`   | `true`      | (iOS 26+ only) Controls whether the liquid glass effect is interactive and reacts to touch |
-| `ignoreSafeArea`                   | `boolean`   | `true`     | (iOS only) Controls whether the glass effect should ignore all safe area edges             |
+| `ignoreSafeArea`                   | `boolean`   | `true`      | (iOS only) Controls whether the glass effect should ignore all safe area edges             |
 | `reducedTransparencyFallbackColor` | `string`    | `'#FFFFFF'` | Fallback color when reduced transparency is enabled or on older iOS versions               |
 | `style`                            | `ViewStyle` | `undefined` | Style object for the glass view                                                            |
 | `children`                         | `ReactNode` | `undefined` | Child components to render inside the glass view                                           |
@@ -691,15 +692,15 @@ All props are optional and have sensible defaults.
 
 All props are optional and have sensible defaults.
 
-| Prop           | Type                                      | Default                                   | Description                                                                                                                    |
-| -------------- | ----------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| `value`        | `boolean`                                 | `false`                                   | The current value of the switch                                                                                                |
-| `onValueChange`| `(value: boolean) => void`                | `undefined`                               | Callback invoked when the switch value changes                                                                                 |
-| `blurAmount`   | `number`                                  | `10`                                      | (Android only) The intensity of the blur effect (0-100)                                                                        |
-| `thumbColor`   | `ColorValue`                              | `'#FFFFFF'`                               | (iOS only) The color of the switch thumb                                                                                       |
-| `trackColor`   | `{ false?: ColorValue; true?: ColorValue }`| `{ false: '#E5E5EA', true: '#34C759' }`  | Track colors. On Android, only `true` is used - QmBlurView auto-calculates on/off colors from base color                      |
-| `disabled`     | `boolean`                                 | `false`                                   | Whether the switch is disabled (prevents interaction but maintains current value)                                              |
-| `style`        | `ViewStyle`                               | `undefined`                               | Style object for the switch view                                                                                               |
+| Prop            | Type                                        | Default                                 | Description                                                                                              |
+| --------------- | ------------------------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| `value`         | `boolean`                                   | `false`                                 | The current value of the switch                                                                          |
+| `onValueChange` | `(value: boolean) => void`                  | `undefined`                             | Callback invoked when the switch value changes                                                           |
+| `blurAmount`    | `number`                                    | `10`                                    | (Android only) The intensity of the blur effect (0-100)                                                  |
+| `thumbColor`    | `ColorValue`                                | `'#FFFFFF'`                             | (iOS only) The color of the switch thumb                                                                 |
+| `trackColor`    | `{ false?: ColorValue; true?: ColorValue }` | `{ false: '#E5E5EA', true: '#34C759' }` | Track colors. On Android, only `true` is used - QmBlurView auto-calculates on/off colors from base color |
+| `disabled`      | `boolean`                                   | `false`                                 | Whether the switch is disabled (prevents interaction but maintains current value)                        |
+| `style`         | `ViewStyle`                                 | `undefined`                             | Style object for the switch view                                                                         |
 
 > **Note**: The `BlurType` and `GlassType` are exported types from the library. See [Blur Types](#blur-types) and [Glass Types](#glass-types) sections below for all available values.
 
@@ -773,7 +774,7 @@ The component uses the QmBlurView library to provide real blur effects with hard
 
 #### L+ssibility
 
-All components automatically respect the "Reduce Transparency" accessibility setting:
+All components automatically respect the "Reduce Transparency" accessibility setting. The `reducedTransparencyFallbackColor` property accepts hexadecimal colors and named colors: `black`, `blue`, `brown`, `clear`, `cyan`, `magenta`, `gray`, `green`, `orange`, `purple`, `red`, `transparent`, `white` and `yellow`.
 
 ### BlurView
 
@@ -790,7 +791,7 @@ All components automatically respect the "Reduce Transparency" accessibility set
 - **iOS 26+**: When reduce transparency is enabled, falls back to regular View
 - **iOS < 26 & Android**: Always renders as regular View
 
-You can customize the fallback color using the `reducedTransparencyFallbackColor` prop on `BlurView` and `LiquidGlassView` components.
+You can customize the fallback color using the `reducedTransparencyFallbackColor` prop on `BlurView`, `ProgressiveBlurView`, and `LiquidGlassView` components.
 
 ## TypeScript Support
 

package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt

@@ -107,15 +107,12 @@ class ReactNativeBlurView : BlurViewGroup {
 
     if (isBlurInitialized) return
 
-    // Defer the blur root swap to next frame so the view tree is fully mounted
-    val runnable = Runnable {
-      initRunnable = null
-      if (isBlurInitialized) return@Runnable
-      swapBlurRootToScreenAncestor()
-      initializeBlur()
-    }
-    initRunnable = runnable
-    post(runnable)
+    // Immediately try to swap blur root and initialize.
+    // We avoid posting a runnable to prevent the 1-second delay artifact.
+    // If the parent hierarchy is not ready yet (unlikely in onAttachedToWindow),
+    // we could fall back to post, but for now we prioritize immediate execution.
+    swapBlurRootToScreenAncestor()
+    initializeBlur()
   }
 
   /**

package/ios/ReactNativeBlurView.mm

@@ -37,17 +37,20 @@ using namespace facebook::react;
 
   // Handle common color names
   NSDictionary *colorMap = @{
-    @"red": [UIColor redColor],
+    @"black": [UIColor blackColor],
     @"blue": [UIColor blueColor],
+    @"brown": [UIColor brownColor],
+    @"clear": [UIColor clearColor],
+    @"cyan": [UIColor cyanColor],
+    @"magenta": [UIColor magentaColor],
+    @"gray": [UIColor grayColor],
     @"green": [UIColor greenColor],
-    @"yellow": [UIColor yellowColor],
     @"orange": [UIColor orangeColor],
     @"purple": [UIColor purpleColor],
-    @"black": [UIColor blackColor],
+    @"red": [UIColor redColor],
+    @"transparent": [UIColor clearColor],
     @"white": [UIColor whiteColor],
-    @"gray": [UIColor grayColor],
-    @"clear": [UIColor clearColor],
-    @"transparent": [UIColor clearColor]
+    @"yellow": [UIColor yellowColor],
   };
 
   UIColor *namedColor = colorMap[colorString.lowercaseString];
@@ -95,6 +98,20 @@ using namespace facebook::react;
                              alpha:(hexValue & 0x000000FF) / 255.0];
     }
   }
+  // Handle 4-character hex (RGBA shorthand)
+  else if (hexString.length == 4) {
+    unsigned int hexValue;
+    NSScanner *scanner = [NSScanner scannerWithString:hexString];
+    if ([scanner scanHexInt:&hexValue] && [scanner isAtEnd]) {
+      // Expand 4-digit hex to 8-digit (e.g., "FFF0" -> "FFFFFF00")
+      unsigned int r = (hexValue & 0xF000) >> 12;
+      unsigned int g = (hexValue & 0x0F00) >> 8;
+      unsigned int b = (hexValue & 0x00F0) >> 4;
+      unsigned int a = (hexValue & 0x000F);
+
+      return [UIColor colorWithRed:(r | (r << 4)) / 255.0 green:(g | (g << 4)) / 255.0 blue:(b | (b << 4)) / 255.0 alpha:(a | (a << 4)) / 255.0];
+    }
+  }
   // Handle 3-character hex (RGB shorthand)
   else if (hexString.length == 3) {
     unsigned int hexValue;
@@ -112,7 +129,7 @@ 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, 4, 6, or 8 characters",
           (unsigned long)hexString.length, colorString);
   }
 

package/ios/ReactNativeBlurViewManager.mm

@@ -66,17 +66,20 @@ RCT_CUSTOM_VIEW_PROPERTY(ignoreSafeArea, BOOL, AdvancedBlurView)
 
   // Handle common color names
   NSDictionary *colorMap = @{
-    @"red": [UIColor redColor],
+    @"black": [UIColor blackColor],
     @"blue": [UIColor blueColor],
+    @"brown": [UIColor brownColor],
+    @"clear": [UIColor clearColor],
+    @"cyan": [UIColor cyanColor],
+    @"magenta": [UIColor magentaColor],
+    @"gray": [UIColor grayColor],
     @"green": [UIColor greenColor],
-    @"yellow": [UIColor yellowColor],
     @"orange": [UIColor orangeColor],
     @"purple": [UIColor purpleColor],
-    @"black": [UIColor blackColor],
+    @"red": [UIColor redColor],
+    @"transparent": [UIColor clearColor],
     @"white": [UIColor whiteColor],
-    @"gray": [UIColor grayColor],
-    @"clear": [UIColor clearColor],
-    @"transparent": [UIColor clearColor]
+    @"yellow": [UIColor yellowColor],
   };
 
   UIColor *namedColor = colorMap[colorString.lowercaseString];
@@ -124,6 +127,20 @@ RCT_CUSTOM_VIEW_PROPERTY(ignoreSafeArea, BOOL, AdvancedBlurView)
                              alpha:(hexValue & 0x000000FF) / 255.0];
     }
   }
+  // Handle 4-character hex (RGBA shorthand)
+  else if (hexString.length == 4) {
+    unsigned int hexValue;
+    NSScanner *scanner = [NSScanner scannerWithString:hexString];
+    if ([scanner scanHexInt:&hexValue] && [scanner isAtEnd]) {
+      // Expand 4-digit hex to 8-digit (e.g., "FFF0" -> "FFFFFF00")
+      unsigned int r = (hexValue & 0xF000) >> 12;
+      unsigned int g = (hexValue & 0x0F00) >> 8;
+      unsigned int b = (hexValue & 0x00F0) >> 4;
+      unsigned int a = (hexValue & 0x000F);
+
+      return [UIColor colorWithRed:(r | (r << 4)) / 255.0 green:(g | (g << 4)) / 255.0 blue:(b | (b << 4)) / 255.0 alpha:(a | (a << 4)) / 255.0];
+    }
+  }
   // Handle 3-character hex (RGB shorthand)
   else if (hexString.length == 3) {
     unsigned int hexValue;
@@ -141,7 +158,7 @@ RCT_CUSTOM_VIEW_PROPERTY(ignoreSafeArea, BOOL, AdvancedBlurView)
     }
   }
   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, 4, 6, or 8 characters",
           (unsigned long)hexString.length, colorString);
   }
 

package/ios/ReactNativeLiquidGlassView.mm

@@ -38,17 +38,20 @@ using namespace facebook::react;
 
   // Handle common color names
   NSDictionary *colorMap = @{
-    @"red": [UIColor redColor],
+    @"black": [UIColor blackColor],
     @"blue": [UIColor blueColor],
+    @"brown": [UIColor brownColor],
+    @"clear": [UIColor clearColor],
+    @"cyan": [UIColor cyanColor],
+    @"magenta": [UIColor magentaColor],
+    @"gray": [UIColor grayColor],
     @"green": [UIColor greenColor],
-    @"yellow": [UIColor yellowColor],
     @"orange": [UIColor orangeColor],
     @"purple": [UIColor purpleColor],
-    @"black": [UIColor blackColor],
+    @"red": [UIColor redColor],
+    @"transparent": [UIColor clearColor],
     @"white": [UIColor whiteColor],
-    @"gray": [UIColor grayColor],
-    @"clear": [UIColor clearColor],
-    @"transparent": [UIColor clearColor]
+    @"yellow": [UIColor yellowColor],
   };
 
   UIColor *namedColor = colorMap[colorString.lowercaseString];
@@ -96,6 +99,20 @@ using namespace facebook::react;
                              alpha:(hexValue & 0x000000FF) / 255.0];
     }
   }
+  // Handle 4-character hex (RGBA shorthand)
+  else if (hexString.length == 4) {
+    unsigned int hexValue;
+    NSScanner *scanner = [NSScanner scannerWithString:hexString];
+    if ([scanner scanHexInt:&hexValue] && [scanner isAtEnd]) {
+      // Expand 4-digit hex to 8-digit (e.g., "FFF0" -> "FFFFFF00")
+      unsigned int r = (hexValue & 0xF000) >> 12;
+      unsigned int g = (hexValue & 0x0F00) >> 8;
+      unsigned int b = (hexValue & 0x00F0) >> 4;
+      unsigned int a = (hexValue & 0x000F);
+
+      return [UIColor colorWithRed:(r | (r << 4)) / 255.0 green:(g | (g << 4)) / 255.0 blue:(b | (b << 4)) / 255.0 alpha:(a | (a << 4)) / 255.0];
+    }
+  }
   // Handle 3-character hex (RGB shorthand)
   else if (hexString.length == 3) {
     unsigned int hexValue;
@@ -113,7 +130,7 @@ using namespace facebook::react;
     }
   }
   else {
-    NSLog(@"[ReactNativeLiquidGlassView] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 6, or 8 characters",
+    NSLog(@"[ReactNativeLiquidGlassView] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 4, 6, or 8 characters",
           (unsigned long)hexString.length, colorString);
   }
 
@@ -223,15 +240,15 @@ using namespace facebook::react;
 - (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];
     }
@@ -242,11 +259,11 @@ using namespace facebook::react;
 {
   [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;
-  
+
   // On iOS 26+, don't clip bounds to allow interactive glass animations to be visible
   // The glass effect view handles its own clipping via cornerConfiguration
   if (@available(iOS 26.0, *)) {

package/ios/ReactNativeProgressiveBlurView.mm

@@ -36,17 +36,20 @@ using namespace facebook::react;
 
   // Handle common color names
   NSDictionary *colorMap = @{
-    @"red": [UIColor redColor],
+    @"black": [UIColor blackColor],
     @"blue": [UIColor blueColor],
+    @"brown": [UIColor brownColor],
+    @"clear": [UIColor clearColor],
+    @"cyan": [UIColor cyanColor],
+    @"magenta": [UIColor magentaColor],
+    @"gray": [UIColor grayColor],
     @"green": [UIColor greenColor],
-    @"yellow": [UIColor yellowColor],
     @"orange": [UIColor orangeColor],
     @"purple": [UIColor purpleColor],
-    @"black": [UIColor blackColor],
+    @"red": [UIColor redColor],
+    @"transparent": [UIColor clearColor],
     @"white": [UIColor whiteColor],
-    @"gray": [UIColor grayColor],
-    @"clear": [UIColor clearColor],
-    @"transparent": [UIColor clearColor]
+    @"yellow": [UIColor yellowColor],
   };
 
   UIColor *namedColor = colorMap[colorString.lowercaseString];
@@ -71,6 +74,7 @@ using namespace facebook::react;
     return [UIColor clearColor];
   }
 
+  // Handle 6-character hex (RGB)
   if (hexString.length == 6) {
     unsigned int hexValue;
     NSScanner *scanner = [NSScanner scannerWithString:hexString];
@@ -80,7 +84,9 @@ using namespace facebook::react;
                               blue:(hexValue & 0x0000FF) / 255.0
                              alpha:1.0];
     }
-  } else if (hexString.length == 8) {
+  }
+  // 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]) {
@@ -89,7 +95,23 @@ using namespace facebook::react;
                               blue:((hexValue & 0x0000FF00) >> 8) / 255.0
                              alpha:(hexValue & 0x000000FF) / 255.0];
     }
-  } else if (hexString.length == 3) {
+  }
+  // Handle 4-character hex (RGBA shorthand)
+  else if (hexString.length == 4) {
+    unsigned int hexValue;
+    NSScanner *scanner = [NSScanner scannerWithString:hexString];
+    if ([scanner scanHexInt:&hexValue] && [scanner isAtEnd]) {
+      // Expand 4-digit hex to 8-digit (e.g., "FFF0" -> "FFFFFF00")
+      unsigned int r = (hexValue & 0xF000) >> 12;
+      unsigned int g = (hexValue & 0x0F00) >> 8;
+      unsigned int b = (hexValue & 0x00F0) >> 4;
+      unsigned int a = (hexValue & 0x000F);
+
+      return [UIColor colorWithRed:(r | (r << 4)) / 255.0 green:(g | (g << 4)) / 255.0 blue:(b | (b << 4)) / 255.0 alpha:(a | (a << 4)) / 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]) {
@@ -101,6 +123,9 @@ using namespace facebook::react;
                               blue:(b | (b << 4)) / 255.0
                              alpha:1.0];
     }
+  } else {
+    NSLog(@"[ReactNativeProgressiveBlurView] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 4, 6, or 8 characters",
+          (unsigned long)hexString.length, colorString);
   }
 
   NSLog(@"[ReactNativeProgressiveBlurView] Warning: Could not parse color '%@'", colorString);

package/ios/ReactNativeProgressiveBlurViewManager.mm

@@ -67,17 +67,20 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, Progressive
   }
 
   NSDictionary *colorMap = @{
-    @"red": [UIColor redColor],
+    @"black": [UIColor blackColor],
     @"blue": [UIColor blueColor],
+    @"brown": [UIColor brownColor],
+    @"clear": [UIColor clearColor],
+    @"cyan": [UIColor cyanColor],
+    @"magenta": [UIColor magentaColor],
+    @"gray": [UIColor grayColor],
     @"green": [UIColor greenColor],
-    @"yellow": [UIColor yellowColor],
     @"orange": [UIColor orangeColor],
     @"purple": [UIColor purpleColor],
-    @"black": [UIColor blackColor],
+    @"red": [UIColor redColor],
+    @"transparent": [UIColor clearColor],
     @"white": [UIColor whiteColor],
-    @"gray": [UIColor grayColor],
-    @"clear": [UIColor clearColor],
-    @"transparent": [UIColor clearColor]
+    @"yellow": [UIColor yellowColor],
   };
 
   UIColor *namedColor = colorMap[colorString.lowercaseString];
@@ -99,6 +102,7 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, Progressive
     return [UIColor clearColor];
   }
 
+  // Handle 6-character hex (RGB)
   if (hexString.length == 6) {
     unsigned int hexValue;
     NSScanner *scanner = [NSScanner scannerWithString:hexString];
@@ -108,7 +112,9 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, Progressive
                               blue:(hexValue & 0x0000FF) / 255.0
                              alpha:1.0];
     }
-  } else if (hexString.length == 8) {
+  }
+  // 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]) {
@@ -117,7 +123,23 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, Progressive
                               blue:((hexValue & 0x0000FF00) >> 8) / 255.0
                              alpha:(hexValue & 0x000000FF) / 255.0];
     }
-  } else if (hexString.length == 3) {
+  }
+  // Handle 4-character hex (RGBA shorthand)
+  else if (hexString.length == 4) {
+    unsigned int hexValue;
+    NSScanner *scanner = [NSScanner scannerWithString:hexString];
+    if ([scanner scanHexInt:&hexValue] && [scanner isAtEnd]) {
+      // Expand 4-digit hex to 8-digit (e.g., "FFF0" -> "FFFFFF00")
+      unsigned int r = (hexValue & 0xF000) >> 12;
+      unsigned int g = (hexValue & 0x0F00) >> 8;
+      unsigned int b = (hexValue & 0x00F0) >> 4;
+      unsigned int a = (hexValue & 0x000F);
+
+      return [UIColor colorWithRed:(r | (r << 4)) / 255.0 green:(g | (g << 4)) / 255.0 blue:(b | (b << 4)) / 255.0 alpha:(a | (a << 4)) / 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]) {
@@ -129,6 +151,9 @@ RCT_CUSTOM_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString, Progressive
                               blue:(b | (b << 4)) / 255.0
                              alpha:1.0];
     }
+  } else {
+    NSLog(@"[ReactNativeProgressiveBlurView] Warning: Unsupported hex color length (%lu) for '%@', expected 3, 4, 6, or 8 characters",
+          (unsigned long)hexString.length, colorString);
   }
 
   return [UIColor clearColor];

package/ios/Views/AdvancedBlurView.swift

@@ -68,7 +68,14 @@ import UIKit
     hosting.view.backgroundColor = .clear
     hosting.view.translatesAutoresizingMaskIntoConstraints = false
 
-    addSubview(hosting.view)
+    // Insert at index 0 to ensure it stays behind any potential subviews (though usually this view has no children)
+    // This fixes the z-ordering bug where blur covers content
+    if !subviews.isEmpty {
+        insertSubview(hosting.view, at: 0)
+    } else {
+        addSubview(hosting.view)
+    }
+    
     NSLayoutConstraint.activate([
       hosting.view.topAnchor.constraint(equalTo: topAnchor),
       hosting.view.leadingAnchor.constraint(equalTo: leadingAnchor),
@@ -80,8 +87,20 @@ import UIKit
   }
 
   private func updateView() {
-    if hostingController != nil {
-      setupHostingController()
+    if let hosting = hostingController {
+        // Update the existing controller's root view to avoid expensive recreation
+        // This fixes performance bottlenecks and state synchronization issues
+        let blurStyle = blurStyleFromString(blurTypeString)
+        let swiftUIView = BasicColoredView(
+          blurAmount: blurAmount,
+          blurStyle: blurStyle,
+          ignoreSafeArea: ignoreSafeArea,
+          reducedTransparencyFallbackColor: reducedTransparencyFallbackColor
+        )
+        hosting.rootView = swiftUIView
+        hosting.view.setNeedsLayout()
+    } else {
+        setupHostingController()
     }
   }
 

package/lib/module/BlurView.js

@@ -74,10 +74,7 @@ export const BlurView = ({
       style: StyleSheet.absoluteFill,
       ...commonProps,
       ...props
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.children,
-      children: children
-    })]
+    }), children]
   });
 };
 export default BlurView;
@@ -85,10 +82,6 @@ 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","Children","Platform","StyleSheet","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","overlayColor","style","children","ignoreSafeArea","props","overlay","backgroundColor","commonProps","count","OS","absoluteFill","styles","container","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEzD,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAuD9C;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,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAG,IAAI;EACrB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEN;EAAa,CAAC;EACjD,MAAMO,WAA0B,GAAG;IACjCV,QAAQ;IACRC,UAAU;IACVK,cAAc;IACdJ;EACF,CAAC;;EAED;EACA,IAAI,CAACZ,QAAQ,CAACqB,KAAK,CAACN,QAAQ,CAAC,EAAE;IAC7B,oBACET,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAE,CAACA,KAAK,EAAEI,OAAO,CAAE;MAAA,GACpBE,WAAW;MAAA,GACXH;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,IAAIhB,QAAQ,CAACqB,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEd,KAAA,CAACJ,mBAAmB;MAACU,KAAK,EAAEA,KAAM;MAAA,GAAKM,WAAW;MAAA,GAAMH,KAAK;MAAAF,QAAA,gBAC3DT,IAAA,CAACH,IAAI;QAACW,KAAK,EAAE,CAACZ,UAAU,CAACqB,YAAY,EAAEL,OAAO;MAAE,CAAE,CAAC,EAElDH,QAAQ;IAAA,CACU,CAAC;EAE1B;;EAEA;EACA,oBACEP,KAAA,CAACL,IAAI;IAACW,KAAK,EAAE,CAACU,MAAM,CAACC,SAAS,EAAEX,KAAK,EAAEI,OAAO,CAAE;IAAAH,QAAA,gBAE9CT,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAEZ,UAAU,CAACqB,YAAa;MAAA,GAC3BH,WAAW;MAAA,GACXH;IAAK,CACV,CAAC,eAEFX,IAAA,CAACH,IAAI;MAACW,KAAK,EAAEU,MAAM,CAACT,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeN,QAAQ;AAEvB,MAAMe,MAAM,GAAGtB,UAAU,CAACwB,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDb,QAAQ,EAAE;IACRY,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Children","Platform","StyleSheet","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","overlayColor","style","children","ignoreSafeArea","props","overlay","backgroundColor","commonProps","count","OS","absoluteFill","styles","container","create","position","overflow"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEzD,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAuD9C;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,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAG,IAAI;EACrB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEN;EAAa,CAAC;EACjD,MAAMO,WAA0B,GAAG;IACjCV,QAAQ;IACRC,UAAU;IACVK,cAAc;IACdJ;EACF,CAAC;;EAED;EACA,IAAI,CAACZ,QAAQ,CAACqB,KAAK,CAACN,QAAQ,CAAC,EAAE;IAC7B,oBACET,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAE,CAACA,KAAK,EAAEI,OAAO,CAAE;MAAA,GACpBE,WAAW;MAAA,GACXH;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,IAAIhB,QAAQ,CAACqB,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEd,KAAA,CAACJ,mBAAmB;MAACU,KAAK,EAAEA,KAAM;MAAA,GAAKM,WAAW;MAAA,GAAMH,KAAK;MAAAF,QAAA,gBAC3DT,IAAA,CAACH,IAAI;QAACW,KAAK,EAAE,CAACZ,UAAU,CAACqB,YAAY,EAAEL,OAAO;MAAE,CAAE,CAAC,EAElDH,QAAQ;IAAA,CACU,CAAC;EAE1B;;EAEA;EACA,oBACEP,KAAA,CAACL,IAAI;IAACW,KAAK,EAAE,CAACU,MAAM,CAACC,SAAS,EAAEX,KAAK,EAAEI,OAAO,CAAE;IAAAH,QAAA,gBAE9CT,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAEZ,UAAU,CAACqB,YAAa;MAAA,GAC3BH,WAAW;MAAA,GACXH;IAAK,CACV,CAAC,EACDF,QAAQ;EAAA,CACL,CAAC;AAEX,CAAC;AAED,eAAeN,QAAQ;AAEvB,MAAMe,MAAM,GAAGtB,UAAU,CAACwB,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

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,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrE,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrE,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbaiahmed1/react-native-blur",
-  "version": "4.5.7",
+  "version": "4.5.8-beta.0",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -32,14 +32,14 @@
     "!**/.*"
   ],
   "scripts": {
+    "example": "yarn workspace @sbaiahmed1/react-native-blur-example-app",
     "test": "jest",
     "typecheck": "tsc",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "clean": "del-cli example/android example/ios lib",
     "prepare": "bob build",
     "release": "release-it",
-    "setup": "yarn && yarn prepare",
-    "setup:example": "yarn setup && cd example && bundle install && cd ios && bundle exec pod install && cd .. && yarn start --client-logs"
+    "setup": "yarn && yarn prepare"
   },
   "keywords": [
     "react-native",
@@ -87,7 +87,7 @@
     "react-native": "0.79.2",
     "react-native-builder-bob": "^0.40.11",
     "release-it": "^19.2.4",
-    "turbo": "^1.10.7",
+    "turbo": "latest",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
@@ -176,4 +176,4 @@
     "type": "fabric-view",
     "version": "0.50.3"
   }
-}
+}

package/src/BlurView.tsx

@@ -129,8 +129,7 @@ export const BlurView: React.FC<BlurViewProps> = ({
         {...commonProps}
         {...props}
       />
-      {/* Content positioned relatively on top when device is not Android */}
-      <View style={styles.children}>{children}</View>
+      {children}
     </View>
   );
 };
@@ -142,8 +141,4 @@ const styles = StyleSheet.create({
     position: 'relative',
     overflow: 'hidden',
   },
-  children: {
-    position: 'relative',
-    zIndex: 1,
-  },
 });