@sbaiahmed1/react-native-blur 4.6.1-beta.5 → 4.6.1

package/README.md

@@ -7,7 +7,7 @@ A modern React Native library providing **six specialized components** for advan
 <div align="center">
   <p>
     <img src="https://img.shields.io/npm/v/@sbaiahmed1/react-native-blur?style=for-the-badge&color=blue" alt="npm version" />
-    <img src="https://img.shields.io/npm/dt/@sbaiahmed1/react-native-blur?style=for-the-badge&color=green" alt="downloads" />
+    <img src="https://img.shields.io/npm/dm/%40sbaiahmed1%2Freact-native-blur?style=for-the-badge" alt="downloads per month" />
     <img src="https://img.shields.io/github/license/sbaiahmed1/react-native-blur?style=for-the-badge&color=orange" alt="license" />
     <img src="https://img.shields.io/github/stars/sbaiahmed1/react-native-blur?style=for-the-badge&color=yellow" alt="stars" />
   </p>
@@ -1001,6 +1001,7 @@ MIT
 
 <div align="center">
   <img src="https://img.shields.io/github/contributors/sbaiahmed1/react-native-blur?style=for-the-badge" alt="contributors" />
+  <img src="https://img.shields.io/npm/dt/@sbaiahmed1/react-native-blur?style=for-the-badge&color=green" alt="downloads" />
   <img src="https://img.shields.io/github/last-commit/sbaiahmed1/react-native-blur?style=for-the-badge" alt="last commit" />
   <img src="https://img.shields.io/github/issues/sbaiahmed1/react-native-blur?style=for-the-badge" alt="issues" />
   <img src="https://img.shields.io/github/issues-pr/sbaiahmed1/react-native-blur?style=for-the-badge" alt="pull requests" />

package/ios/Helpers/ReactNativeBlurViewHelper.swift

@@ -1,23 +1,35 @@
+// ReactNativeBlurViewHelper.swift
+
+import SwiftUI
 import UIKit
 
+// MARK: - Objective-C Bridging Helpers
+
 @objc public class ReactNativeBlurViewHelper: NSObject {
+
+  /// Creates and returns a blur view.
   @objc public static func createBlurViewWithFrame(_ frame: CGRect) -> AdvancedBlurView {
     return AdvancedBlurView(frame: frame)
   }
 
+  /// 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 reduced transparency fallback color.
   @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withReducedTransparencyFallbackColor reducedTransparencyFallbackColor: UIColor) {
     blurView.reducedTransparencyFallbackColor = reducedTransparencyFallbackColor
   }
 
+  /// Updates the blur view with a new ignoreSafeArea value.
   @objc public static func updateBlurView(_ blurView: AdvancedBlurView, withIgnoringSafeArea ignoreSafeArea: Bool) {
     blurView.ignoreSafeArea = ignoreSafeArea
   }
 }
+

package/ios/Views/AdvancedBlurView.swift

@@ -1,8 +1,11 @@
+import SwiftUI
 import UIKit
 
