react-native-blur-vibe 0.1.1 → 0.1.3

package/android/build.gradle

@@ -63,6 +63,13 @@ android {
   }
 }
 
+repositories {
+    google()
+    mavenCentral()
+    maven { url 'https://jitpack.io' }
+  }
+
 dependencies {
   implementation "com.facebook.react:react-android"
+  implementation 'com.qmdeve.blurview:core:1.1.4'
 }

package/android/src/main/java/com/blurvibe/BlurVibePackage.kt

@@ -6,7 +6,9 @@ import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.uimanager.ViewManager
 
 class BlurVibePackage : ReactPackage {
-  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> = emptyList()
+  override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> =
+    emptyList()
+
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
     listOf(BlurVibeViewManager())
 }

package/android/src/main/java/com/blurvibe/BlurVibeView.kt

@@ -1,174 +1,240 @@
 package com.blurvibe
 
-import android.annotation.SuppressLint
 import android.content.Context
-import android.graphics.Bitmap
-import android.graphics.Canvas
 import android.graphics.Color
-import android.graphics.RenderEffect
-import android.graphics.Shader
-import android.os.Build
-import android.renderscript.Allocation
-import android.renderscript.Element
-import android.renderscript.RenderScript
-import android.renderscript.ScriptIntrinsicBlur
+import android.graphics.Outline
+import android.util.TypedValue
 import android.view.View
 import android.view.ViewGroup
-import android.widget.FrameLayout
+import android.view.ViewOutlineProvider
+import android.view.ViewTreeObserver
+import androidx.core.graphics.toColorInt
+import com.qmdeve.blurview.base.BaseBlurViewGroup
+import com.qmdeve.blurview.widget.BlurViewGroup
 
 /**
- * BlurVibeView — Android implementation
+ * BlurVibeView — Android backdrop blur implementation
  *
- * API 31+  : RenderEffect (hardware accelerated)
- * API 24-30: RenderScript (built-in SDK, no extra dep)
+ * Extends QmBlurView's BlurViewGroup — a high-performance blur library
+ * that correctly implements CSS backdrop-filter: blur() semantics:
+ *   - Blurs content BEHIND the view, not the view itself
+ *   - Hardware accelerated via native blur algorithms
+ *   - Handles scroll, animation, zIndex, absolute positioning correctly
+ *   - Never causes draw loops or bitmap capture on the JS thread
  *
- * Color props (overlayColor, reducedTransparencyFallbackColor) are
- * received as hex strings from JS and parsed manually here.
- * This gives full control over alpha channel handling.
+ * Uses reflection to redirect the blur capture root from the activity
+ * decor view to the nearest ReactRootView or react-native-screens Screen,
+ * preventing full-screen blur and navigation transition artifacts.
  *
- * Supports: "#RGB" "#RRGGBB" "#RRGGBBAA" "transparent"
+ * Credit: approach adapted from sbaiahmed1/react-native-blur
  */
