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

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.h

@@ -14,6 +14,21 @@
 
 namespace facebook::react {
 
+enum class ReactNativeBlurViewType { Blur, LiquidGlass };
+
+static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeBlurViewType &result) {
+  auto string = (std::string)value;
+  if (string == "blur") { result = ReactNativeBlurViewType::Blur; return; }
+  if (string == "liquidGlass") { result = ReactNativeBlurViewType::LiquidGlass; return; }
+  abort();
+}
+
+static inline std::string toString(const ReactNativeBlurViewType &value) {
+  switch (value) {
+    case ReactNativeBlurViewType::Blur: return "blur";
+    case ReactNativeBlurViewType::LiquidGlass: return "liquidGlass";
+  }
+}
 enum class ReactNativeBlurViewBlurType { Xlight, Light, Dark, ExtraDark, Regular, Prominent, SystemUltraThinMaterial, SystemThinMaterial, SystemMaterial, SystemThickMaterial, SystemChromeMaterial };
 
 static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeBlurViewBlurType &result) {
@@ -47,6 +62,21 @@ static inline std::string toString(const ReactNativeBlurViewBlurType &value) {
     case ReactNativeBlurViewBlurType::SystemChromeMaterial: return "systemChromeMaterial";
   }
 }
+enum class ReactNativeBlurViewGlassType { Clear, Regular };
+
+static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeBlurViewGlassType &result) {
+  auto string = (std::string)value;
+  if (string == "clear") { result = ReactNativeBlurViewGlassType::Clear; return; }
+  if (string == "regular") { result = ReactNativeBlurViewGlassType::Regular; return; }
+  abort();
+}
+
+static inline std::string toString(const ReactNativeBlurViewGlassType &value) {
+  switch (value) {
+    case ReactNativeBlurViewGlassType::Clear: return "clear";
+    case ReactNativeBlurViewGlassType::Regular: return "regular";
+  }
+}
 
 class ReactNativeBlurViewProps final : public ViewProps {
  public:
@@ -55,37 +85,47 @@ class ReactNativeBlurViewProps final : public ViewProps {
 
 #pragma mark - Props
 
-  ReactNativeBlurViewBlurType blurType{ReactNativeBlurViewBlurType::Light};
+  std::string glassTintColor{"clear"};
+  double glassOpacity{1.0};
   double blurAmount{10.0};
-  std::string reducedTransparencyFallbackColor{};
+  ReactNativeBlurViewType type{ReactNativeBlurViewType::Blur};
+  ReactNativeBlurViewBlurType blurType{ReactNativeBlurViewBlurType::Xlight};
+  ReactNativeBlurViewGlassType glassType{ReactNativeBlurViewGlassType::Clear};
+  std::string reducedTransparencyFallbackColor{"#FFFFFF"};
+  bool isInteractive{true};
 };
 
-enum class ReactNativeGlassViewGlassType { Clear, Default };
+enum class ReactNativeGlassEffectContainerGlassType { Clear, Regular };
 
-static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeGlassViewGlassType &result) {
+static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeGlassEffectContainerGlassType &result) {
   auto string = (std::string)value;
-  if (string == "clear") { result = ReactNativeGlassViewGlassType::Clear; return; }
-  if (string == "default") { result = ReactNativeGlassViewGlassType::Default; return; }
+  if (string == "clear") { result = ReactNativeGlassEffectContainerGlassType::Clear; return; }
+  if (string == "regular") { result = ReactNativeGlassEffectContainerGlassType::Regular; return; }
   abort();
 }
 
