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

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

@@ -19,6 +19,7 @@ class ReactNativeBlurView : BlurView {
   private var blurRadius = mapBlurAmountToRadius(DEFAULT_BLUR_AMOUNT)
   private var overlayColor = Color.TRANSPARENT
   private var isSetup = false
+  private var isConfigured = false
   private var pendingStyleUpdate: Boolean = false
   private var originalBackgroundColor: Int? = null
   private var hasExplicitBackground: Boolean = false
@@ -179,15 +180,23 @@ class ReactNativeBlurView : BlurView {
    */
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
-    setupBlurView()
+    
+    // Now we can safely walk the parent hierarchy
+    if (!this.isConfigured) {
+      this.isConfigured = true
+      setupBlurView()
+    }
   }
 
   /**
    * Called when the view is detached from a window.
-   * Performs cleanup to prevent memory leaks.
+   * Performs cleanup to prevent memory leaks and navigation transition issues.
    */
   override fun onDetachedFromWindow() {
     super.onDetachedFromWindow()
+    
+    this.isConfigured = false
+    this.removeCallbacks(null)
     cleanup()
   }
 
@@ -195,7 +204,7 @@ class ReactNativeBlurView : BlurView {
    * Cleanup method to reset state and remove pending callbacks.
    * Helps prevent memory leaks and ensures clean state.
    */
-  private fun cleanup() {
+  fun cleanup() {
     isSetup = false
     hasExplicitBackground = false
     originalBackgroundColor = null
@@ -213,7 +222,7 @@ class ReactNativeBlurView : BlurView {
     if (isSetup) return
 
     try {
-      val rootView = findRootView()
+      val rootView = findOptimalBlurRoot()
 
       rootView?.let { root ->
         try {
@@ -261,12 +270,44 @@ class ReactNativeBlurView : BlurView {
         isSetup = true
       }
     } catch (e: Exception) {
-      // Fallback: use semi-transparent overlay to avoid visual issues
+      // Final fallback: set transparent background to prevent visual artifacts
       super.setBackgroundColor(overlayColor)
       logError("Failed to setup blur: ${e.message}", e)
     }
   }
 
+  /**
+   * Find the optimal blur root view by walking up the parent hierarchy.
+   * This method is crucial for proper blur rendering during navigation transitions.
+   * @return The optimal ViewGroup to use as blur root or null if not found
+   */
+  private fun findOptimalBlurRoot(): ViewGroup? {
+    var current = this.parent
+    
+    // Walk up the parent hierarchy to find the best blur root
+    while (current != null) {
+      if (current is ViewGroup) {
+        // Prefer content view as it's the most stable during transitions
+        if (current.id == android.R.id.content) {
+          return current
+        }
+        
+        // Look for other suitable container views
+        val className = current.javaClass.simpleName
+        if (className.contains("DecorView") ||
+            className.contains("ContentFrameLayout") ||
+            (className.contains("LinearLayout") && current.parent == null)) {
+          // For LinearLayout, only consider it if it's the root of the hierarchy (parent == null)
+          // This avoids misidentifying containers in complex layouts
+          return current
+        }
+      current = current.parent
+    }
+    
+    // Fallback: try to get activity's content view
+    return findRootView()
+  }
+
   /**
    * Find the root view using multiple strategies.
    * @return The root ViewGroup or null if not found

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

@@ -69,6 +69,16 @@ class ReactNativeBlurViewManager : ViewGroupManager<ReactNativeBlurView>(),
     view?.setIsInteractive(isInteractive)
   }
 
+  /**
+   * Called when view is detached from view hierarchy and allows for cleanup.
+   * This prevents the white screen issue during navigation transitions on Android.
+   */
+  override fun onDropViewInstance(view: ReactNativeBlurView) {
+    super.onDropViewInstance(view)
+    // Call cleanup to reset state and prevent white screen artifacts
+    view.cleanup()
+  }
+
   companion object {
     const val NAME = "ReactNativeBlurView"
   }

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,135 @@
+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()
+  }
+
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    if hostingController == nil {
+      setupHostingController()
+    }
+  }
+
+  private func setupHostingController() {
+    // Completely remove old hosting controller
+    if let oldHosting = hostingController {
+      oldHosting.view.removeFromSuperview()
+      oldHosting.removeFromParent()
+    }
+    hostingController = nil
+
+    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() {
+    setupHostingController()
+  }
+
+  public override func didMoveToSuperview() {
+    super.didMoveToSuperview()
+    if superview != nil {
+      setupHostingController()
+    }
+  }
+  
+  public override func didMoveToWindow() {
+    super.didMoveToWindow()
+    if window != nil {
+      setupHostingController()
+    }
+  }
+
+  deinit {
+    if let hosting = hostingController {
+      hosting.view.removeFromSuperview()
+      hosting.removeFromParent()
+    }
+    hostingController = nil
+  }
+}

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,72 @@
+// 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
+    if let animator = 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.1",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassViewManagerDelegate.java

@@ -1,38 +0,0 @@
-/**
-* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
-*
-* Do not edit this file as changes may cause incorrect behavior and will be lost
-* once the code is regenerated.
-*
-* @generated by codegen project: GeneratePropsJavaDelegate.js
-*/
-
-package com.facebook.react.viewmanagers;
-
-import android.view.View;
-import androidx.annotation.Nullable;
-import com.facebook.react.uimanager.BaseViewManager;
-import com.facebook.react.uimanager.BaseViewManagerDelegate;
-import com.facebook.react.uimanager.LayoutShadowNode;
-
-public class ReactNativeGlassViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNativeGlassViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
-  public ReactNativeGlassViewManagerDelegate(U viewManager) {
-    super(viewManager);
-  }
-  @Override
-  public void setProperty(T view, String propName, @Nullable Object value) {
-    switch (propName) {
-      case "glassType":
-        mViewManager.setGlassType(view, (String) value);
-        break;
-      case "glassAmount":
-        mViewManager.setGlassAmount(view, value == null ? 50f : ((Double) value).doubleValue());
-        break;
-      case "reducedTransparencyFallbackColor":
-        mViewManager.setReducedTransparencyFallbackColor(view, value == null ? null : (String) value);
-        break;
-      default:
-        super.setProperty(view, propName, value);
-    }
-  }
-}

package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassViewManagerInterface.java

@@ -1,20 +0,0 @@
-/**
-* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
-*
-* Do not edit this file as changes may cause incorrect behavior and will be lost
-* once the code is regenerated.
-*
-* @generated by codegen project: GeneratePropsJavaInterface.js
-*/
-
-package com.facebook.react.viewmanagers;
-
-import android.view.View;
-import androidx.annotation.Nullable;
-import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
-
-public interface ReactNativeGlassViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
-  void setGlassType(T view, @Nullable String value);
-  void setGlassAmount(T view, double value);
-  void setReducedTransparencyFallbackColor(T view, @Nullable String value);
-}