@sbaiahmed1/react-native-blur 4.4.0 → 4.5.0

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
 
@@ -588,6 +594,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.
@@ -700,6 +717,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 +734,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 +765,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 +788,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/build.gradle

@@ -74,7 +74,7 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation 'com.qmdeve.blurview:core:1.0.6'
+  implementation 'com.qmdeve.blurview:core:1.1.1'
 }
 
 react {

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/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/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/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.0",
+  "version": "4.5.0",
   "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/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';