-static inline std::string toString(const ReactNativeGlassViewGlassType &value) {
+static inline std::string toString(const ReactNativeGlassEffectContainerGlassType &value) {
   switch (value) {
-    case ReactNativeGlassViewGlassType::Clear: return "clear";
-    case ReactNativeGlassViewGlassType::Default: return "default";
+    case ReactNativeGlassEffectContainerGlassType::Clear: return "clear";
+    case ReactNativeGlassEffectContainerGlassType::Regular: return "regular";
   }
 }
 
-class ReactNativeGlassViewProps final : public ViewProps {
+class ReactNativeGlassEffectContainerProps final : public ViewProps {
  public:
-  ReactNativeGlassViewProps() = default;
-  ReactNativeGlassViewProps(const PropsParserContext& context, const ReactNativeGlassViewProps &sourceProps, const RawProps &rawProps);
+  ReactNativeGlassEffectContainerProps() = default;
+  ReactNativeGlassEffectContainerProps(const PropsParserContext& context, const ReactNativeGlassEffectContainerProps &sourceProps, const RawProps &rawProps);
 
 #pragma mark - Props
 
-  ReactNativeGlassViewGlassType glassType{ReactNativeGlassViewGlassType::Default};
-  double glassAmount{50.0};
-  std::string reducedTransparencyFallbackColor{};
+  ReactNativeGlassEffectContainerGlassType glassType{ReactNativeGlassEffectContainerGlassType::Clear};
+  std::string glassTintColor{"clear"};
+  double glassOpacity{1.0};
+  bool isInteractive{true};
+  double spacing{8.0};
+  bool enableMorphing{true};
+  int morphingDuration{300};
+  std::string reducedTransparencyFallbackColor{"#FFFFFF"};
 };
 
 } // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.cpp

@@ -13,6 +13,6 @@
 namespace facebook::react {
 
 extern const char ReactNativeBlurViewComponentName[] = "ReactNativeBlurView";
-extern const char ReactNativeGlassViewComponentName[] = "ReactNativeGlassView";
+extern const char ReactNativeGlassEffectContainerComponentName[] = "ReactNativeGlassEffectContainer";
 
 } // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h

@@ -29,15 +29,15 @@ using ReactNativeBlurViewShadowNode = ConcreteViewShadowNode<
     ReactNativeBlurViewEventEmitter,
     ReactNativeBlurViewState>;
 
-JSI_EXPORT extern const char ReactNativeGlassViewComponentName[];
+JSI_EXPORT extern const char ReactNativeGlassEffectContainerComponentName[];
 
 /*
- * `ShadowNode` for <ReactNativeGlassView> component.
+ * `ShadowNode` for <ReactNativeGlassEffectContainer> component.
  */
-using ReactNativeGlassViewShadowNode = ConcreteViewShadowNode<
-    ReactNativeGlassViewComponentName,
-    ReactNativeGlassViewProps,
-    ReactNativeGlassViewEventEmitter,
-    ReactNativeGlassViewState>;
+using ReactNativeGlassEffectContainerShadowNode = ConcreteViewShadowNode<
+    ReactNativeGlassEffectContainerComponentName,
+    ReactNativeGlassEffectContainerProps,
+    ReactNativeGlassEffectContainerEventEmitter,
+    ReactNativeGlassEffectContainerState>;
 
 } // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.h

@@ -26,12 +26,12 @@ public:
 #endif
 };
 
-class ReactNativeGlassViewState {
+class ReactNativeGlassEffectContainerState {
 public:
-  ReactNativeGlassViewState() = default;
+  ReactNativeGlassEffectContainerState() = default;
 
 #ifdef ANDROID
-  ReactNativeGlassViewState(ReactNativeGlassViewState const &previousState, folly::dynamic data){};
+  ReactNativeGlassEffectContainerState(ReactNativeGlassEffectContainerState const &previousState, folly::dynamic data){};
   folly::dynamic getDynamic() const {
     return {};
   };

package/ios/Helpers/BlurStyleHelpers.swift

@@ -0,0 +1,59 @@
+// BlurStyleHelpers.swift
+
+import SwiftUI
+import UIKit
+
+// MARK: - Style Mapping Helper Functions
+
+/// Maps string blur style names to UIBlurEffect.Style values
+func blurStyleFromString(_ styleString: String) -> UIBlurEffect.Style {
+  switch styleString {
+  case "xlight":
+    return .extraLight
+  case "light":
+    return .light
+  case "dark":
+    return .dark
+  case "extraDark":
+    return .systemThickMaterialDark
+  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
+  default:
+    return .extraLight
+  }
+}
+
+/// Maps string glass type names to Glass effect values (iOS 26.0+)
+@available(iOS 26.0, *)
+func glassEffectFromString(_ glassTypeString: String) -> Glass {
+  switch glassTypeString {
+  case "regular":
+    return .regular
+  case "clear":
+    return .clear
+  default:
+    return .clear
+  }
+}
+
+// MARK: - Blur Amount Mapping
+
+/// Maps blur amount (0-100) to proper blur intensity using UIViewPropertyAnimator approach
+func mapBlurAmountToIntensity(_ amount: Double) -> Double {
+  let clampedAmount = max(0.0, min(100.0, amount))
+
+  // Map 0-100 to 0-1.0 intensity for smooth progression
+  return clampedAmount / 100.0
+}

package/ios/Helpers/ReactNativeBlurViewHelper.swift

@@ -0,0 +1,59 @@
+// ReactNativeBlurViewHelper.swift
+
+import SwiftUI
+import UIKit
+
+// MARK: - Objective-C Bridging Helpers
+
+@objc public class ReactNativeBlurViewHelper: NSObject {
+
+  /// Creates and returns a view containing a colored rectangle.
+  @objc public static func createBlurViewWithFrame(_ frame: CGRect) -> AdvancedBlurView {
+    return AdvancedBlurView(frame: frame)
+  }
+
+  /// Updates the blur view with a new glass tint color.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withGlassTintColor glassTintColor: UIColor) {
+    blurView.glassTintColor = glassTintColor
+  }
+
+  /// Updates the blur view with a new glass opacity.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withGlassOpacity glassOpacity: Double) {
+    blurView.glassOpacity = glassOpacity
+  }
+
+  /// Updates the blur view with a new blur amount.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withBlurAmount blurAmount: Double) {
+    blurView.blurAmount = blurAmount
+  }
+
+  /// Updates the blur view with a new blur type.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withBlurType blurType: String) {
+    blurView.blurTypeString = blurType
+  }
+
+  /// Updates the blur view with a new glass type.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withGlassType glassType: String) {
+    blurView.glassType = glassType
+  }
+
+  /// Updates the blur view with a new blur style.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withType type: String) {
+    blurView.type = type
+  }
+
+  /// Updates the blur view with a new blur style.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withIsInteractive isInteractive: Bool) {
+    blurView.isInteractive = isInteractive
+  }
+
+  /// Updates the blur view with a new reduced transparency fallback color.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withReducedTransparencyFallbackColor fallbackColor: UIColor) {
+    blurView.reducedTransparencyFallbackColor = fallbackColor
+  }
+
+  /// No-op updater kept for API compatibility.
+  @objc public static func updateBlurView(_ blurView: AdvancedBlurView) {
+    // Nothing to update in the minimal implementation
+  }
+}