-@SuppressLint("NewApi")
-class BlurVibeView(context: Context) : FrameLayout(context) {
-
-  private val overlayView = View(context)
-  private var blurAmountValue: Float = 10f
-  private var overlayColorValue: Int = Color.TRANSPARENT
-  private var fallbackColorValue: Int = Color.parseColor("#F2F2F2")
-  private var blurRadiusDownscale: Int = 4
+class BlurVibeView(context: Context) : BlurViewGroup(context, null) {
+
+  private var currentBlurRadius = DEFAULT_BLUR_RADIUS
+  private var currentOverlayColor = Color.TRANSPARENT
+  private var currentCornerRadius = 0f
+  private var isBlurInitialized = false
+
+  companion object {
+    private const val DEFAULT_BLUR_RADIUS = 10f
+    private const val MIN_BLUR_AMOUNT = 0f
+    private const val MAX_BLUR_AMOUNT = 100f
+    private const val MAX_BLUR_RADIUS = 100f
+
+    // Maps 0–100 blurAmount to 0–25 QmBlurView radius range
+    private fun mapBlurAmountToRadius(amount: Float): Float {
+      val clamped = amount.coerceIn(MIN_BLUR_AMOUNT, MAX_BLUR_AMOUNT)
+      return (clamped / MAX_BLUR_AMOUNT) * MAX_BLUR_RADIUS
+    }
+  }
 
   init {
-    setWillNotDraw(false)
-    overlayView.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
-    overlayView.isClickable = false
-    overlayView.isFocusable = false
-    addView(overlayView)
-    applyBlur()
+    super.setBackgroundColor(currentOverlayColor)
+    clipChildren = true
+    clipToOutline = true
+    blurRounds = 5
+    super.setDownsampleFactor(6.0f)
   }
 
-  // MARK: - Public setters (called by ViewManager)
-
-  fun setBlurAmount(amount: Float) {
-    blurAmountValue = amount.coerceIn(0f, 100f)
-    applyBlur()
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    if (isBlurInitialized) return
+    swapBlurRootToOptimalAncestor()
+    initializeBlur()
   }
 
-  fun setOverlayColor(colorString: String) {
-    overlayColorValue = parseHexColor(colorString) ?: Color.TRANSPARENT
-    updateOverlay()
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    isBlurInitialized = false
   }
 
-  fun setReducedTransparencyFallbackColor(colorString: String) {
-    fallbackColorValue = parseHexColor(colorString) ?: Color.parseColor("#F2F2F2")
-  }
+  /**
+   * Uses reflection to redirect QmBlurView's internal blur capture root
+   * from the activity decor view to the nearest Screen or ReactRootView.
+   * This prevents the full-screen blur issue when BlurVibeView is used
+   * inside a ScrollView or with absolute positioning and zIndex.
+   */
+  private fun swapBlurRootToOptimalAncestor() {
+    val newRoot = findNearestScreenAncestor() ?: findNearestReactRootView() ?: return
 
-  fun setBlurRadius(radius: Int) {
-    blurRadiusDownscale = radius.coerceIn(1, 8)
-    applyBlur()
-  }
+    try {
+      val blurViewGroupClass = BlurViewGroup::class.java
+      val baseField = blurViewGroupClass.getDeclaredField("mBaseBlurViewGroup")
+      baseField.isAccessible = true
+      val baseBlurViewGroup = baseField.get(this) ?: return
+
+      val baseClass = BaseBlurViewGroup::class.java
 
-  // MARK: - Blur
+      val decorViewField = baseClass.getDeclaredField("mDecorView")
+      decorViewField.isAccessible = true
+      val oldDecorView = decorViewField.get(baseBlurViewGroup) as? View
+
+      val preDrawListenerField = baseClass.getDeclaredField("preDrawListener")
+      preDrawListenerField.isAccessible = true
+      val preDrawListener = preDrawListenerField.get(baseBlurViewGroup)
+        as? ViewTreeObserver.OnPreDrawListener
+
+      if (oldDecorView != null && preDrawListener != null) {
+        // Remove listener from old root
+        oldDecorView.viewTreeObserver.removeOnPreDrawListener(preDrawListener)
+
+        // Set new root
+        decorViewField.set(baseBlurViewGroup, newRoot)
+
+        // Add listener to new root
+        newRoot.viewTreeObserver.addOnPreDrawListener(preDrawListener)
+
+        // Update mDifferentRoot flag
+        val differentRootField = baseClass.getDeclaredField("mDifferentRoot")
+        differentRootField.isAccessible = true
+        differentRootField.setBoolean(baseBlurViewGroup, newRoot.rootView != this.rootView)
+
+        // Force redraw
+        val forceRedrawField = baseClass.getDeclaredField("mForceRedraw")
+        forceRedrawField.isAccessible = true
+        forceRedrawField.setBoolean(baseBlurViewGroup, true)
+      }
+    } catch (e: Exception) {
+      // Reflection failed — QmBlurView internals changed
+      // Fall back gracefully to default decor view blur root
+    }
+  }
 
-  private fun applyBlur() {
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
-      applyRenderEffect()
-    } else {
-      post { renderScriptBlur() }
+  private fun findNearestScreenAncestor(): ViewGroup? {
+    var current = parent
+    while (current != null) {
+      if (current.javaClass.name == "com.swmansion.rnscreens.Screen") {
+        return current as? ViewGroup
+      }
+      current = current.parent
     }
-    updateOverlay()
+    return null
   }
 
-  private fun applyRenderEffect() {
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
-      val sigma = (blurAmountValue * 0.5f).coerceAtLeast(0.01f)
-      setRenderEffect(
-        RenderEffect.createBlurEffect(sigma, sigma, Shader.TileMode.MIRROR)
-      )
+  private fun findNearestReactRootView(): ViewGroup? {
+    var current = parent
+    while (current != null) {
+      if (current.javaClass.name == "com.facebook.react.ReactRootView") {
+        return current as? ViewGroup
+      }
+      current = current.parent
     }
+    return null
   }
 
-  @Suppress("DEPRECATION")
-  private fun renderScriptBlur() {
-    val parentView = parent as? ViewGroup ?: return
-    if (width <= 0 || height <= 0) return
+  private fun initializeBlur() {
+    if (isBlurInitialized) return
     try {
-      val scaledW = (width / blurRadiusDownscale).coerceAtLeast(1)
-      val scaledH = (height / blurRadiusDownscale).coerceAtLeast(1)
-      val bitmap = Bitmap.createBitmap(scaledW, scaledH, Bitmap.Config.ARGB_8888)
-      val canvas = Canvas(bitmap)
-      canvas.scale(1f / blurRadiusDownscale, 1f / blurRadiusDownscale)
-      canvas.translate(-left.toFloat(), -top.toFloat())
-      parentView.draw(canvas)
-
-      val rs = RenderScript.create(context)
-      val input = Allocation.createFromBitmap(rs, bitmap)
-      val output = Allocation.createTyped(rs, input.type)
-      val script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs))
-      val sigma = (blurAmountValue / 100f * 25f).coerceIn(1f, 25f)
-      script.setRadius(sigma)
-      script.setInput(input)
-      script.forEach(output)
-      output.copyTo(bitmap)
-      rs.destroy()
-
-      background = android.graphics.drawable.BitmapDrawable(resources, bitmap)
+      super.setBlurRadius(currentBlurRadius)
+      super.setOverlayColor(currentOverlayColor)
+      updateCornerRadius()
+      isBlurInitialized = true
     } catch (e: Exception) {
-      setBackgroundColor(fallbackColorValue)
+      // Ignore — view may not be fully attached yet
     }
   }
 
-  // MARK: - Overlay
+  // MARK: - Public setters
 
-  private fun updateOverlay() {
-    overlayView.setBackgroundColor(overlayColorValue)
-    bringChildToFront(overlayView)
-    for (i in 0 until childCount) {
-      val child = getChildAt(i)
-      if (child !== overlayView) bringChildToFront(child)
-    }
+  fun setBlurAmount(amount: Float) {
+    currentBlurRadius = mapBlurAmountToRadius(amount)
+    try { super.setBlurRadius(currentBlurRadius) } catch (e: Exception) {}
+  }
+
+  fun setOverlayColor(colorString: String?) {
+    currentOverlayColor = parseHexColor(colorString ?: "transparent") ?: Color.TRANSPARENT
+    try {
+      super.setBackgroundColor(currentOverlayColor)
+      super.setOverlayColor(currentOverlayColor)
+    } catch (e: Exception) {}
+  }
+
+  fun setReducedTransparencyFallbackColor(colorString: String?) {
+    // Stored for future use — QmBlurView handles accessibility fallback internally
+  }
+
+  fun setBlurRadius(radius: Int) {
+    // blurRadius is the Android downscale factor — map to QmBlurView's downsample factor
+    val downsample = radius.coerceIn(1, 8).toFloat()
+    try { super.setDownsampleFactor(downsample) } catch (e: Exception) {}
   }
 
-  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
-    super.onLayout(changed, l, t, r, b)
-    if (changed && Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
-      post { renderScriptBlur() }
+  fun setBorderRadius(radius: Float) {
+    currentCornerRadius = radius
+    updateCornerRadius()
+  }
+
+  private fun updateCornerRadius() {
+    val radiusPx = TypedValue.applyDimension(
+      TypedValue.COMPLEX_UNIT_DIP,
+      currentCornerRadius,
+      context.resources.displayMetrics
+    )
+    outlineProvider = object : ViewOutlineProvider() {
+      override fun getOutline(view: View, outline: Outline) {
+        outline.setRoundRect(0, 0, view.width, view.height, radiusPx)
+      }
     }
+    clipToOutline = true
+    try { super.setCornerRadius(radiusPx) } catch (e: Exception) {}
+  }
+
+  // React Native handles layout — prevent superclass from interfering
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    // No-op: layout handled by React Native's Yoga engine
   }
 
   // MARK: - Color parser
   // Supports: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
-  // Returns null if unparseable (caller uses fallback)
   private fun parseHexColor(colorString: String): Int? {
     val s = colorString.trim()
     if (s.equals("transparent", ignoreCase = true)) return Color.TRANSPARENT
-    if (!s.startsWith("#")) return null
-
+    if (!s.startsWith("#")) {
+      return try { s.toColorInt() } catch (e: Exception) { null }
+    }
     val hex = s.removePrefix("#")
     return try {
       when (hex.length) {
-        3 -> { // #RGB → #RRGGBB
-          val r = hex[0].toString().repeat(2).toInt(16)
-          val g = hex[1].toString().repeat(2).toInt(16)
-          val b = hex[2].toString().repeat(2).toInt(16)
-          Color.argb(255, r, g, b)
-        }
-        6 -> { // #RRGGBB
-          val r = hex.substring(0, 2).toInt(16)
-          val g = hex.substring(2, 4).toInt(16)
-          val b = hex.substring(4, 6).toInt(16)
-          Color.argb(255, r, g, b)
-        }
-        8 -> { // #RRGGBBAA — note: AA is alpha, last two digits
-          val r = hex.substring(0, 2).toInt(16)
-          val g = hex.substring(2, 4).toInt(16)
-          val b = hex.substring(4, 6).toInt(16)
-          val a = hex.substring(6, 8).toInt(16)
-          Color.argb(a, r, g, b)
-        }
+        3 -> Color.argb(
+          255,
+          hex[0].toString().repeat(2).toInt(16),
+          hex[1].toString().repeat(2).toInt(16),
+          hex[2].toString().repeat(2).toInt(16)
+        )
+        6 -> Color.argb(
+          255,
+          hex.substring(0, 2).toInt(16),
+          hex.substring(2, 4).toInt(16),
+          hex.substring(4, 6).toInt(16)
+        )
+        8 -> Color.argb(
+          hex.substring(6, 8).toInt(16), // AA is last in #RRGGBBAA
+          hex.substring(0, 2).toInt(16),
+          hex.substring(2, 4).toInt(16),
+          hex.substring(4, 6).toInt(16)
+        )
         else -> null
       }
-    } catch (e: NumberFormatException) {
-      null
-    }
+    } catch (e: NumberFormatException) { null }
   }
 }

package/android/src/main/java/com/blurvibe/BlurVibeViewManager.kt

@@ -1,44 +1,50 @@
 package com.blurvibe
 
-import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
 
-class BlurVibeViewManager : SimpleViewManager<BlurVibeView>() {
+/**
+ * BlurVibeViewManager
+ *
+ * ViewGroupManager — BlurVibeView (which extends BlurViewGroup/FrameLayout)
+ * hosts React children, so we must use ViewGroupManager, not SimpleViewManager.
+ */
+class BlurVibeViewManager : ViewGroupManager<BlurVibeView>() {
 
   override fun getName() = "BlurVibeView"
 
   override fun createViewInstance(context: ThemedReactContext) = BlurVibeView(context)
 
-  // Float — matches TS codegen Float type ✅
   @ReactProp(name = "blurAmount", defaultFloat = 10f)
   fun setBlurAmount(view: BlurVibeView, amount: Float) {
     view.setBlurAmount(amount)
   }
 
-  // String — matches TS codegen string type ✅ (no-op on Android)
   @ReactProp(name = "blurType")
   fun setBlurType(view: BlurVibeView, type: String?) {
-    // No-op on Android — blurType is iOS UIBlurEffectStyle only
+    // No-op on Android — blurType maps to iOS UIBlurEffectStyle only
   }
 
-  // String — matches TS codegen string type ✅
-  // We parse hex manually in BlurVibeView for full alpha control
-  // Do NOT use Int with customType="Color" — RN reorders alpha bytes unexpectedly
   @ReactProp(name = "overlayColor")
   fun setOverlayColor(view: BlurVibeView, color: String?) {
-    view.setOverlayColor(color ?: "transparent")
+    view.setOverlayColor(color)
   }
 
-  // String — matches TS codegen string type ✅
   @ReactProp(name = "reducedTransparencyFallbackColor")
   fun setReducedTransparencyFallbackColor(view: BlurVibeView, color: String?) {
-    view.setReducedTransparencyFallbackColor(color ?: "#F2F2F2")
+    view.setReducedTransparencyFallbackColor(color)
   }
 
-  // Int32 — matches TS codegen Int32 type ✅
   @ReactProp(name = "blurRadius", defaultInt = 4)
   fun setBlurRadius(view: BlurVibeView, radius: Int) {
     view.setBlurRadius(radius)
   }
+
+  override fun onDropViewInstance(view: BlurVibeView) {
+    super.onDropViewInstance(view)
+  }
+
+  // React Native's Yoga handles child layout — return false
+  override fun needsCustomLayoutForChildren(): Boolean = false
 }

package/ios/BlurVibeView.swift

@@ -1,92 +1,106 @@
+// BlurVibeView.swift
+// UIKit wrapper that hosts the SwiftUI blur view via UIHostingController.
+// Approach mirrors sbaiahmed1/react-native-blur's AdvancedBlurView.
+
+import SwiftUI
 import UIKit
 
 @objc(BlurVibeView)
 class BlurVibeView: UIView {
 
-  // MARK: - Private Views
-  private var blurEffectView: UIVisualEffectView?
-  private let overlayView = UIView()
+  // MARK: - Private
 
-  // MARK: - Props
+  private var hostingController: UIHostingController<BlurVibeSwiftUIView>?
 
-  /// Blur intensity 0–100. Maps to UIBlurEffect intensity via animator.
-  @objc var blurAmount: NSNumber = 10 { didSet { updateBlur() } }
+  // MARK: - Props
 
-  /// iOS blur style — maps to UIBlurEffectStyle
-  @objc var blurType: NSString = "light" { didSet { updateBlur() } }
+  @objc var blurAmount: NSNumber = 10 { didSet { updateView() } }
+  @objc var blurType: NSString = "light" { didSet { updateView() } }
 
-  /// Overlay color on top of blur. Works on iOS AND Android.
-  /// Alpha controls blur visibility — like CSS backdrop-filter + background-color.
-  /// Supports: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
-  @objc var overlayColor: NSString = "transparent" { didSet { updateOverlay() } }
+  /// Hex overlay color on top of blur — works on iOS AND Android.
+  /// "#00000000" = transparent (pure blur), "#00000080" = tinted blur
+  @objc var overlayColor: NSString = "transparent" { didSet { updateView() } }
 
-  /// Fallback color when Reduce Transparency is enabled.
-  @objc var reducedTransparencyFallbackColor: NSString = "#F2F2F2" { didSet { updateBlur() } }
+  @objc var reducedTransparencyFallbackColor: NSString = "#F2F2F2" { didSet { updateView() } }
 
-  /// Android-only downscale factor. Accepted on iOS to avoid prop warning — no-op.
+  /// Android-only downscale factor — accepted here as no-op to avoid prop warning
   @objc var blurRadius: NSNumber = 4
 
   // MARK: - Init
-  override init(frame: CGRect) { super.init(frame: frame); commonInit() }
-  required init?(coder: NSCoder) { super.init(coder: coder); commonInit() }
 
-  private func commonInit() {
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    backgroundColor = .clear
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
     backgroundColor = .clear
-    clipsToBounds = true
-    overlayView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
-    overlayView.isUserInteractionEnabled = false
-    updateBlur()
   }
 
   // MARK: - Layout
+
   override func layoutSubviews() {
     super.layoutSubviews()
-    blurEffectView?.frame = bounds
-    overlayView.frame = bounds
-    bringSubviewToFront(overlayView)
-    for subview in subviews where subview !== blurEffectView && subview !== overlayView {
-      bringSubviewToFront(subview)
+    // Defer hosting controller setup until we have a valid frame
+    // Prevents issues with initial render in complex layouts (e.g. FlashList)
+    if hostingController == nil && bounds.width > 0 && bounds.height > 0 {
+      setupHostingController()
+    } else {
+      hostingController?.view.frame = bounds
     }
   }
 
-  // MARK: - Blur
-  private func updateBlur() {
-    if UIAccessibility.isReduceTransparencyEnabled {
-      blurEffectView?.removeFromSuperview()
-      blurEffectView = nil
-      backgroundColor = parseColor(reducedTransparencyFallbackColor as String)
-        ?? UIColor(white: 0.95, alpha: 1)
-      return
+  // MARK: - Hosting Controller
+
+  private func setupHostingController() {
+    // Remove existing hosting controller cleanly
+    if let old = hostingController {
+      old.view.removeFromSuperview()
+      old.removeFromParent()
     }
-    backgroundColor = .clear
-    let effect = UIBlurEffect(style: blurEffectStyle(for: blurType as String))
-    if let existing = blurEffectView {
-      existing.effect = effect
+    hostingController = nil
+
+    let swiftUIView = makeSwiftUIView()
+    let hosting = UIHostingController(rootView: swiftUIView)
+    hosting.view.backgroundColor = .clear
+    hosting.view.frame = bounds
+    hosting.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+
+    // Insert at index 0 — stays behind React children
+    if !subviews.isEmpty {
+      insertSubview(hosting.view, at: 0)
     } else {
-      let newBlurView = UIVisualEffectView(effect: effect)
-      newBlurView.frame = bounds
-      newBlurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
-      blurEffectView = newBlurView
-      insertSubview(newBlurView, at: 0)
-    }
-    if overlayView.superview == nil {
-      insertSubview(overlayView, aboveSubview: blurEffectView!)
+      addSubview(hosting.view)
     }
-    updateOverlay()
+
+    hostingController = hosting
   }
 
-  private func updateOverlay() {
-    let colorString = overlayColor as String
-    if colorString.lowercased() == "transparent" {
-      overlayView.backgroundColor = .clear
-    } else {
-      overlayView.backgroundColor = parseColor(colorString) ?? .clear
+  private func updateView() {
+    if let hosting = hostingController {
+      // Update root view without recreating the controller — avoids jank
+      hosting.rootView = makeSwiftUIView()
+    } else if bounds.width > 0 && bounds.height > 0 {
+      setupHostingController()
     }
   }
 
+  private func makeSwiftUIView() -> BlurVibeSwiftUIView {
+    return BlurVibeSwiftUIView(
+      blurAmount: Double(truncating: blurAmount),
+      blurStyle: blurStyleFromString(blurType as String),
+      overlayColor: parseColor(overlayColor as String) ?? .clear,
+      reducedTransparencyFallbackColor: parseColor(reducedTransparencyFallbackColor as String)
+        ?? UIColor(white: 0.95, alpha: 1)
+    )
+  }
+
   // MARK: - Blur Style Map
-  private func blurEffectStyle(for type: String) -> UIBlurEffect.Style {
+
+  private func blurStyleFromString(_ type: String) -> UIBlurEffect.Style {
     switch type {
+    case "xlight":                         return .extraLight
     case "dark":                           return .dark
     case "extraLight":                     return .extraLight
     case "regular":                        return .regular
@@ -111,34 +125,61 @@ class BlurVibeView: UIView {
   }
 
   // MARK: - Color Parser
-  // Supports: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
+  // Supports: "transparent", named colors, "#RGB", "#RRGGBB", "#RRGGBBAA"
+
   private func parseColor(_ colorString: String) -> UIColor? {
+    let s = colorString.trimmingCharacters(in: .whitespacesAndNewlines).lowercased()
+
+    // Named colors
+    let namedColors: [String: UIColor] = [
+      "transparent": .clear, "clear": .clear,
+      "white": .white, "black": .black,
+      "red": .red, "green": .green, "blue": .blue,
+      "gray": .gray, "grey": .gray,
+    ]
+    if let named = namedColors[s] { return named }
+
+    // Hex colors
     var hex = colorString.trimmingCharacters(in: .whitespacesAndNewlines)
     guard hex.hasPrefix("#") else { return nil }
     hex.removeFirst()
+
+    // Validate hex chars
+    let validHex = CharacterSet(charactersIn: "0123456789ABCDEFabcdef")
+    guard hex.unicodeScalars.allSatisfy({ validHex.contains($0) }) else { return nil }
+
     var rgbValue: UInt64 = 0
     Scanner(string: hex).scanHexInt64(&rgbValue)
+
     switch hex.count {
-    case 3: // #RGB
-      return UIColor(
-        red:   CGFloat((rgbValue & 0xF00) >> 8) / 15,
-        green: CGFloat((rgbValue & 0x0F0) >> 4) / 15,
-        blue:  CGFloat( rgbValue & 0x00F       ) / 15,
-        alpha: 1)
+    case 3: // #RGB → expand
+      let r = (rgbValue & 0xF00) >> 8; let g = (rgbValue & 0x0F0) >> 4; let b = rgbValue & 0x00F
+      return UIColor(red: CGFloat(r | (r << 4)) / 255, green: CGFloat(g | (g << 4)) / 255,
+                     blue: CGFloat(b | (b << 4)) / 255, alpha: 1)
+    case 4: // #RGBA → expand
+      let r = (rgbValue & 0xF000) >> 12; let g = (rgbValue & 0x0F00) >> 8
+      let b = (rgbValue & 0x00F0) >> 4; let a = rgbValue & 0x000F
+      return UIColor(red: CGFloat(r | (r << 4)) / 255, green: CGFloat(g | (g << 4)) / 255,
+                     blue: CGFloat(b | (b << 4)) / 255, alpha: CGFloat(a | (a << 4)) / 255)
     case 6: // #RRGGBB
-      return UIColor(
-        red:   CGFloat((rgbValue & 0xFF0000) >> 16) / 255,
-        green: CGFloat((rgbValue & 0x00FF00) >>  8) / 255,
-        blue:  CGFloat( rgbValue & 0x0000FF        ) / 255,
-        alpha: 1)
+      return UIColor(red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255,
+                     green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255,
+                     blue: CGFloat(rgbValue & 0x0000FF) / 255, alpha: 1)
     case 8: // #RRGGBBAA
-      return UIColor(
-        red:   CGFloat((rgbValue & 0xFF000000) >> 24) / 255,
-        green: CGFloat((rgbValue & 0x00FF0000) >> 16) / 255,
-        blue:  CGFloat((rgbValue & 0x0000FF00) >>  8) / 255,
-        alpha: CGFloat( rgbValue & 0x000000FF        ) / 255)
+      return UIColor(red: CGFloat((rgbValue & 0xFF000000) >> 24) / 255,
+                     green: CGFloat((rgbValue & 0x00FF0000) >> 16) / 255,
+                     blue: CGFloat((rgbValue & 0x0000FF00) >> 8) / 255,
+                     alpha: CGFloat(rgbValue & 0x000000FF) / 255)
     default:
       return nil
     }
   }
+
+  // MARK: - Cleanup
+
+  deinit {
+    hostingController?.view.removeFromSuperview()
+    hostingController?.removeFromParent()
+    hostingController = nil
+  }
 }

package/ios/BlurVibeViewManager.m

@@ -3,8 +3,17 @@
 
 RCT_EXTERN_MODULE(BlurVibeViewManager, RCTViewManager)
 
+// Float  → NSNumber  matches TS Float 
 RCT_EXPORT_VIEW_PROPERTY(blurAmount, NSNumber)
+
+// String → NSString  matches TS string 
 RCT_EXPORT_VIEW_PROPERTY(blurType, NSString)
+
+// String → NSString  matches TS string 
 RCT_EXPORT_VIEW_PROPERTY(overlayColor, NSString)
+
+// String → NSString  matches TS string 
 RCT_EXPORT_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString)
+
+// Int32  → NSNumber  matches TS Int32  (no-op in Swift)
 RCT_EXPORT_VIEW_PROPERTY(blurRadius, NSNumber)

package/ios/BlurVibeViewManager.swift

@@ -1,5 +1,11 @@
 import Foundation
 
+/**
+ * BlurVibeViewManager
+ *
+ * RCTViewManager subclass — registers BlurVibeView with React Native.
+ * requiresMainQueueSetup = true because we create UIKit views.
+ */
 @objc(BlurVibeViewManager)
 class BlurVibeViewManager: RCTViewManager {
 
@@ -10,8 +16,4 @@ class BlurVibeViewManager: RCTViewManager {
   override static func requiresMainQueueSetup() -> Bool {
     return true
   }
-
-  @objc override func constantsToExport() -> [AnyHashable: Any]! {
-    return [:]
-  }
 }

package/ios/Views/BlurEffectView.swift

@@ -0,0 +1,85 @@
+// BlurEffectView.swift
+// UIVisualEffectView with UIViewPropertyAnimator for custom blur intensity.
+// This is the ONLY correct way to achieve custom blur radius on iOS.
+// UIBlurEffect itself ignores any custom intensity — the animator interpolates it.
+
+import SwiftUI
+import UIKit
+
+// MARK: - UIKit blur with custom intensity
+
+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) {
+    // Skip expensive animator recreation when nothing changed
+    guard style != self.blurStyle || intensity != self.intensity else { return }
+    self.blurStyle = style
+    self.intensity = intensity
+    setupBlur()
+  }
+
+  override func didMoveToWindow() {
+    super.didMoveToWindow()
+    guard window != nil else { return }
+    // UIKit resumes paused CAAnimations when view re-joins a window.
+    // Re-pause and re-lock the fraction to prevent blur drifting to full intensity.
+    animator?.pauseAnimation()
+    animator?.fractionComplete = intensity
+  }
+
+  private func setupBlur() {
+    if let existing = animator, existing.state == .active {
+      existing.stopAnimation(true)
+    }
+    animator = nil
+    effect = nil
+
+    let newAnimator = UIViewPropertyAnimator(duration: 1, curve: .linear)
+    newAnimator.addAnimations { [weak self] in
+      self?.effect = UIBlurEffect(style: self?.blurStyle ?? .systemMaterial)
+    }
+    // pausesOnCompletion: keeps animator .active even at fraction 1.0
+    // so didMoveToWindow can always safely call pauseAnimation()
+    newAnimator.pausesOnCompletion = true
+    newAnimator.startAnimation()
+    newAnimator.pauseAnimation()
+    newAnimator.fractionComplete = intensity
+    animator = newAnimator
+  }
+
+  deinit {
+    if let animator = animator, animator.state == .active {
+      animator.stopAnimation(true)
+    }
+  }
+}
+
+// MARK: - SwiftUI wrapper for BlurEffectView
+
+struct BlurVibeEffect: UIViewRepresentable {
+  var style: UIBlurEffect.Style = .systemMaterial
+  var intensity: Double = 1.0
+
+  func makeUIView(context: Context) -> BlurEffectView {
+    let view = BlurEffectView(effect: nil)
+    view.updateBlur(style: style, intensity: intensity)
+    return view
+  }
+
+  func updateUIView(_ uiView: BlurEffectView, context: Context) {
+    uiView.updateBlur(style: style, intensity: intensity)
+  }
+}

package/ios/Views/BlurVibeSwiftUIView.swift

@@ -0,0 +1,46 @@
+// BlurVibeSwiftUIView.swift
+// SwiftUI view that composes blur effect + overlay color.
+
+import SwiftUI
+import UIKit
+
+struct BlurVibeSwiftUIView: View {
+  let blurAmount: Double
+  let blurStyle: UIBlurEffect.Style
+  let overlayColor: UIColor
+  let reducedTransparencyFallbackColor: UIColor
+
+  private let isReducedTransparencyEnabled = UIAccessibility.isReduceTransparencyEnabled
+
+  // Map 0–100 blurAmount to 0.0–1.0 animator fraction
+  private var blurIntensity: Double {
+    (blurAmount / 100.0).clamped(to: 0.0...1.0)
+  }
+
+  var body: some View {
+    if isReducedTransparencyEnabled {
+      // Accessibility: Reduce Transparency is ON — show solid fallback color
+      Rectangle()
+        .fill(Color(reducedTransparencyFallbackColor))
+    } else {
+      ZStack {
+        // Layer 1: backdrop blur (what's behind this view gets blurred)
+        BlurVibeEffect(style: blurStyle, intensity: blurIntensity)
+
+        // Layer 2: overlay color with alpha on top of blur
+        // This is our overlayColor prop — same as CSS background-color with alpha
+        // "#00000000" = transparent = pure blur shows through
+        // "#00000080" = 50% black tint over blur
+        // "#000000FF" = fully opaque = blur hidden
+        Rectangle()
+          .fill(Color(overlayColor))
+      }
+    }
+  }
+}
+
+extension Comparable {
+  func clamped(to range: ClosedRange<Self>) -> Self {
+    min(max(self, range.lowerBound), range.upperBound)
+  }
+}

package/ios/react-native-blur-vibe.podspec

@@ -9,13 +9,15 @@ Pod::Spec.new do |s|
   s.homepage     = package["homepage"]
   s.license      = package["license"]
   s.authors      = package["author"]
-  s.platforms    = { :ios => "13.0" }
+  s.platforms    = { :ios => "14.0" }
   s.source       = { :git => "https://github.com/I-am-Pritam-20/react-native-blur-vibe.git", :tag => "#{s.version}" }
+
+  # Include all Swift and ObjC files in ios/ and ios/Views/
   s.source_files = "ios/**/*.{h,m,mm,swift}"
+
   s.requires_arc = true
 
   s.dependency "React-Core"
 
-  # New Architecture (Fabric) support
   install_modules_dependencies(s)
 end

package/lib/commonjs/BlurVibeViewNativeComponent.ts

@@ -1,14 +1,37 @@
-// @ts-ignore - codegenNativeComponent is available at runtime in RN 0.71+
+// @ts-ignore - internal RN path, exists at runtime
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { HostComponent, ViewProps } from 'react-native';
-// @ts-ignore - CodegenTypes available at runtime
+// @ts-ignore - internal RN path, exists at runtime
 import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 
+/**
+ * NativeComponent codegen spec for BlurVibeView.
+ *
+ * Type mapping (JS → Native):
+ *   Float   → NSNumber (iOS) / Float (Android)
+ *   string  → NSString (iOS) / String (Android)
+ *   Int32   → NSNumber (iOS) / Int   (Android)
+ *
+ * Color props (overlayColor, reducedTransparencyFallbackColor) use
+ * plain `string` — NOT the RN `ColorValue` type — because we parse
+ * hex manually on both platforms for full alpha channel control.
+ * Using ColorValue would trigger RN's color normalization which
+ * reorders alpha bytes and breaks #RRGGBBAA format.
+ */
 export interface NativeBlurVibeViewProps extends ViewProps {
+  // 0–100 blur intensity
   blurAmount?: Float;
+
+  // iOS UIBlurEffectStyle name — no-op on Android
   blurType?: string;
+
+  // Hex color string with alpha — "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
   overlayColor?: string;
+
+  // Fallback when blur unavailable (Reduce Transparency / old API)
   reducedTransparencyFallbackColor?: string;
+
+  // Android downscale factor 1–8 — no-op on iOS
   blurRadius?: Int32;
 }
 

package/lib/module/BlurVibeViewNativeComponent.ts

@@ -1,14 +1,37 @@
-// @ts-ignore - codegenNativeComponent is available at runtime in RN 0.71+
+// @ts-ignore - internal RN path, exists at runtime
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { HostComponent, ViewProps } from 'react-native';
-// @ts-ignore - CodegenTypes available at runtime
+// @ts-ignore - internal RN path, exists at runtime
 import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 
+/**
+ * NativeComponent codegen spec for BlurVibeView.
+ *
+ * Type mapping (JS → Native):
+ *   Float   → NSNumber (iOS) / Float (Android)
+ *   string  → NSString (iOS) / String (Android)
+ *   Int32   → NSNumber (iOS) / Int   (Android)
+ *
+ * Color props (overlayColor, reducedTransparencyFallbackColor) use
+ * plain `string` — NOT the RN `ColorValue` type — because we parse
+ * hex manually on both platforms for full alpha channel control.
+ * Using ColorValue would trigger RN's color normalization which
+ * reorders alpha bytes and breaks #RRGGBBAA format.
+ */
 export interface NativeBlurVibeViewProps extends ViewProps {
+  // 0–100 blur intensity
   blurAmount?: Float;
+
+  // iOS UIBlurEffectStyle name — no-op on Android
   blurType?: string;
+
+  // Hex color string with alpha — "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
   overlayColor?: string;
+
+  // Fallback when blur unavailable (Reduce Transparency / old API)
   reducedTransparencyFallbackColor?: string;
+
+  // Android downscale factor 1–8 — no-op on iOS
   blurRadius?: Int32;
 }
 

package/lib/typescript/commonjs/src/BlurVibeViewNativeComponent.d.ts

@@ -1,5 +1,19 @@
 import type { HostComponent, ViewProps } from 'react-native';
 import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+/**
+ * NativeComponent codegen spec for BlurVibeView.
+ *
+ * Type mapping (JS → Native):
+ *   Float   → NSNumber (iOS) / Float (Android)
+ *   string  → NSString (iOS) / String (Android)
+ *   Int32   → NSNumber (iOS) / Int   (Android)
+ *
+ * Color props (overlayColor, reducedTransparencyFallbackColor) use
+ * plain `string` — NOT the RN `ColorValue` type — because we parse
+ * hex manually on both platforms for full alpha channel control.
+ * Using ColorValue would trigger RN's color normalization which
+ * reorders alpha bytes and breaks #RRGGBBAA format.
+ */
 export interface NativeBlurVibeViewProps extends ViewProps {
     blurAmount?: Float;
     blurType?: string;

package/lib/typescript/commonjs/src/BlurVibeViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE9E,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAC1C,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;wBAII,aAAa,CAAC,uBAAuB,CAAC;AAF3C,wBAE4C"}
+{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE9E;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IAExD,UAAU,CAAC,EAAE,KAAK,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAG1C,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;wBAII,aAAa,CAAC,uBAAuB,CAAC;AAF3C,wBAE4C"}

package/lib/typescript/module/src/BlurVibeViewNativeComponent.d.ts

@@ -1,5 +1,19 @@
 import type { HostComponent, ViewProps } from 'react-native';
 import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+/**
+ * NativeComponent codegen spec for BlurVibeView.
+ *
+ * Type mapping (JS → Native):
+ *   Float   → NSNumber (iOS) / Float (Android)
+ *   string  → NSString (iOS) / String (Android)
+ *   Int32   → NSNumber (iOS) / Int   (Android)
+ *
+ * Color props (overlayColor, reducedTransparencyFallbackColor) use
+ * plain `string` — NOT the RN `ColorValue` type — because we parse
+ * hex manually on both platforms for full alpha channel control.
+ * Using ColorValue would trigger RN's color normalization which
+ * reorders alpha bytes and breaks #RRGGBBAA format.
+ */
 export interface NativeBlurVibeViewProps extends ViewProps {
     blurAmount?: Float;
     blurType?: string;

package/lib/typescript/module/src/BlurVibeViewNativeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE9E,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAC1C,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;wBAII,aAAa,CAAC,uBAAuB,CAAC;AAF3C,wBAE4C"}
+{"version":3,"file":"BlurVibeViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../../src/BlurVibeViewNativeComponent.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAE9E;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IAExD,UAAU,CAAC,EAAE,KAAK,CAAC;IAGnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAG1C,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB;wBAII,aAAa,CAAC,uBAAuB,CAAC;AAF3C,wBAE4C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-blur-vibe",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "React Native package implementing Blur View in iOS and Android",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",

package/src/BlurVibeViewNativeComponent.ts

@@ -1,14 +1,37 @@
-// @ts-ignore - codegenNativeComponent is available at runtime in RN 0.71+
+// @ts-ignore - internal RN path, exists at runtime
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { HostComponent, ViewProps } from 'react-native';
-// @ts-ignore - CodegenTypes available at runtime
+// @ts-ignore - internal RN path, exists at runtime
 import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 
+/**
+ * NativeComponent codegen spec for BlurVibeView.
+ *
+ * Type mapping (JS → Native):
+ *   Float   → NSNumber (iOS) / Float (Android)
+ *   string  → NSString (iOS) / String (Android)
+ *   Int32   → NSNumber (iOS) / Int   (Android)
+ *
+ * Color props (overlayColor, reducedTransparencyFallbackColor) use
+ * plain `string` — NOT the RN `ColorValue` type — because we parse
+ * hex manually on both platforms for full alpha channel control.
+ * Using ColorValue would trigger RN's color normalization which
+ * reorders alpha bytes and breaks #RRGGBBAA format.
+ */
 export interface NativeBlurVibeViewProps extends ViewProps {
+  // 0–100 blur intensity
   blurAmount?: Float;
+
+  // iOS UIBlurEffectStyle name — no-op on Android
   blurType?: string;
+
+  // Hex color string with alpha — "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
   overlayColor?: string;
+
+  // Fallback when blur unavailable (Reduce Transparency / old API)
   reducedTransparencyFallbackColor?: string;
+
+  // Android downscale factor 1–8 — no-op on iOS
   blurRadius?: Int32;
 }