@sbaiahmed1/react-native-blur 4.4.1 → 4.5.1

package/README.md

@@ -1,6 +1,6 @@
 # @sbaiahmed1/react-native-blur
 
-A modern React Native library providing **five specialized components** for advanced visual effects: `BlurView` for native blur effects, `LiquidGlassView` for cutting-edge liquid glass effects on iOS 26+ (with Android fallback to enhanced blur), `LiquidGlassContainer` for iOS 26+ glass container effects with configurable spacing, `ProgressiveBlurView` for smooth, variable blur transitions, and `BlurSwitch` for beautiful blur switch buttons on Android.
+A modern React Native library providing **six specialized components** for advanced visual effects: `BlurView` for native blur effects, `VibrancyView` for iOS vibrancy effects, `LiquidGlassView` for cutting-edge liquid glass effects on iOS 26+ (with Android fallback to enhanced blur), `LiquidGlassContainer` for iOS 26+ glass container effects with configurable spacing, `ProgressiveBlurView` for smooth, variable blur transitions, and `BlurSwitch` for beautiful blur switch buttons on Android.
 
 > **⚠️ Breaking Changes**: If upgrading from 3.x, see [Breaking Changes](#️-breaking-changes-in-v400) section.
 
@@ -28,6 +28,12 @@ A modern React Native library providing **five specialized components** for adva
   <br>
   <em>iOS (left) and Android (right) blur effects in action</em>
   <br>
+  <br>
+  <video src="demos/vibrancy_iOS.mov" width="300" autoplay loop muted playsinline></video>
+  <br>
+  <em>Vibrancy Effect (iOS only)</em>
+  <br>
+  <br>
   <em>Liquid Glass effect in action (iOS 26+ only)</em>
   <br>
   <strong>⚠️ Android automatically falls back to enhanced blur with tint overlay</strong>
@@ -258,7 +264,7 @@ The implementation automatically handles different Android versions:
 
 ## Usage
 
-The library now provides **five specialized components** for different visual effects:
+The library now provides **six specialized components** for different visual effects:
 
 ### BlurView - Standard Blur Effects
 
@@ -341,6 +347,29 @@ function GradientBlurComponent() {
 }
 ```
 
+#### Center Blur (new direction)
+
+`direction="blurredCenterClearTopAndBottom"` creates a long blur body that peaks in the center and fades to clear at both edges.
+
+```tsx
+<ProgressiveBlurView
+  blurType="regular"
+  blurAmount={35}
+  direction="blurredCenterClearTopAndBottom"
+  startOffset={0} // keep 0 for longest blur body; raise toward 0.3 to shorten
+  style={{ height: 220, borderRadius: 16 }}
+>
+  <Text>Clear at top</Text>
+  <Text>Blurred at center</Text>
+  <Text>Clear at bottom</Text>
+</ProgressiveBlurView>
+```
+
+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.
+
 #### Locked Content Example
 
 Perfect for paywall/premium content:
@@ -588,6 +617,17 @@ All props are optional and have sensible defaults.
 | `style`                            | `ViewStyle`  | `undefined` | Style object for the blur view                                                |
 | `children`                         | `ReactNode`  | `undefined` | Child components to render inside the blur view                               |
 
+### VibrancyView Props
+
+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 |
+
 ### ProgressiveBlurView Props
 
 All props are optional and have sensible defaults.
@@ -596,7 +636,7 @@ All props are optional and have sensible defaults.
 | ---------------------------------- | ---------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
 | `blurType`                         | `BlurType`                                           | `'regular'`               | The type of blur effect to apply                     |
 | `blurAmount`                       | `number`                                             | `20.0`                    | Maximum blur radius in pixels                        |
-| `direction`                        | `'blurredTopClearBottom' \| 'blurredBottomClearTop'` | `'blurredTopClearBottom'` | Direction of the blur gradient                       |
+| `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 |
@@ -700,6 +740,11 @@ Both components have been completely rewritten using **SwiftUI** for modern perf
 - **Older iOS**: Graceful fallback to standard blur effects
 - **SwiftUI Integration**: Leverages SwiftUI's declarative UI for better performance and maintainability
 
+#### VibrancyView
+
+- **iOS**: Uses native `UIVibrancyEffect` to create vibrant content that shines through the blur
+- **Integration**: Works seamlessly with `UIVisualEffectView` hierarchies
+
 #### LiquidGlassView
 
 - **iOS 26+**: Uses native `UIGlassEffect` API for true liquid glass effects with customizable tint colors and opacity
@@ -712,11 +757,7 @@ Both components have been completely rewritten using **SwiftUI** for modern perf
 
 The component uses the QmBlurView library to provide real blur effects with hardware acceleration. The implementation supports multiple blur algorithms and gracefully falls back to translucent overlay approximation on devices with limited graphics capabilities.
 
-#### LiquidGlassView
-
-**⚠️ Platform Limitation**: Liquid glass effects are **iOS 26+ exclusive**. On Android, `LiquidGlassView` automatically falls back to `BlurView` with enhanced blur and tint overlay to approximate the visual effect.
-
-## Accessibility
+#### L+ssibility
 
 All components automatically respect the "Reduce Transparency" accessibility setting:
 
@@ -747,14 +788,16 @@ import {
   LiquidGlassView,
   LiquidGlassContainer,
   ProgressiveBlurView,
-  BlurSwitch,
+  BlurView,
+  VibrancySwitch,
   BlurType,
   GlassType,
   BlurViewProps,
   LiquidGlassViewProps,
   LiquidGlassContainerProps,
   ProgressiveBlurViewProps,
-  BlurSwitchProps,
+  BlurViewProps,
+  VibrancySwitchProps,
 } from '@sbaiahmed1/react-native-blur';
 
 // BlurType is exported for type checking
@@ -768,6 +811,11 @@ interface MyBlurComponentProps {
   blurProps: BlurViewProps;
 }
 
+// VibrancyViewProps for vibrancy component props
+interface MyVibrancyComponentProps {
+  vibrancyProps: VibrancyViewProps;
+}
+
 // LiquidGlassViewProps for glass component props
 interface MyGlassComponentProps {
   glassProps: LiquidGlassViewProps;

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

@@ -14,6 +14,7 @@ import android.widget.FrameLayout
 import android.view.View.MeasureSpec
 import com.qmdeve.blurview.widget.BlurView
 import androidx.core.graphics.toColorInt
+import kotlin.math.max
 
 /**
  * Android implementation of React Native ProgressiveBlurView component.
@@ -146,42 +147,74 @@ class ReactNativeProgressiveBlurView : FrameLayout {
     }
 
     try {
-      val (x0, y0, x1, y1) = when (currentDirection) {
-        "bottomToTop" -> {
-          // Blur at bottom, clear at top
-          // point0 (TRANSPARENT/clear) at top, point1 (WHITE/blur) at bottom adjusted by offset
-          val offsetPixels = height * currentStartOffset
-          floatArrayOf(0f, 0f, 0f, height - offsetPixels)
+      val gradient = when (currentDirection) {
+        "center" -> {
+          val startEdge = max(currentStartOffset, 0.01f)
+          val endEdge = 1f - startEdge
+          val centerLow = 0.2f + startEdge
+          val centerHigh = 0.8f - startEdge
+
+          LinearGradient(
+            0f,
+            0f,
+            0f,
+            height.toFloat(),
+            intArrayOf(
+              Color.TRANSPARENT,
+              Color.TRANSPARENT,
+              Color.WHITE,
+              Color.WHITE,
+              Color.TRANSPARENT,
+              Color.TRANSPARENT
+            ),
+            floatArrayOf(
+              0f,
+              startEdge,
+              centerLow,
+              centerHigh,
+              endEdge,
+              1f
+            ),
+            Shader.TileMode.CLAMP
+          )
         }
-        "topToBottom" -> {
-          // Blur at top, clear at bottom (default)
-          // point0 (TRANSPARENT/clear) at bottom, point1 (WHITE/blur) at top adjusted by offset
-          val offsetPixels = height * currentStartOffset
-          floatArrayOf(0f, height.toFloat(), 0f, offsetPixels)
+        else -> {
+          val (x0, y0, x1, y1) = when (currentDirection) {
+            "bottomToTop" -> {
+              // Blur at bottom, clear at top
+              // point0 (TRANSPARENT/clear) at top, point1 (WHITE/blur) at bottom adjusted by offset
+              val offsetPixels = height * currentStartOffset
+              floatArrayOf(0f, 0f, 0f, height - offsetPixels)
+            }
+            "topToBottom" -> {
+              // Blur at top, clear at bottom (default)
+              // point0 (TRANSPARENT/clear) at bottom, point1 (WHITE/blur) at top adjusted by offset
+              val offsetPixels = height * currentStartOffset
+              floatArrayOf(0f, height.toFloat(), 0f, offsetPixels)
+            }
+            "leftToRight" -> {
+              val offsetPixels = width * currentStartOffset
+              floatArrayOf(offsetPixels, 0f, width.toFloat(), 0f)
+            }
+            "rightToLeft" -> {
+              val offsetPixels = width * currentStartOffset
+              floatArrayOf(width.toFloat(), 0f, offsetPixels, 0f)
+            }
+            else -> floatArrayOf(0f, 0f, 0f, height.toFloat())
+          }
+
+          LinearGradient(
+            x0, y0, x1, y1,
+            intArrayOf(Color.TRANSPARENT, Color.WHITE),
+            floatArrayOf(0f, 1f),
+            Shader.TileMode.CLAMP
+          )
         }
-        "leftToRight" -> {
-          val offsetPixels = width * currentStartOffset
-          floatArrayOf(offsetPixels, 0f, width.toFloat(), 0f)
-        }
-        "rightToLeft" -> {
-          val offsetPixels = width * currentStartOffset
-          floatArrayOf(width.toFloat(), 0f, offsetPixels, 0f)
-        }
-        else -> floatArrayOf(0f, 0f, 0f, height.toFloat())
       }
 
-      // Create gradient: fully transparent -> fully opaque
-      // This masks the blur: opaque = blur visible, transparent = blur hidden (clear)
-      val gradient = LinearGradient(
-        x0, y0, x1, y1,
-        intArrayOf(Color.TRANSPARENT, Color.WHITE),
-        floatArrayOf(0f, 1f),
-        Shader.TileMode.CLAMP
-      )
-
       gradientPaint.shader = gradient
 
-      logDebug("Updated gradient: direction=$currentDirection, start=($x0,$y0), end=($x1,$y1), offset=$currentStartOffset")
+      logDebug("Updated gradient: direction=$currentDirection, offset=$currentStartOffset")
       invalidate()
 
     } catch (e: Exception) {
@@ -232,8 +265,13 @@ class ReactNativeProgressiveBlurView : FrameLayout {
    * @param amount The blur amount value (0-100), will be mapped to Android's 0-25 radius range
    */
   fun setBlurAmount(amount: Float) {
-    currentBlurRadius = mapBlurAmountToRadius(amount)
-    logDebug("setBlurAmount: $amount -> $currentBlurRadius")
+    var radius = mapBlurAmountToRadius(amount)
+    if (currentDirection == "center") {
+      // Center direction tends to look stronger; scale it down for parity with iOS
+      radius *= 0.35f
+    }
+    currentBlurRadius = radius
+    logDebug("setBlurAmount: $amount -> $currentBlurRadius (direction=$currentDirection)")
 
     try {
       blurView?.setBlurRadius(currentBlurRadius)
@@ -251,8 +289,9 @@ class ReactNativeProgressiveBlurView : FrameLayout {
     currentDirection = when (direction.lowercase()) {
       "blurredbottomcleartop", "bottomtotop", "bottom" -> "bottomToTop"
       "blurredtopclearbottom", "toptobottom", "top" -> "topToBottom"
+      "blurredcentercleartopandbottom", "center" -> "center"
       "blurredlefttoclearright", "lefttoright", "left" -> "leftToRight"
-      "blurredrightoclearleft", "righttoleft", "right" -> "rightToLeft"
+      "blurredrighttoclearleft", "righttoleft", "right" -> "rightToLeft"
       else -> {
         logWarning("Unknown direction: $direction, defaulting to topToBottom")
         "topToBottom"

package/ios/Helpers/BlurStyleHelpers.swift

@@ -56,8 +56,9 @@ func blurStyleFromString(_ styleString: String) -> UIBlurEffect.Style {
 }
 
 /// Maps string glass type names to Glass effect values (iOS 26.0+)
+#if compiler(>=6.2)
 @available(iOS 26.0, *)
-func glassEffectFromString(_ glassTypeString: String) -> Glass {
+func glassEffectFromString(_ glassTypeString: String) -> UIGlassEffect.Style {
   switch glassTypeString {
   case "regular":
     return .regular
@@ -67,6 +68,7 @@ func glassEffectFromString(_ glassTypeString: String) -> Glass {
     return .clear
   }
 }
+#endif
 
 // MARK: - Blur Amount Mapping
 

package/ios/Helpers/ReactNativeVibrancyViewHelper.swift

@@ -0,0 +1,22 @@
+import UIKit
+
+@objc public class ReactNativeVibrancyViewHelper: NSObject {
+
+  @objc public static func createVibrancyViewWithFrame(_ frame: CGRect) -> VibrancyEffectView {
+    let view = VibrancyEffectView(effect: nil)
+    view.frame = frame
+    return view
+  }
+
+  @objc public static func updateVibrancyView(_ view: VibrancyEffectView, withBlurType blurType: String) {
+    view.blurType = blurType
+  }
+
+  @objc public static func updateVibrancyView(_ view: VibrancyEffectView, withBlurAmount blurAmount: Double) {
+    view.blurAmount = blurAmount
+  }
+
+  @objc public static func getContentView(_ view: VibrancyEffectView) -> UIView {
+    return view.contentView
+  }
+}

package/ios/ReactNativeVibrancyView.h

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

package/ios/ReactNativeVibrancyView.mm

@@ -0,0 +1,92 @@
+#import "ReactNativeVibrancyView.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 ReactNativeVibrancyView () <RCTReactNativeVibrancyViewViewProtocol>
+@end
+
+@implementation ReactNativeVibrancyView {
+  VibrancyEffectView *_vibrancyView;
+  Props::Shared _props;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<ReactNativeVibrancyViewComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const ReactNativeVibrancyViewProps>();
+    _props = defaultProps;
+    
+    _vibrancyView = [ReactNativeVibrancyViewHelper createVibrancyViewWithFrame:frame];
+    
+    // Initialize props
+    const auto &props = *std::static_pointer_cast<const ReactNativeVibrancyViewProps>(_props);
+    NSString *blurType = [[NSString alloc] initWithUTF8String:toString(props.blurType).c_str()];
+    [ReactNativeVibrancyViewHelper updateVibrancyView:_vibrancyView withBlurType:blurType];
+      
+    [ReactNativeVibrancyViewHelper updateVibrancyView:_vibrancyView withBlurAmount:props.blurAmount];
+    
+    _vibrancyView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    [self addSubview:_vibrancyView];
+  }
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+  const auto &oldViewProps = *std::static_pointer_cast<ReactNativeVibrancyViewProps const>(_props);
+  const auto &newViewProps = *std::static_pointer_cast<ReactNativeVibrancyViewProps const>(props);
+
+  if (oldViewProps.blurType != newViewProps.blurType) {
+    NSString *blurType = [[NSString alloc] initWithUTF8String:toString(newViewProps.blurType).c_str()];
+    [ReactNativeVibrancyViewHelper updateVibrancyView:_vibrancyView withBlurType:blurType];
+  }
+
+  if (oldViewProps.blurAmount != newViewProps.blurAmount) {
+      [ReactNativeVibrancyViewHelper updateVibrancyView:_vibrancyView withBlurAmount:newViewProps.blurAmount];
+  }
+
+  _props = props;
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (void)layoutSubviews
+{
+  [super layoutSubviews];
+  _vibrancyView.frame = self.bounds;
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+    UIView *contentView = [ReactNativeVibrancyViewHelper getContentView:_vibrancyView];
+    [contentView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+    [childComponentView removeFromSuperview];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> ReactNativeVibrancyViewCls(void)
+{
+  return ReactNativeVibrancyView.class;
+}

package/ios/ReactNativeVibrancyViewManager.h

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

package/ios/ReactNativeVibrancyViewManager.mm

@@ -0,0 +1,32 @@
+#import "ReactNativeVibrancyViewManager.h"
+
+#if __has_include("ReactNativeBlur-Swift.h")
+#import "ReactNativeBlur-Swift.h"
+#else
+#import <ReactNativeBlur/ReactNativeBlur-Swift.h>
+#endif
+
+#import <React/RCTUIManager.h>
+
+@implementation ReactNativeVibrancyViewManager
+
+RCT_EXPORT_MODULE(ReactNativeVibrancyView)
+
+- (UIView *)view
+{
+  return [ReactNativeVibrancyViewHelper createVibrancyViewWithFrame:CGRectZero];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(blurType, NSString, VibrancyEffectView)
+{
+  NSString *blurType = json ? [RCTConvert NSString:json] : @"xlight";
+  [ReactNativeVibrancyViewHelper updateVibrancyView:view withBlurType:blurType];
+}
+
+RCT_CUSTOM_VIEW_PROPERTY(blurAmount, NSNumber, VibrancyEffectView)
+{
+    double amount = json ? [RCTConvert double:json] : 10.0;
+    [ReactNativeVibrancyViewHelper updateVibrancyView:view withBlurAmount:amount];
+}
+
+@end

package/ios/Views/LiquidGlassContainerView.swift

@@ -82,6 +82,7 @@ import UIKit
   }
 
   private func updateEffect() {
+    // Check if we can use the new API (iOS 26+)
     if #available(iOS 26.0, *) {
       #if compiler(>=6.2)
       let style: UIGlassEffect.Style = glassType == "regular" ? .regular : .clear
@@ -96,6 +97,9 @@ import UIKit
       currentGlassStyle = glassType
       
       updateBorderRadius()
+      #else
+      // Fallback for older compilers (Xcode < 16.x) even on newer iOS
+      updateFallback()
       #endif
     } else {
       // Fallback for iOS < 26
@@ -104,12 +108,34 @@ import UIKit
   }
 
   private func updateFallback() {
-    if #available(iOS 26.0, *) {
-      // Do nothing if iOS 26+
-    } else {
+    // If reduce transparency is enabled, show solid color
+    if UIAccessibility.isReduceTransparencyEnabled {
       backgroundColor = reducedTransparencyFallbackColor
-      layer.cornerRadius = allBorderRadius
+      glassEffectView?.effect = nil
+    } else {
+      backgroundColor = .clear
+      
+      // Map glass types to blur styles for fallback
+      let style: UIBlurEffect.Style
+      switch glassType {
+      case "regular":
+        style = .systemMaterial
+      case "clear":
+        style = .systemUltraThinMaterial
+      default:
+        style = .regular
+      }
+      
+      let effect = UIBlurEffect(style: style)
+      glassEffectView?.effect = effect
+      
+      // Clear any background color on content view
+      glassEffectView?.contentView.backgroundColor = .clear
     }
+    
+    layer.cornerRadius = allBorderRadius
+    glassEffectView?.layer.cornerRadius = allBorderRadius
+    glassEffectView?.layer.masksToBounds = true
   }
 
   private func updateBorderRadius() {

package/ios/Views/VariableBlurView.swift

@@ -9,11 +9,14 @@ import QuartzCore
 public enum VariableBlurDirection: String {
   case blurredTopClearBottom
   case blurredBottomClearTop
+  case blurredCenterClearTopAndBottom
 
   init(fromString string: String) {
     switch string.lowercased() {
     case "blurredbottomcleartop", "bottomtotop", "bottom":
       self = .blurredBottomClearTop
+    case "blurredcentercleartopandbottom", "center":
+      self = .blurredCenterClearTopAndBottom
     default:
       self = .blurredTopClearBottom
     }
@@ -122,21 +125,144 @@ open class VariableBlurView: UIVisualEffectView {
     startOffset: CGFloat,
     direction: VariableBlurDirection
   ) -> CGImage {
-    // Try smoothLinearGradient for smoother transitions
-    let ciGradientFilter = CIFilter.smoothLinearGradient()
-    ciGradientFilter.color0 = CIColor.black
-    ciGradientFilter.color1 = CIColor.clear
-    ciGradientFilter.point0 = CGPoint(x: 0, y: height)
-    ciGradientFilter.point1 = CGPoint(x: 0, y: startOffset * height)
-
-    if case .blurredBottomClearTop = direction {
-      ciGradientFilter.point0.y = 0
-      ciGradientFilter.point1.y = height - ciGradientFilter.point1.y
+    switch direction {
+    case .blurredCenterClearTopAndBottom:
+      return makeCenterGradientImage(
+        width: width,
+        height: height,
+        edgeOffset: startOffset
+      )
+    case .blurredTopClearBottom, .blurredBottomClearTop:
+      // Try smoothLinearGradient for smoother transitions
+      let ciGradientFilter = CIFilter.smoothLinearGradient()
+      ciGradientFilter.color0 = CIColor.black
+      ciGradientFilter.color1 = CIColor.clear
+      ciGradientFilter.point0 = CGPoint(x: 0, y: height)
+      ciGradientFilter.point1 = CGPoint(x: 0, y: startOffset * height)
+
+      if case .blurredBottomClearTop = direction {
+        ciGradientFilter.point0.y = 0
+        ciGradientFilter.point1.y = height - ciGradientFilter.point1.y
+      }
+
+      guard let output = ciGradientFilter.outputImage else {
+        return makeFallbackMask(width: width, height: height)
+      }
+
+      guard let cg = CIContext().createCGImage(
+        output,
+        from: CGRect(x: 0, y: 0, width: width, height: height)
+      ) else {
+        return makeFallbackMask(width: width, height: height)
+      }
+
+      return cg
     }
+  }
+
+  private func makeCenterGradientImage(
+    width: CGFloat = 100,
+    height: CGFloat = 100,
+    edgeOffset: CGFloat
+  ) -> CGImage {
+    let startEdge = max(min(edgeOffset, 0.2), 0.01)
+    let endEdge = 1 - startEdge
+    let colorSpace = CGColorSpaceCreateDeviceRGB()
 
-    return CIContext().createCGImage(
-      ciGradientFilter.outputImage!,
-      from: CGRect(x: 0, y: 0, width: width, height: height)
+    let centerLow: CGFloat = 0.5
+    let centerHigh: CGFloat = 0.5
+    let locations: [CGFloat] = [
+      0.0,
+      startEdge,
+      centerLow,
+      centerHigh,
+      endEdge,
+      1.0
+    ]
+
+    let colorComponents: [CGFloat] = [
+      0, 0, 0, 0, // top clear
+      0, 0, 0, 0, // clear until offset
+      0, 0, 0, 1, // ramp up to opaque
+      0, 0, 0, 1, // hold opaque plateau
+      0, 0, 0, 0, // back to clear
+      0, 0, 0, 0  // bottom clear
+    ]
+
+    let context = CGContext(
+      data: nil,
+      width: Int(width),
+      height: Int(height),
+      bitsPerComponent: 8,
+      bytesPerRow: 0,
+      space: colorSpace,
+      bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue
     )!
+
+    guard let gradient = CGGradient(
+      colorSpace: colorSpace,
+      colorComponents: colorComponents,
+      locations: locations,
+      count: locations.count
+    ) else {
+      return makeFallbackMask(width: width, height: height)
+    }
+
+    context.drawLinearGradient(
+      gradient,
+      start: CGPoint(x: 0, y: 0),
+      end: CGPoint(x: 0, y: height),
+      options: []
+    )
+
+    return context.makeImage() ?? makeFallbackMask(width: width, height: height)
+  }
+
+  private func makeFallbackMask(width: CGFloat, height: CGFloat) -> CGImage {
+    let fallback = CIFilter.smoothLinearGradient()
+    fallback.color0 = CIColor.black
+    fallback.color1 = CIColor.clear
+    fallback.point0 = CGPoint(x: 0, y: height)
+    fallback.point1 = CGPoint(x: 0, y: height / 2)
+
+    if let output = fallback.outputImage,
+       let cg = CIContext().createCGImage(
+         output,
+         from: CGRect(x: 0, y: 0, width: width, height: height)
+       ) {
+      return cg
+    }
+
+    // Last-resort solid mask (fully opaque) to avoid crash loops
+    let colorSpace = CGColorSpaceCreateDeviceGray()
+    let bitmapInfo = CGImageAlphaInfo.none.rawValue
+    guard let context = CGContext(
+      data: nil,
+      width: Int(max(width, 1)),
+      height: Int(max(height, 1)),
+      bitsPerComponent: 8,
+      bytesPerRow: 0,
+      space: colorSpace,
+      bitmapInfo: bitmapInfo
+    ) else {
+      // Should never happen; return a 1x1 opaque pixel
+      return CGImage(
+        width: 1,
+        height: 1,
+        bitsPerComponent: 8,
+        bitsPerPixel: 8,
+        bytesPerRow: 1,
+        space: colorSpace,
+        bitmapInfo: CGBitmapInfo(rawValue: bitmapInfo),
+        provider: CGDataProvider(data: Data([0xFF]) as CFData)!,
+        decode: nil,
+        shouldInterpolate: false,
+        intent: .defaultIntent
+      )!
+    }
+
+    context.setFillColor(CGColor(gray: 0, alpha: 1))
+    context.fill(CGRect(x: 0, y: 0, width: width, height: height))
+    return context.makeImage()!
   }
 }

package/ios/Views/VibrancyEffectView.swift

@@ -0,0 +1,124 @@
+import UIKit
+
+@objc public class VibrancyEffectView: UIView {
+
+  private let blurEffectView = UIVisualEffectView()
+  private let vibrancyEffectView = UIVisualEffectView()
+  private var blurAnimator: UIViewPropertyAnimator?
+
+  @objc public var blurType: String = "xlight" {
+    didSet {
+      updateEffect()
+    }
+  }
+
+  @objc public var blurAmount: Double = 10.0 {
+    didSet {
+      updateEffect()
+    }
+  }
+
+  @objc public var contentView: UIView {
+    return vibrancyEffectView.contentView
+  }
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupViews()
+    updateEffect()
+  }
+
+  public init(effect: UIVisualEffect?) {
+    super.init(frame: .zero)
+    setupViews()
+    updateEffect()
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setupViews()
+    updateEffect()
+  }
+
+  private func setupViews() {
+    // Setup blur view
+    blurEffectView.frame = bounds
+    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+    addSubview(blurEffectView)
+
+    // Setup vibrancy view inside blur view's contentView
+    vibrancyEffectView.frame = blurEffectView.contentView.bounds
+    vibrancyEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+    blurEffectView.contentView.addSubview(vibrancyEffectView)
+  }
+
+  private func updateEffect() {
+    // Clean up existing animator
+    if let animator = blurAnimator {
+      animator.stopAnimation(true)
+      animator.finishAnimation(at: .current)
+    }
+    blurAnimator = nil
+
+    // Reset effects
+    blurEffectView.effect = nil
+    vibrancyEffectView.effect = nil
+
+    let style = styleFromString(blurType)
+    let blurEffect = UIBlurEffect(style: style)
+    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
+
+    // Use animator to control blur intensity
+    blurAnimator = UIViewPropertyAnimator(duration: 1, curve: .linear)
+    blurAnimator?.addAnimations { [weak self] in
+      self?.blurEffectView.effect = blurEffect
+      self?.vibrancyEffectView.effect = vibrancyEffect
+    }
+
+    // Convert blurAmount (0-100) to intensity (0.0-1.0)
+    let intensity = min(max(blurAmount / 100.0, 0.0), 1.0)
+    blurAnimator?.fractionComplete = intensity
+
+    // Stop the animation at the current state
+    DispatchQueue.main.async { [weak self, weak blurAnimator] in
+        // Only stop the animator if it's still the current one
+        guard let self = self, let currentAnimator = self.blurAnimator, currentAnimator === blurAnimator else { return }
+        
+        currentAnimator.stopAnimation(true)
+        currentAnimator.finishAnimation(at: .current)
+    }
+  }
+
+  deinit {
+    guard let animator = blurAnimator, animator.state == .active else { return }
+    animator.stopAnimation(true)
+    animator.finishAnimation(at: .current)
+  }
+    
+    // Helper to parse string to UIBlurEffect.Style
+    private func styleFromString(_ style: String) -> UIBlurEffect.Style {
+        switch style {
+        case "xlight": return .extraLight
+        case "light": return .light
+        case "dark": return .dark
+        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
+        case "systemUltraThinMaterialLight": return .systemUltraThinMaterialLight
+        case "systemThinMaterialLight": return .systemThinMaterialLight
+        case "systemMaterialLight": return .systemMaterialLight
+        case "systemThickMaterialLight": return .systemThickMaterialLight
+        case "systemChromeMaterialLight": return .systemChromeMaterialLight
+        case "systemUltraThinMaterialDark": return .systemUltraThinMaterialDark
+        case "systemThinMaterialDark": return .systemThinMaterialDark
+        case "systemMaterialDark": return .systemMaterialDark
+        case "systemThickMaterialDark": return .systemThickMaterialDark
+        case "systemChromeMaterialDark": return .systemChromeMaterialDark
+        default: return .regular
+        }
+    }
+}

package/lib/module/ProgressiveBlurView.js

@@ -83,10 +83,7 @@ export const ProgressiveBlurView = ({
       reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
       style: StyleSheet.absoluteFill,
       ...props
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.children,
-      children: children
-    })]
+    }), children]
   });
 };
 export default ProgressiveBlurView;
@@ -94,10 +91,6 @@ const styles = StyleSheet.create({
   container: {
     position: 'relative',
     overflow: 'hidden'
-  },
-  children: {
-    position: 'relative',
-    zIndex: 1
   }
 });
 //# sourceMappingURL=ProgressiveBlurView.js.map

package/lib/module/ProgressiveBlurView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Children","StyleSheet","View","ReactNativeProgressiveBlurView","jsx","_jsx","jsxs","_jsxs","ProgressiveBlurView","blurType","blurAmount","direction","startOffset","reducedTransparencyFallbackColor","overlayColor","style","children","props","overlay","backgroundColor","count","styles","container","absoluteFill","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["ProgressiveBlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,OAAOC,8BAA8B,MAG9B,iDAAiD;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAmEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAuD,GAAGA,CAAC;EACtEC,QAAQ,GAAG,SAAS;EACpBC,UAAU,GAAG,EAAE;EACfC,SAAS,GAAG,uBAAuB;EACnCC,WAAW,GAAG,GAAG;EACjBC,gCAAgC,GAAG,SAAS;EAC5CC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEL;EAAa,CAAC;;EAEjD;EACA,IAAI,CAACd,QAAQ,CAACoB,KAAK,CAACJ,QAAQ,CAAC,EAAE;IAC7B,oBACEX,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEE,KAAK,EAAE,CAACA,KAAK,EAAEG,OAAO,CAAE;MAAA,GACpBD;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEV,KAAA,CAACL,IAAI;IAACa,KAAK,EAAE,CAACM,MAAM,CAACC,SAAS,EAAEP,KAAK,EAAEG,OAAO,CAAE;IAAAF,QAAA,gBAE9CX,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEE,KAAK,EAAEd,UAAU,CAACsB,YAAa;MAAA,GAC3BN;IAAK,CACV,CAAC,eAEFZ,IAAA,CAACH,IAAI;MAACa,KAAK,EAAEM,MAAM,CAACL,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeR,mBAAmB;AAElC,MAAMa,MAAM,GAAGpB,UAAU,CAACuB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDV,QAAQ,EAAE;IACRS,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Children","StyleSheet","View","ReactNativeProgressiveBlurView","jsx","_jsx","jsxs","_jsxs","ProgressiveBlurView","blurType","blurAmount","direction","startOffset","reducedTransparencyFallbackColor","overlayColor","style","children","props","overlay","backgroundColor","count","styles","container","absoluteFill","create","position","overflow"],"sourceRoot":"../../src","sources":["ProgressiveBlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,OAAOC,8BAA8B,MAG9B,iDAAiD;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAoEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAuD,GAAGA,CAAC;EACtEC,QAAQ,GAAG,SAAS;EACpBC,UAAU,GAAG,EAAE;EACfC,SAAS,GAAG,uBAAuB;EACnCC,WAAW,GAAG,GAAG;EACjBC,gCAAgC,GAAG,SAAS;EAC5CC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEL;EAAa,CAAC;;EAEjD;EACA,IAAI,CAACd,QAAQ,CAACoB,KAAK,CAACJ,QAAQ,CAAC,EAAE;IAC7B,oBACEX,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEE,KAAK,EAAE,CAACA,KAAK,EAAEG,OAAO,CAAE;MAAA,GACpBD;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEV,KAAA,CAACL,IAAI;IAACa,KAAK,EAAE,CAACM,MAAM,CAACC,SAAS,EAAEP,KAAK,EAAEG,OAAO,CAAE;IAAAF,QAAA,gBAE9CX,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEE,KAAK,EAAEd,UAAU,CAACsB,YAAa;MAAA,GAC3BN;IAAK,CACV,CAAC,EAEDD,QAAQ;EAAA,CACL,CAAC;AAEX,CAAC;AAED,eAAeR,mBAAmB;AAElC,MAAMa,MAAM,GAAGpB,UAAU,CAACuB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/ReactNativeProgressiveBlurViewNativeComponent.ts

@@ -30,7 +30,8 @@ export type BlurType =
 
 export type ProgressiveBlurDirection =
   | 'blurredTopClearBottom'
-  | 'blurredBottomClearTop';
+  | 'blurredBottomClearTop'
+  | 'blurredCenterClearTopAndBottom';
 
 interface NativeProps extends ViewProps {
   blurAmount?: WithDefault<Double, 20.0>;

package/lib/module/ReactNativeVibrancyViewNativeComponent.ts

@@ -0,0 +1,38 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type {
+  WithDefault,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export type BlurType =
+  | 'xlight'
+  | 'light'
+  | 'dark'
+  | 'extraDark'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+
+interface NativeProps extends ViewProps {
+  blurAmount?: WithDefault<Double, 10.0>;
+  blurType?: WithDefault<BlurType, 'xlight'>;
+}
+
+export default codegenNativeComponent<NativeProps>('ReactNativeVibrancyView', {
+  excludedPlatforms: ['android'],
+});

package/lib/module/VibrancyView.js

@@ -0,0 +1,43 @@
+"use strict";
+
+import React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import ReactNativeVibrancyView from './ReactNativeVibrancyViewNativeComponent';
+import BlurView from "./BlurView.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A component that applies a vibrancy effect to its content.
+ *
+ * On iOS, this uses UIVibrancyEffect.
+ * On Android, this falls back to a simple View (or BlurView behavior if implemented).
+ */
+export const VibrancyView = ({
+  blurType = 'xlight',
+  blurAmount = 10,
+  style,
+  children,
+  ...props
+}) => {
+  if (Platform.OS === 'android') {
+    return /*#__PURE__*/_jsx(BlurView, {
+      blurType: blurType,
+      blurAmount: blurAmount,
+      style: style,
+      ...props,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(ReactNativeVibrancyView, {
+    blurType: blurType,
+    blurAmount: blurAmount,
+    style: [styles.container, style],
+    ...props,
+    children: children
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent'
+  }
+});
+//# sourceMappingURL=VibrancyView.js.map

package/lib/module/VibrancyView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","StyleSheet","ReactNativeVibrancyView","BlurView","jsx","_jsx","VibrancyView","blurType","blurAmount","style","children","props","OS","styles","container","create","backgroundColor"],"sourceRoot":"../../src","sources":["VibrancyView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAEnD,OAAOC,uBAAuB,MAEvB,0CAA0C;AACjD,OAAOC,QAAQ,MAAM,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgClC;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAyC,GAAGA,CAAC;EACxDC,QAAQ,GAAG,QAAQ;EACnBC,UAAU,GAAG,EAAE;EACfC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,IAAIX,QAAQ,CAACY,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEP,IAAA,CAACF,QAAQ;MACPI,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,KAAK,EAAEA,KAAM;MAAA,GACTE,KAAK;MAAAD,QAAA,EAERA;IAAQ,CACD,CAAC;EAEf;EACA,oBACEL,IAAA,CAACH,uBAAuB;IACtBK,QAAQ,EAAEA,QAAS;IACnBC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAE,CAACI,MAAM,CAACC,SAAS,EAAEL,KAAK,CAAE;IAAA,GAC7BE,KAAK;IAAAD,QAAA,EAERA;EAAQ,CACc,CAAC;AAE9B,CAAC;AAED,MAAMG,MAAM,GAAGZ,UAAU,CAACc,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,eAAe,EAAE;EACnB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -11,4 +11,6 @@ export { default as ReactNativeLiquidGlassContainer } from './ReactNativeLiquidG
 export { LiquidGlassContainer } from "./LiquidGlassContainer.js";
 export { default as ReactNativeBlurSwitch } from './ReactNativeBlurSwitchNativeComponent';
 export { BlurSwitch } from "./BlurSwitch.js";
+export { default as ReactNativeVibrancyView } from './ReactNativeVibrancyViewNativeComponent';
+export { VibrancyView } from "./VibrancyView.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","ReactNativeBlurView","BlurView","ReactNativeLiquidGlassView","LiquidGlassView","ReactNativeProgressiveBlurView","ProgressiveBlurView","ReactNativeLiquidGlassContainer","LiquidGlassContainer","ReactNativeBlurSwitch","BlurSwitch"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,sCAAsC;AACrF,cAAc,sCAAsC;AAEpD,SAASC,QAAQ,IAAIF,OAAO,EAAEE,QAAQ,QAAQ,eAAY;AAG1D,SAASF,OAAO,IAAIG,0BAA0B,QAAQ,6CAA6C;AAGnG,SAASC,eAAe,QAAQ,sBAAmB;AAGnD,SAASJ,OAAO,IAAIK,8BAA8B,QAAQ,iDAAiD;AAG3G,SAASC,mBAAmB,QAAQ,0BAAuB;AAG3D,SAASN,OAAO,IAAIO,+BAA+B,QAAQ,kDAAkD;AAE7G,SAASC,oBAAoB,QAAQ,2BAAwB;AAG7D,SAASR,OAAO,IAAIS,qBAAqB,QAAQ,wCAAwC;AAGzF,SAASC,UAAU,QAAQ,iBAAc","ignoreList":[]}
+{"version":3,"names":["default","ReactNativeBlurView","BlurView","ReactNativeLiquidGlassView","LiquidGlassView","ReactNativeProgressiveBlurView","ProgressiveBlurView","ReactNativeLiquidGlassContainer","LiquidGlassContainer","ReactNativeBlurSwitch","BlurSwitch","ReactNativeVibrancyView","VibrancyView"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,sCAAsC;AACrF,cAAc,sCAAsC;AAEpD,SAASC,QAAQ,IAAIF,OAAO,EAAEE,QAAQ,QAAQ,eAAY;AAG1D,SAASF,OAAO,IAAIG,0BAA0B,QAAQ,6CAA6C;AAGnG,SAASC,eAAe,QAAQ,sBAAmB;AAGnD,SAASJ,OAAO,IAAIK,8BAA8B,QAAQ,iDAAiD;AAG3G,SAASC,mBAAmB,QAAQ,0BAAuB;AAG3D,SAASN,OAAO,IAAIO,+BAA+B,QAAQ,kDAAkD;AAE7G,SAASC,oBAAoB,QAAQ,2BAAwB;AAG7D,SAASR,OAAO,IAAIS,qBAAqB,QAAQ,wCAAwC;AAGzF,SAASC,UAAU,QAAQ,iBAAc;AAGzC,SAASV,OAAO,IAAIW,uBAAuB,QAAQ,0CAA0C;AAC7F,SAASC,YAAY,QAAQ,mBAAgB","ignoreList":[]}

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

@@ -19,6 +19,7 @@ export interface ProgressiveBlurViewProps {
      * @description The direction of the progressive blur gradient
      * - 'blurredTopClearBottom': Blur starts at top, clear at bottom
      * - 'blurredBottomClearTop': Blur starts at bottom, clear at top
+     * - 'blurredCenterClearTopAndBottom': Blur peaks at center, clear at both edges
      *
      * @default 'blurredTopClearBottom'
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressiveBlurView.d.ts","sourceRoot":"","sources":["../../../src/ProgressiveBlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrE,OAAuC,EACrC,KAAK,QAAQ,EACb,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAEzD,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,wBAAwB,CAAC;IAErC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;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,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA6ClE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ProgressiveBlurView.d.ts","sourceRoot":"","sources":["../../../src/ProgressiveBlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrE,OAAuC,EACrC,KAAK,QAAQ,EACb,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAEzD,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,wBAAwB,CAAC;IAErC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;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,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA6ClE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -1,7 +1,7 @@
 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' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
-export type ProgressiveBlurDirection = 'blurredTopClearBottom' | 'blurredBottomClearTop';
+export type ProgressiveBlurDirection = 'blurredTopClearBottom' | 'blurredBottomClearTop' | 'blurredCenterClearTopAndBottom';
 interface NativeProps extends ViewProps {
     blurAmount?: WithDefault<Double, 20.0>;
     blurType?: WithDefault<BlurType, 'regular'>;

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

@@ -1 +1 @@
-{"version":3,"file":"ReactNativeProgressiveBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeProgressiveBlurViewNativeComponent.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,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,MAAM,MAAM,wBAAwB,GAChC,uBAAuB,GACvB,uBAAuB,CAAC;AAE5B,UAAU,WAAY,SAAQ,SAAS;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,WAAW,CAAC,wBAAwB,EAAE,uBAAuB,CAAC,CAAC;IAC3E,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnE;;AAED,wBAEE"}
+{"version":3,"file":"ReactNativeProgressiveBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeProgressiveBlurViewNativeComponent.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,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,MAAM,MAAM,wBAAwB,GAChC,uBAAuB,GACvB,uBAAuB,GACvB,gCAAgC,CAAC;AAErC,UAAU,WAAY,SAAQ,SAAS;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,WAAW,CAAC,wBAAwB,EAAE,uBAAuB,CAAC,CAAC;IAC3E,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnE;;AAED,wBAEE"}

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

@@ -0,0 +1,10 @@
+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' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
+interface NativeProps extends ViewProps {
+    blurAmount?: WithDefault<Double, 10.0>;
+    blurType?: WithDefault<BlurType, 'xlight'>;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;
+//# sourceMappingURL=ReactNativeVibrancyViewNativeComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeVibrancyViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeVibrancyViewNativeComponent.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,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,UAAU,WAAY,SAAQ,SAAS;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;CAC5C;;AAED,wBAEG"}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { ViewStyle, StyleProp } from 'react-native';
+import { type BlurType } from './ReactNativeVibrancyViewNativeComponent';
+export interface VibrancyViewProps {
+    /**
+     * @description The type of blur effect to apply
+     *
+     * @default 'xlight'
+     */
+    blurType?: BlurType;
+    /**
+     * @description The intensity of the blur effect (0-100)
+     *
+     * @default 10
+     */
+    blurAmount?: number;
+    /**
+     * @description style object for the vibrancy view
+     *
+     * @default undefined
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * @description Child components to render inside the vibrancy view
+     *
+     * @default undefined
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A component that applies a vibrancy effect to its content.
+ *
+ * On iOS, this uses UIVibrancyEffect.
+ * On Android, this falls back to a simple View (or BlurView behavior if implemented).
+ */
+export declare const VibrancyView: React.FC<VibrancyViewProps>;
+//# sourceMappingURL=VibrancyView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VibrancyView.d.ts","sourceRoot":"","sources":["../../../src/VibrancyView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAgC,EAC9B,KAAK,QAAQ,EACd,MAAM,0CAA0C,CAAC;AAGlD,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6BpD,CAAC"}

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

@@ -17,4 +17,7 @@ export { default as ReactNativeBlurSwitch } from './ReactNativeBlurSwitchNativeC
 export type { ValueChangeEvent } from './ReactNativeBlurSwitchNativeComponent';
 export { BlurSwitch } from './BlurSwitch';
 export type { BlurSwitchProps } from './BlurSwitch';
+export { default as ReactNativeVibrancyView } from './ReactNativeVibrancyViewNativeComponent';
+export { VibrancyView } from './VibrancyView';
+export type { VibrancyViewProps } from './VibrancyView';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AACtF,cAAc,sCAAsC,CAAC;AAErD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AACpG,YAAY,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,iDAAiD,CAAC;AAC5G,YAAY,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAEhG,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,kDAAkD,CAAC;AAE9G,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC1F,YAAY,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AACtF,cAAc,sCAAsC,CAAC;AAErD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AACpG,YAAY,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,iDAAiD,CAAC;AAC5G,YAAY,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAEhG,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,kDAAkD,CAAC;AAE9G,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC1F,YAAY,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AAC9F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbaiahmed1/react-native-blur",
-  "version": "4.4.1",
+  "version": "4.5.1",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -166,7 +166,8 @@
         "ReactNativeBlurView": "ReactNativeBlurView",
         "ReactNativeLiquidGlassView": "ReactNativeLiquidGlassView",
         "ReactNativeProgressiveBlurView": "ReactNativeProgressiveBlurView",
-        "ReactNativeLiquidGlassContainer": "ReactNativeLiquidGlassContainer"
+        "ReactNativeLiquidGlassContainer": "ReactNativeLiquidGlassContainer",
+        "ReactNativeVibrancyView": "ReactNativeVibrancyView"
       }
     }
   },

package/src/ProgressiveBlurView.tsx

@@ -26,6 +26,7 @@ export interface ProgressiveBlurViewProps {
    * @description The direction of the progressive blur gradient
    * - 'blurredTopClearBottom': Blur starts at top, clear at bottom
    * - 'blurredBottomClearTop': Blur starts at bottom, clear at top
+   * - 'blurredCenterClearTopAndBottom': Blur peaks at center, clear at both edges
    *
    * @default 'blurredTopClearBottom'
    */
@@ -153,7 +154,7 @@ export const ProgressiveBlurView: React.FC<ProgressiveBlurViewProps> = ({
         {...props}
       />
 
-      <View style={styles.children}>{children}</View>
+      {children}
     </View>
   );
 };
@@ -165,8 +166,4 @@ const styles = StyleSheet.create({
     position: 'relative',
     overflow: 'hidden',
   },
-  children: {
-    position: 'relative',
-    zIndex: 1,
-  },
 });

package/src/ReactNativeProgressiveBlurViewNativeComponent.ts

@@ -30,7 +30,8 @@ export type BlurType =
 
 export type ProgressiveBlurDirection =
   | 'blurredTopClearBottom'
-  | 'blurredBottomClearTop';
+  | 'blurredBottomClearTop'
+  | 'blurredCenterClearTopAndBottom';
 
 interface NativeProps extends ViewProps {
   blurAmount?: WithDefault<Double, 20.0>;

package/src/ReactNativeVibrancyViewNativeComponent.ts

@@ -0,0 +1,38 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type {
+  WithDefault,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export type BlurType =
+  | 'xlight'
+  | 'light'
+  | 'dark'
+  | 'extraDark'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+
+interface NativeProps extends ViewProps {
+  blurAmount?: WithDefault<Double, 10.0>;
+  blurType?: WithDefault<BlurType, 'xlight'>;
+}
+
+export default codegenNativeComponent<NativeProps>('ReactNativeVibrancyView', {
+  excludedPlatforms: ['android'],
+});

package/src/VibrancyView.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
+import ReactNativeVibrancyView, {
+  type BlurType,
+} from './ReactNativeVibrancyViewNativeComponent';
+import BlurView from './BlurView';
+
+export interface VibrancyViewProps {
+  /**
+   * @description The type of blur effect to apply
+   *
+   * @default 'xlight'
+   */
+  blurType?: BlurType;
+
+  /**
+   * @description The intensity of the blur effect (0-100)
+   *
+   * @default 10
+   */
+  blurAmount?: number;
+
+  /**
+   * @description style object for the vibrancy view
+   *
+   * @default undefined
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * @description Child components to render inside the vibrancy view
+   *
+   * @default undefined
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * A component that applies a vibrancy effect to its content.
+ *
+ * On iOS, this uses UIVibrancyEffect.
+ * On Android, this falls back to a simple View (or BlurView behavior if implemented).
+ */
+export const VibrancyView: React.FC<VibrancyViewProps> = ({
+  blurType = 'xlight',
+  blurAmount = 10,
+  style,
+  children,
+  ...props
+}) => {
+  if (Platform.OS === 'android') {
+    return (
+      <BlurView
+        blurType={blurType}
+        blurAmount={blurAmount}
+        style={style}
+        {...props}
+      >
+        {children}
+      </BlurView>
+    );
+  }
+  return (
+    <ReactNativeVibrancyView
+      blurType={blurType}
+      blurAmount={blurAmount}
+      style={[styles.container, style]}
+      {...props}
+    >
+      {children}
+    </ReactNativeVibrancyView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+  },
+});

package/src/index.tsx

@@ -26,3 +26,7 @@ export type { ValueChangeEvent } from './ReactNativeBlurSwitchNativeComponent';
 
 export { BlurSwitch } from './BlurSwitch';
 export type { BlurSwitchProps } from './BlurSwitch';
+
+export { default as ReactNativeVibrancyView } from './ReactNativeVibrancyViewNativeComponent';
+export { VibrancyView } from './VibrancyView';
+export type { VibrancyViewProps } from './VibrancyView';