+// MARK: - UIKit Wrapper for Blur
+
 @objc public class AdvancedBlurView: UIView {
-  private let blurEffectView = BlurEffectView(effect: nil)
-  private let fallbackView = UIView()
+
+  private var hostingController: UIHostingController<BasicColoredView>?
 
   @objc public var blurAmount: Double = 10.0 {
     didSet {
@@ -26,63 +29,79 @@ import UIKit
     didSet {
       updateView()
     }
-  }
+ }
 
   public override init(frame: CGRect) {
     super.init(frame: frame)
-    setupViews()
   }
 
   required init?(coder: NSCoder) {
     super.init(coder: coder)
-    setupViews()
-  }
-
-  private func setupViews() {
-    blurEffectView.isUserInteractionEnabled = false
-    fallbackView.isUserInteractionEnabled = false
-    addSubview(fallbackView)
-    addSubview(blurEffectView)
-    syncBackgroundLayersToBack()
-    updateView()
   }
 
-  private func syncBackgroundLayersToBack() {
-    if fallbackView.superview === self {
-      sendSubviewToBack(fallbackView)
-    }
-    if blurEffectView.superview === self {
-      sendSubviewToBack(blurEffectView)
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    // Defer controller setup until we have a valid frame to avoid issues with initial render
+    // in complex layouts (e.g. FlashList with dynamic content)
+    if hostingController == nil && bounds.width > 0 && bounds.height > 0 {
+      setupHostingController()
     }
   }
 
-  public override func didAddSubview(_ subview: UIView) {
-    super.didAddSubview(subview)
-    if subview !== blurEffectView && subview !== fallbackView {
-      syncBackgroundLayersToBack()
+  private func setupHostingController() {
+    // Completely remove old hosting controller
+    if let oldHosting = hostingController {
+      oldHosting.view.removeFromSuperview()
+      oldHosting.removeFromParent()
     }
-  }
+    hostingController = nil
 
-  public override func layoutSubviews() {
-    super.layoutSubviews()
-    fallbackView.frame = bounds
-    blurEffectView.frame = bounds
+    let blurStyle = blurStyleFromString(blurTypeString)
+    let swiftUIView = BasicColoredView(
+      blurAmount: blurAmount,
+      blurStyle: blurStyle,
+      ignoreSafeArea: ignoreSafeArea,
+      reducedTransparencyFallbackColor: reducedTransparencyFallbackColor
+    )
+
+    let hosting = UIHostingController(rootView: swiftUIView)
+    hosting.view.backgroundColor = .clear
+    hosting.view.translatesAutoresizingMaskIntoConstraints = false
+
+    // Insert at index 0 to ensure it stays behind any potential subviews (though usually this view has no children)
+    // This fixes the z-ordering bug where blur covers content
+    if !subviews.isEmpty {
+        insertSubview(hosting.view, at: 0)
+    } else {
+        addSubview(hosting.view)
+    }
+    
+    NSLayoutConstraint.activate([
+      hosting.view.topAnchor.constraint(equalTo: topAnchor),
+      hosting.view.leadingAnchor.constraint(equalTo: leadingAnchor),
+      hosting.view.trailingAnchor.constraint(equalTo: trailingAnchor),
+      hosting.view.bottomAnchor.constraint(equalTo: bottomAnchor)
+    ])
+
+    self.hostingController = hosting
   }
 
   private func updateView() {
-    if UIAccessibility.isReduceTransparencyEnabled {
-      fallbackView.isHidden = false
-      blurEffectView.isHidden = true
-      fallbackView.backgroundColor = reducedTransparencyFallbackColor
-      return
+    if let hosting = hostingController {
+        // Update the existing controller's root view to avoid expensive recreation
+        // This fixes performance bottlenecks and state synchronization issues
+        let blurStyle = blurStyleFromString(blurTypeString)
+        let swiftUIView = BasicColoredView(
+          blurAmount: blurAmount,
+          blurStyle: blurStyle,
+          ignoreSafeArea: ignoreSafeArea,
+          reducedTransparencyFallbackColor: reducedTransparencyFallbackColor
+        )
+        hosting.rootView = swiftUIView
+        hosting.view.setNeedsLayout()
+    } else {
+        setupHostingController()
     }
-
-    fallbackView.isHidden = true
-    blurEffectView.isHidden = false
-    let blurStyle = blurStyleFromString(blurTypeString)
-    let intensity = mapBlurAmountToIntensity(blurAmount)
-    blurEffectView.updateBlur(style: blurStyle, intensity: intensity)
-    blurEffectView.setNeedsDisplay()
   }
 
   public override func didMoveToSuperview() {
@@ -91,10 +110,13 @@ import UIKit
 
   public override func didMoveToWindow() {
     super.didMoveToWindow()
-    if window != nil {
-      updateView()
-    }
   }
 
-  deinit {}
+  deinit {
+    if let hosting = hostingController {
+      hosting.view.removeFromSuperview()
+      hosting.removeFromParent()
+    }
+    hostingController = nil
+  }
 }

package/ios/Views/BlurEffectView.swift

@@ -1,68 +1,77 @@
+// 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 {
-    didSet {
-      visualEffect = UIBlurEffect(style: blurStyle)
-    }
-  }
-  private var intensity: Double = 0.1 {
-    didSet {
-      setNeedsDisplay()
-    }
-  }
-  private var visualEffect: UIVisualEffect = UIBlurEffect(style: .systemMaterial) {
-    didSet {
-      setNeedsDisplay()
-    }
-  }
+  private var blurStyle: UIBlurEffect.Style = .systemMaterial
+  private var intensity: Double = 1.0
 
   override init(effect: UIVisualEffect?) {
-    super.init(effect: nil)
+    super.init(effect: effect)
+    setupBlur()
   }
 
   required init?(coder: NSCoder) {
-    return nil
+    super.init(coder: coder)
+    setupBlur()
   }
 
   func updateBlur(style: UIBlurEffect.Style, intensity: Double) {
-    blurStyle = style
-    self.intensity = min(max(intensity, 0.0), 1.0)
-    setNeedsDisplay()
+    self.blurStyle = style
+    self.intensity = intensity
+    setupBlur()
   }
 
-  override func draw(_ rect: CGRect) {
-    super.draw(rect)
-
-    // Avoid animator-based blur during Detox so tests don't hang waiting for app idleness.
-    if isDetoxPresent() {
-      effect = intensity > 0 ? visualEffect : nil
-      return
+  private func setupBlur() {
+    // Clean up existing animator
+    if let animator = animator {
+      animator.stopAnimation(true)
+      animator.finishAnimation(at: .current)
     }
+    animator = nil
 
-    if intensity <= 0 {
-      effect = nil
-      animator?.stopAnimation(true)
-      return
-    }
+    // Reset effect
+    effect = nil
 
-    let normalizedIntensity = max(0.01, min(1.0, intensity))
+    // Create new animator
+    animator = UIViewPropertyAnimator(duration: 1, curve: .linear)
+    animator?.addAnimations { [weak self] in
+      self?.effect = UIBlurEffect(style: self?.blurStyle ?? .systemMaterial)
+    }
 
-    effect = nil
-    animator?.stopAnimation(true)
-    animator = UIViewPropertyAnimator(duration: 1, curve: .linear) { [unowned self] in
-      self.effect = visualEffect
+    // Set intensity
+    animator?.fractionComplete = intensity
+    // Stop the animation at the current state
+    DispatchQueue.main.async { [weak self] in
+      self?.animator?.stopAnimation(true)
+      self?.animator?.finishAnimation(at: .current)
     }
-    animator?.fractionComplete = CGFloat(normalizedIntensity)
   }
 
   deinit {
-    animator?.stopAnimation(true)
+    guard let animator = animator, animator.state == .active else { return }
+    animator.stopAnimation(true)
+    animator.finishAnimation(at: .current)
   }
 }
 
-private func isDetoxPresent() -> Bool {
-  let args = ProcessInfo.processInfo.arguments
-  return args.contains("-detoxServer") && args.contains("-detoxSessionId")
+// 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": "4.6.1-beta.5",
+  "version": "4.6.1",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",