react-native-blur-vibe 0.1.0 → 0.1.2

package/README.md

@@ -1,9 +1,11 @@
-# react-native-blur-vibe
- 
-A modern, actively maintained blur view for React Native. Works on **iOS** and **Android** with full New Architecture (Fabric) support.
+# React Native Blur-Vibe
+
+<img width="1500" height="500" alt="github-banner" src="https://github.com/user-attachments/assets/78b2e5ec-5b57-48c0-b984-69cb57cbcf26" />
+<br></br>
+A modern, actively maintained blur view for React Native. Works on <b>iOS</b> and <b>Android</b> with full New Architecture (Fabric) support.
  
 > The key difference from other blur libraries: `overlayColor` works on **both iOS and Android** — letting you control blur visibility the same way CSS `backdrop-filter` + `background-color` works on the web.
- 
+ <br></br>
 [![npm version](https://img.shields.io/npm/v/react-native-blur-vibe)](https://www.npmjs.com/package/react-native-blur-vibe)
 [![Build iOS](https://github.com/I-am-Pritam-20/react-native-blur-vibe/actions/workflows/build-ios.yml/badge.svg)](https://github.com/I-am-Pritam-20/react-native-blur-vibe/actions/workflows/build-ios.yml)
 [![Build Android](https://github.com/I-am-Pritam-20/react-native-blur-vibe/actions/workflows/build-android.yml/badge.svg)](https://github.com/I-am-Pritam-20/react-native-blur-vibe/actions/workflows/build-android.yml)
@@ -46,6 +48,20 @@ The `overlayColor` alpha channel is what controls blur visibility:
 **This works on both iOS and Android.** Not just Android like other libraries.
  
 ---
+
+<details>
+  <summary><h3>Screenshots (Expand to see)</h3></summary>
+  <table>
+  <tr>
+    <td align="center"> <h3>Android</h3>
+      <img width="244" height="462" alt="Android-Demo" src="https://github.com/user-attachments/assets/e1cd120e-1ce1-4bba-aef1-4182aa023fbb" />
+    </td>
+    <td align="center"> <h3>iOS</h3>
+      <img width="244" height="462" alt="iPhone-Demo" src="https://github.com/user-attachments/assets/4b8ad035-d2ff-471e-b3e6-a645c87ea066" />
+    </td>
+  </tr>
+</table>
+</details>
  
 ## Installation
  

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

@@ -17,13 +17,19 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 
 /**
- * BlurVibeView — Android implementation
+ * BlurVibeView
  *
- * API 31+ : RenderEffect (hardware accelerated)
- * API 24-30: RenderScript (built into Android SDK, no extra dep needed)
+ * Extends FrameLayout — required because:
+ *   1. We host children (overlay view + React children)
+ *   2. ViewGroupManager (used in manager) requires a ViewGroup subclass
+ *   3. SimpleViewManager cast to IViewGroupManager would crash
  *
- * overlayColor sits on top of blur — like CSS:
- *   backdrop-filter: blur(Xpx) + background-color: overlayColor
+ * Blur strategy:
+ *   API 31+  → RenderEffect (hardware accelerated, no bitmap)
+ *   API 24-30 → RenderScript (bitmap-based, built into Android SDK)
+ *
+ * Color props received as hex strings from JS, parsed manually.
+ * Supports: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
  */
 @SuppressLint("NewApi")
 class BlurVibeView(context: Context) : FrameLayout(context) {
@@ -31,44 +37,72 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
   private val overlayView = View(context)
   private var blurAmountValue: Float = 10f
   private var overlayColorValue: Int = Color.TRANSPARENT
-  private var reducedTransparencyFallbackColorValue: Int = Color.parseColor("#F2F2F2")
+  private var fallbackColorValue: Int = Color.parseColor("#F2F2F2")
   private var blurRadiusDownscale: Int = 4
 
   init {
-    setWillNotDraw(false)
-    overlayView.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+    // overlayView fills entire frame, sits above blur, below React children
+    overlayView.layoutParams = LayoutParams(
+      LayoutParams.MATCH_PARENT,
+      LayoutParams.MATCH_PARENT
+    )
     overlayView.isClickable = false
     overlayView.isFocusable = false
-    addView(overlayView)
-    applyBlur()
+    // Add overlay as first child — React children added later will be on top
+    super.addView(overlayView, 0)
+  }
+
+  // MARK: - React child management
+  // Must override to ensure React children go ABOVE our overlay view
+
+  override fun addView(child: View, index: Int) {
+    if (child === overlayView) {
+      super.addView(child, index)
+      return
+    }
+    // React children always go on top of overlay
+    super.addView(child, childCount)
   }
 
+  override fun addView(child: View) {
+    if (child === overlayView) {
+      super.addView(child)
+      return
+    }
+    super.addView(child, childCount)
+  }
+
+  // MARK: - Setters (called by BlurVibeViewManager)
+
   fun setBlurAmount(amount: Float) {
     blurAmountValue = amount.coerceIn(0f, 100f)
     applyBlur()
   }
 
-  fun setOverlayColor(color: Int) {
-    overlayColorValue = color
-    updateOverlay()
+  fun setOverlayColor(colorString: String?) {
+    overlayColorValue = parseHexColor(colorString ?: "transparent") ?: Color.TRANSPARENT
+    overlayView.setBackgroundColor(overlayColorValue)
   }
 
-  fun setReducedTransparencyFallbackColor(color: Int) {
-    reducedTransparencyFallbackColorValue = color
+  fun setReducedTransparencyFallbackColor(colorString: String?) {
+    fallbackColorValue = parseHexColor(colorString ?: "#F2F2F2") ?: Color.parseColor("#F2F2F2")
   }
 
   fun setBlurRadius(radius: Int) {
     blurRadiusDownscale = radius.coerceIn(1, 8)
-    applyBlur()
+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
+      post { renderScriptBlur() }
+    }
   }
 
+  // MARK: - Blur
+
   private fun applyBlur() {
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
       applyRenderEffect()
     } else {
       post { renderScriptBlur() }
     }
-    updateOverlay()
   }
 
   private fun applyRenderEffect() {
@@ -106,16 +140,7 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
 
       background = android.graphics.drawable.BitmapDrawable(resources, bitmap)
     } catch (e: Exception) {
-      setBackgroundColor(reducedTransparencyFallbackColorValue)
-    }
-  }
-
-  private fun updateOverlay() {
-    overlayView.setBackgroundColor(overlayColorValue)
-    bringChildToFront(overlayView)
-    for (i in 0 until childCount) {
-      val child = getChildAt(i)
-      if (child !== overlayView) bringChildToFront(child)
+      setBackgroundColor(fallbackColorValue)
     }
   }
 
@@ -125,4 +150,38 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
       post { renderScriptBlur() }
     }
   }
+
+  // MARK: - Hex color parser
+  // Supports: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
+  private fun parseHexColor(colorString: String): Int? {
+    val s = colorString.trim()
+    if (s.equals("transparent", ignoreCase = true)) return Color.TRANSPARENT
+    if (!s.startsWith("#")) return null
+    val hex = s.removePrefix("#")
+    return try {
+      when (hex.length) {
+        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), // alpha 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
+    }
+  }
 }

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

@@ -1,35 +1,49 @@
 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
+ *
+ * Extends ViewGroupManager — NOT SimpleViewManager.
+ * Reason: BlurVibeView hosts children (overlay + React children).
+ * SimpleViewManager cast to IViewGroupManager crashes at runtime.
+ * ViewGroupManager correctly implements IViewGroupManager interface.
+ */
+class BlurVibeViewManager : ViewGroupManager<BlurVibeView>() {
 
   override fun getName() = "BlurVibeView"
 
   override fun createViewInstance(context: ThemedReactContext) = BlurVibeView(context)
 
+  // Float — matches TS NativeComponent Float 
   @ReactProp(name = "blurAmount", defaultFloat = 10f)
   fun setBlurAmount(view: BlurVibeView, amount: Float) {
     view.setBlurAmount(amount)
   }
 
+  // String — matches TS NativeComponent string  (no-op on Android)
   @ReactProp(name = "blurType")
   fun setBlurType(view: BlurVibeView, type: String?) {
-    // No-op on Android — blurType is iOS UIBlurEffectStyle only
+    // No-op — blurType maps to iOS UIBlurEffectStyle only
   }
 
+  // String — matches TS NativeComponent string 
+  // Parsed as hex in BlurVibeView — no customType="Color" needed
   @ReactProp(name = "overlayColor")
-  fun setOverlayColor(view: BlurVibeView, color: Int) {
+  fun setOverlayColor(view: BlurVibeView, color: String?) {
     view.setOverlayColor(color)
   }
 
+  // String — matches TS NativeComponent string 
   @ReactProp(name = "reducedTransparencyFallbackColor")
-  fun setReducedTransparencyFallbackColor(view: BlurVibeView, color: Int) {
+  fun setReducedTransparencyFallbackColor(view: BlurVibeView, color: String?) {
     view.setReducedTransparencyFallbackColor(color)
   }
 
+  // Int — matches TS NativeComponent Int32 
   @ReactProp(name = "blurRadius", defaultInt = 4)
   fun setBlurRadius(view: BlurVibeView, radius: Int) {
     view.setBlurRadius(radius)

package/ios/BlurVibeView.swift

@@ -7,18 +7,25 @@ class BlurVibeView: UIView {
   private var blurEffectView: UIVisualEffectView?
   private let overlayView = UIView()
 
-  // MARK: - Properties
+  // MARK: - Props
 
+  /// Blur intensity 0–100. Maps to UIBlurEffect intensity via animator.
   @objc var blurAmount: NSNumber = 10 { didSet { updateBlur() } }
+
+  /// iOS blur style — maps to UIBlurEffectStyle
   @objc var blurType: NSString = "light" { didSet { updateBlur() } }
 
-  /// Overlay color ON TOP of blur layer — works on iOS AND Android.
-  /// Alpha channel controls visibility, just like CSS:
-  ///   backdrop-filter: blur(Xpx) + background-color: overlayColor
-  /// "#00000000" = pure blur, "#00000080" = tinted blur, "#000000FF" = hidden blur
+  /// 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() } }
+
+  /// Fallback color when Reduce Transparency is enabled.
   @objc var reducedTransparencyFallbackColor: NSString = "#F2F2F2" { didSet { updateBlur() } }
 
+  /// Android-only downscale factor. Accepted on iOS to avoid prop warning — no-op.
+  @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() }
@@ -47,7 +54,8 @@ class BlurVibeView: UIView {
     if UIAccessibility.isReduceTransparencyEnabled {
       blurEffectView?.removeFromSuperview()
       blurEffectView = nil
-      backgroundColor = parseColor(reducedTransparencyFallbackColor as String) ?? UIColor(white: 0.95, alpha: 1)
+      backgroundColor = parseColor(reducedTransparencyFallbackColor as String)
+        ?? UIColor(white: 0.95, alpha: 1)
       return
     }
     backgroundColor = .clear
@@ -102,7 +110,8 @@ class BlurVibeView: UIView {
     }
   }
 
-  // MARK: - Color Parser — supports #RGB, #RRGGBB, #RRGGBBAA
+  // MARK: - Color Parser
+  // Supports: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
   private func parseColor(_ colorString: String) -> UIColor? {
     var hex = colorString.trimmingCharacters(in: .whitespacesAndNewlines)
     guard hex.hasPrefix("#") else { return nil }
@@ -110,23 +119,26 @@ class BlurVibeView: UIView {
     var rgbValue: UInt64 = 0
     Scanner(string: hex).scanHexInt64(&rgbValue)
     switch hex.count {
-    case 3:
+    case 3: // #RGB
       return UIColor(
-        red: CGFloat((rgbValue & 0xF00) >> 8) / 15,
+        red:   CGFloat((rgbValue & 0xF00) >> 8) / 15,
         green: CGFloat((rgbValue & 0x0F0) >> 4) / 15,
-        blue: CGFloat(rgbValue & 0x00F) / 15, alpha: 1)
-    case 6:
+        blue:  CGFloat( rgbValue & 0x00F       ) / 15,
+        alpha: 1)
+    case 6: // #RRGGBB
       return UIColor(
-        red: CGFloat((rgbValue & 0xFF0000) >> 16) / 255,
-        green: CGFloat((rgbValue & 0x00FF00) >> 8) / 255,
-        blue: CGFloat(rgbValue & 0x0000FF) / 255, alpha: 1)
+        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,
+        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
+        blue:  CGFloat((rgbValue & 0x0000FF00) >>  8) / 255,
+        alpha: CGFloat( rgbValue & 0x000000FF        ) / 255)
+    default:
+      return nil
     }
   }
 }

package/ios/BlurVibeViewManager.m

@@ -3,7 +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)
-RCT_EXPORT_VIEW_PROPERTY(reducedTransparencyFallbackColor, 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/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.0",
+  "version": "0.1.2",
   "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;
 }