package/ios/ReactNativeBlurView.mm

@@ -6,7 +6,12 @@
 #import <react/renderer/components/ReactNativeBlurViewSpec/RCTComponentViewHelpers.h>
 
 #import "RCTFabricComponentsPlugins.h"
-#import "ReactNativeBlur-Swift.h" // Swift bridging header
+
+#if __has_include("ReactNativeBlur-Swift.h")
+#import "ReactNativeBlur-Swift.h"
+#else
+#import <ReactNativeBlur/ReactNativeBlur-Swift.h>
+#endif
 
 using namespace facebook::react;
 

package/ios/ReactNativeBlurViewManager.m

@@ -1,5 +1,11 @@
 #import "ReactNativeBlurViewManager.h"
+
+#if __has_include("ReactNativeBlur-Swift.h")
 #import "ReactNativeBlur-Swift.h"
+#else
+#import <ReactNativeBlur/ReactNativeBlur-Swift.h>
+#endif
+
 #import <React/RCTUIManager.h>
 #import <React/RCTBridge.h>
 

package/ios/Views/AdvancedBlurView.swift

@@ -0,0 +1,94 @@
+// AdvancedBlurView.swift
+
+import SwiftUI
+import UIKit
+
+// MARK: - UIKit Wrapper
+
+@objc public class AdvancedBlurView: UIView {
+
+  private var hostingController: UIHostingController<BasicColoredView>?
+
+  @objc public var glassTintColor: UIColor = .clear {
+    didSet {
+      updateView()
+    }
+  }
+
+  @objc public var glassOpacity: Double = 1.0 {
+    didSet {
+      updateView()
+    }
+  }
+
+  @objc public var blurAmount: Double = 10.0 {
+    didSet {
+      updateView()
+    }
+  }
+
+  @objc public var type: String = "blur" {
+    didSet {
+      updateView()
+    }
+  }
+
+  @objc public var blurTypeString: String = "xlight" {
+    didSet {
+      updateView()
+    }
+  }
+
+  @objc public var glassType: String = "clear" {
+    didSet {
+      updateView()
+    }
+  }
+
+  @objc public var reducedTransparencyFallbackColor: UIColor = .white {
+    didSet {
+      updateView()
+    }
+  }
+
+  @objc public var isInteractive: Bool = true {
+    didSet {
+      updateView()
+    }
+  }
+
+  public override init(frame: CGRect) {
+    super.init(frame: frame)
+    setupHostingController()
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setupHostingController()
+  }
+
+  private func setupHostingController() {
+    let blurStyle = blurStyleFromString(blurTypeString)
+    let swiftUIView = BasicColoredView(glassTintColor: glassTintColor, glassOpacity: glassOpacity, blurAmount: blurAmount, blurStyle: blurStyle, type: type, glassType: glassType, reducedTransparencyFallbackColor: reducedTransparencyFallbackColor, isInteractive: isInteractive)
+    let hosting = UIHostingController(rootView: swiftUIView)
+
+    hosting.view.backgroundColor = .clear
+    hosting.view.translatesAutoresizingMaskIntoConstraints = false
+
+    addSubview(hosting.view)
+    NSLayoutConstraint.activate([
+      hosting.view.topAnchor.constraint(equalTo: topAnchor),
+      hosting.view.leadingAnchor.constraint(equalTo: leadingAnchor),
+      hosting.view.trailingAnchor.constraint(equalTo: trailingAnchor),
+      hosting.view.bottomAnchor.constraint(equalTo: bottomAnchor)
+    ])
+
+    self.hostingController = hosting
+  }
+
+  private func updateView() {
+    let blurStyle = blurStyleFromString(blurTypeString)
+    let newSwiftUIView = BasicColoredView(glassTintColor: glassTintColor, glassOpacity: glassOpacity, blurAmount: blurAmount, blurStyle: blurStyle, type:type, glassType: glassType, reducedTransparencyFallbackColor: reducedTransparencyFallbackColor, isInteractive: isInteractive)
+    hostingController?.rootView = newSwiftUIView
+  }
+}

