@sbaiahmed1/react-native-blur 4.6.1-beta.2 → 4.6.1-beta.3

package/ios/Views/AdvancedBlurView.swift

@@ -1,11 +1,8 @@
-import SwiftUI
 import UIKit
 
-// MARK: - UIKit Wrapper for Blur
-
 @objc public class AdvancedBlurView: UIView {
-
-  private var hostingController: UIHostingController<BasicColoredView>?
+  private let blurEffectView = BlurEffectView(effect: nil)
+  private let fallbackView = UIView()
 
   @objc public var blurAmount: Double = 10.0 {
     didSet {
@@ -29,79 +26,63 @@ import UIKit
     didSet {
       updateView()
     }
- }
+  }
 
   public override init(frame: CGRect) {
     super.init(frame: frame)
+    setupViews()
   }
 
   required init?(coder: NSCoder) {
     super.init(coder: coder)
+    setupViews()
   }
 
-  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()
-    }
+  private func setupViews() {
+    blurEffectView.isUserInteractionEnabled = false
+    fallbackView.isUserInteractionEnabled = false
+    addSubview(fallbackView)
+    addSubview(blurEffectView)
+    syncBackgroundLayersToBack()
+    updateView()
   }
 
-  private func setupHostingController() {
-    // Completely remove old hosting controller
-    if let oldHosting = hostingController {
-      oldHosting.view.removeFromSuperview()
-      oldHosting.removeFromParent()
+  private func syncBackgroundLayersToBack() {
+    if fallbackView.superview === self {
+      sendSubviewToBack(fallbackView)
+    }
+    if blurEffectView.superview === self {
+      sendSubviewToBack(blurEffectView)
     }
-    hostingController = nil
+  }
 
-    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)
+  public override func didAddSubview(_ subview: UIView) {
+    super.didAddSubview(subview)
+    if subview !== blurEffectView && subview !== fallbackView {
+      syncBackgroundLayersToBack()
     }
-    
-    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
+  }
+
+  public override func layoutSubviews() {
+    super.layoutSubviews()
+    fallbackView.frame = bounds
+    blurEffectView.frame = bounds
   }
 
   private func updateView() {
-    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()
+    if UIAccessibility.isReduceTransparencyEnabled {
+      fallbackView.isHidden = false
+      blurEffectView.isHidden = true
+      fallbackView.backgroundColor = reducedTransparencyFallbackColor
+      return
     }
+
+    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() {
@@ -115,11 +96,5 @@ import UIKit
     }
   }
 
-  deinit {
-    if let hosting = hostingController {
-      hosting.view.removeFromSuperview()
-      hosting.removeFromParent()
-    }
-    hostingController = nil
-  }
+  deinit {}
 }

package/lib/module/BlurView.js

@@ -45,8 +45,6 @@ export const BlurView = ({
     ignoreSafeArea,
     reducedTransparencyFallbackColor
   };
-
-  // If no children, render the blur view directly (for background use)
   if (!Children.count(children)) {
     return /*#__PURE__*/_jsx(ReactNativeBlurView, {
       style: [style, overlay],
@@ -54,8 +52,6 @@ export const BlurView = ({
       ...props
     });
   }
-
-  // If children exist, use the style default for Android
   if (Platform.OS === 'android') {
     return /*#__PURE__*/_jsxs(ReactNativeBlurView, {
       style: style,
@@ -66,8 +62,6 @@ export const BlurView = ({
       }), children]
     });
   }
-
-  // If children exist, use the absolute positioning pattern for iOS and others
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.container, style, overlay],
     children: [/*#__PURE__*/_jsx(ReactNativeBlurView, {

package/lib/module/BlurView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Children","Platform","StyleSheet","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","overlayColor","style","children","ignoreSafeArea","props","overlay","backgroundColor","commonProps","count","OS","absoluteFill","styles","container","create","position","overflow"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAEzD,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAuD9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAiC,GAAGA,CAAC;EAChDC,QAAQ,GAAG,QAAQ;EACnBC,UAAU,GAAG,EAAE;EACfC,gCAAgC,GAAG,SAAS;EAC5CC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAG,IAAI;EACrB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEN;EAAa,CAAC;EACjD,MAAMO,WAA0B,GAAG;IACjCV,QAAQ;IACRC,UAAU;IACVK,cAAc;IACdJ;EACF,CAAC;;EAED;EACA,IAAI,CAACZ,QAAQ,CAACqB,KAAK,CAACN,QAAQ,CAAC,EAAE;IAC7B,oBACET,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAE,CAACA,KAAK,EAAEI,OAAO,CAAE;MAAA,GACpBE,WAAW;MAAA,GACXH;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,IAAIhB,QAAQ,CAACqB,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEd,KAAA,CAACJ,mBAAmB;MAACU,KAAK,EAAEA,KAAM;MAAA,GAAKM,WAAW;MAAA,GAAMH,KAAK;MAAAF,QAAA,gBAC3DT,IAAA,CAACH,IAAI;QAACW,KAAK,EAAE,CAACZ,UAAU,CAACqB,YAAY,EAAEL,OAAO;MAAE,CAAE,CAAC,EAElDH,QAAQ;IAAA,CACU,CAAC;EAE1B;;EAEA;EACA,oBACEP,KAAA,CAACL,IAAI;IAACW,KAAK,EAAE,CAACU,MAAM,CAACC,SAAS,EAAEX,KAAK,EAAEI,OAAO,CAAE;IAAAH,QAAA,gBAE9CT,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAEZ,UAAU,CAACqB,YAAa;MAAA,GAC3BH,WAAW;MAAA,GACXH;IAAK,CACV,CAAC,EACDF,QAAQ;EAAA,CACL,CAAC;AAEX,CAAC;AAED,eAAeN,QAAQ;AAEvB,MAAMe,MAAM,GAAGtB,UAAU,CAACwB,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Children","Platform","StyleSheet","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","overlayColor","style","children","ignoreSafeArea","props","overlay","backgroundColor","commonProps","count","OS","absoluteFill","styles","container","create","position","overflow"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,QAAQ,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AACzD,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAuD9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAiC,GAAGA,CAAC;EAChDC,QAAQ,GAAG,QAAQ;EACnBC,UAAU,GAAG,EAAE;EACfC,gCAAgC,GAAG,SAAS;EAC5CC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,cAAc,GAAG,IAAI;EACrB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEN;EAAa,CAAC;EACjD,MAAMO,WAA0B,GAAG;IACjCV,QAAQ;IACRC,UAAU;IACVK,cAAc;IACdJ;EACF,CAAC;EAED,IAAI,CAACZ,QAAQ,CAACqB,KAAK,CAACN,QAAQ,CAAC,EAAE;IAC7B,oBACET,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAE,CAACA,KAAK,EAAEI,OAAO,CAAE;MAAA,GACpBE,WAAW;MAAA,GACXH;IAAK,CACV,CAAC;EAEN;EAEA,IAAIhB,QAAQ,CAACqB,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEd,KAAA,CAACJ,mBAAmB;MAACU,KAAK,EAAEA,KAAM;MAAA,GAAKM,WAAW;MAAA,GAAMH,KAAK;MAAAF,QAAA,gBAC3DT,IAAA,CAACH,IAAI;QAACW,KAAK,EAAE,CAACZ,UAAU,CAACqB,YAAY,EAAEL,OAAO;MAAE,CAAE,CAAC,EAElDH,QAAQ;IAAA,CACU,CAAC;EAE1B;EAEA,oBACEP,KAAA,CAACL,IAAI;IAACW,KAAK,EAAE,CAACU,MAAM,CAACC,SAAS,EAAEX,KAAK,EAAEI,OAAO,CAAE;IAAAH,QAAA,gBAC9CT,IAAA,CAACF,mBAAmB;MAClBU,KAAK,EAAEZ,UAAU,CAACqB,YAAa;MAAA,GAC3BH,WAAW;MAAA,GACXH;IAAK,CACV,CAAC,EACDF,QAAQ;EAAA,CACL,CAAC;AAEX,CAAC;AAED,eAAeN,QAAQ;AAEvB,MAAMe,MAAM,GAAGtB,UAAU,CAACwB,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import { type BlurType } from './ReactNativeBlurViewNativeComponent';
 export interface BlurViewProps {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrE,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;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,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;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,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgD5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

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

package/src/BlurView.tsx

@@ -1,6 +1,6 @@
 import React, { Children } from 'react';
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import { Platform, StyleSheet, View } from 'react-native';
-import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
 import ReactNativeBlurView, {
   type BlurType,
 } from './ReactNativeBlurViewNativeComponent';
@@ -98,7 +98,6 @@ export const BlurView: React.FC<BlurViewProps> = ({
     reducedTransparencyFallbackColor,
   };
 
-  // If no children, render the blur view directly (for background use)
   if (!Children.count(children)) {
     return (
       <ReactNativeBlurView
@@ -109,7 +108,6 @@ export const BlurView: React.FC<BlurViewProps> = ({
     );
   }
 
-  // If children exist, use the style default for Android
   if (Platform.OS === 'android') {
     return (
       <ReactNativeBlurView style={style} {...commonProps} {...props}>
@@ -120,10 +118,8 @@ export const BlurView: React.FC<BlurViewProps> = ({
     );
   }
 
-  // If children exist, use the absolute positioning pattern for iOS and others
   return (
     <View style={[styles.container, style, overlay]}>
-      {/* Blur effect positioned absolutely behind content */}
       <ReactNativeBlurView
         style={StyleSheet.absoluteFill}
         {...commonProps}