package/ios/Views/BasicColoredView.swift

@@ -0,0 +1,58 @@
+// BasicColoredView.swift
+
+import SwiftUI
+import UIKit
+
+// MARK: - SwiftUI View Component
+
+struct BasicColoredView: View {
+  var glassTintColor: UIColor
+  var glassOpacity: Double
+  var blurAmount: Double
+  var blurStyle: UIBlurEffect.Style
+  var type: String
+  var glassType: String
+  var reducedTransparencyFallbackColor: UIColor
+  var isInteractive: Bool
+
+  var body: some View {
+    let blurIntensity = mapBlurAmountToIntensity(blurAmount)
+
+    // Check if reduced transparency is enabled
+    let isReducedTransparencyEnabled = UIAccessibility.isReduceTransparencyEnabled
+
+    if isReducedTransparencyEnabled {
+      // Use fallback color when reduced transparency is enabled
+      Rectangle()
+        .fill(Color(reducedTransparencyFallbackColor))
+    } else {
+      if (type == "liquidGlass"){
+        if #available(iOS 26.0, *) {
+          let baseGlassEffect = glassEffectFromString(glassType)
+          Rectangle()
+            .glassEffect(
+              baseGlassEffect
+                .tint(Color(glassTintColor)
+                  .opacity(glassOpacity))
+                .interactive(isInteractive)
+              , in: .rect)
+
+        } else {
+          // Use proper blur intensity control for liquid glass fallback
+          Rectangle()
+            .fill(Color(.clear))
+            .background(Blur(style: blurStyle, intensity: blurIntensity))
+            .overlay(
+              Color(glassTintColor)
+                .opacity(glassOpacity)
+            )
+        }
+      }else {
+        // Use proper blur intensity control for regular blur
+        Rectangle()
+          .fill(Color(.clear))
+          .background(Blur(style: blurStyle, intensity: blurIntensity))
+      }
+    }
+  }
+}

package/ios/Views/BlurEffectView.swift

@@ -0,0 +1,70 @@
+// BlurEffectView.swift
+
+import SwiftUI
+import UIKit
+
+// MARK: - Blur View with proper intensity control
+
+class BlurEffectView: UIVisualEffectView {
+  private var animator: UIViewPropertyAnimator?
+  private var blurStyle: UIBlurEffect.Style = .systemMaterial
+  private var intensity: Double = 1.0
+
+  override init(effect: UIVisualEffect?) {
+    super.init(effect: effect)
+    setupBlur()
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+    setupBlur()
+  }
+
+  func updateBlur(style: UIBlurEffect.Style, intensity: Double) {
+    self.blurStyle = style
+    self.intensity = intensity
+    setupBlur()
+  }
+
+  private func setupBlur() {
+    // Clean up existing animator
+    animator?.stopAnimation(true)
+    animator?.finishAnimation(at: .current)
+    animator = nil
+
+    // Reset effect
+    effect = nil
+
+    // Create new animator
+    animator = UIViewPropertyAnimator(duration: 1, curve: .linear)
+    animator?.addAnimations { [weak self] in
+      self?.effect = UIBlurEffect(style: self?.blurStyle ?? .systemMaterial)
+    }
+
+    // Set intensity and pause
+    animator?.fractionComplete = intensity
+    animator?.pauseAnimation()
+  }
+
+  deinit {
+    animator?.stopAnimation(true)
+    animator?.finishAnimation(at: .current)
+  }
+}
+
+// MARK: - SwiftUI Blur Wrapper
+
+struct Blur: UIViewRepresentable {
+  var style: UIBlurEffect.Style = .systemMaterial
+  var intensity: Double = 1.0
+
+  func makeUIView(context: Context) -> BlurEffectView {
+    let effectView = BlurEffectView(effect: nil)
+    effectView.updateBlur(style: style, intensity: intensity)
+    return effectView
+  }
+
+  func updateUIView(_ uiView: BlurEffectView, context: Context) {
+    uiView.updateBlur(style: style, intensity: intensity)
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbaiahmed1/react-native-blur",
-  "version": "3.0.0-beta.1",
+  "version": "3.1.0",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",