react-native-blur-vibe 0.1.1 → 0.1.2

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,16 +17,19 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 
 /**
- * BlurVibeView — Android implementation
+ * BlurVibeView
  *
- * API 31+  : RenderEffect (hardware accelerated)
- * API 24-30: RenderScript (built-in SDK, no extra dep)
+ * 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
  *
- * Color props (overlayColor, reducedTransparencyFallbackColor) are
- * received as hex strings from JS and parsed manually here.
- * This gives full control over alpha channel handling.
+ * Blur strategy:
+ *   API 31+  → RenderEffect (hardware accelerated, no bitmap)
+ *   API 24-30 → RenderScript (bitmap-based, built into Android SDK)
  *
- * Supports: "#RGB" "#RRGGBB" "#RRGGBBAA" "transparent"
+ * Color props received as hex strings from JS, parsed manually.
+ * Supports: "transparent", "#RGB", "#RRGGBB", "#RRGGBBAA"
  */
 @SuppressLint("NewApi")
 class BlurVibeView(context: Context) : FrameLayout(context) {
@@ -38,33 +41,58 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
   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: - Public setters (called by ViewManager)
+  // 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(colorString: String) {
-    overlayColorValue = parseHexColor(colorString) ?: Color.TRANSPARENT
-    updateOverlay()
+  fun setOverlayColor(colorString: String?) {
+    overlayColorValue = parseHexColor(colorString ?: "transparent") ?: Color.TRANSPARENT
+    overlayView.setBackgroundColor(overlayColorValue)
   }
 
-  fun setReducedTransparencyFallbackColor(colorString: String) {
-    fallbackColorValue = parseHexColor(colorString) ?: Color.parseColor("#F2F2F2")
+  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
@@ -75,7 +103,6 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
     } else {
       post { renderScriptBlur() }
     }
-    updateOverlay()
   }
 
   private fun applyRenderEffect() {
@@ -117,17 +144,6 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
     }
   }
 
-  // MARK: - Overlay
-
-  private fun updateOverlay() {
-    overlayView.setBackgroundColor(overlayColorValue)
-    bringChildToFront(overlayView)
-    for (i in 0 until childCount) {
-      val child = getChildAt(i)
-      if (child !== overlayView) bringChildToFront(child)
-    }
-  }
-
   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) {
@@ -135,36 +151,33 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
     }
   }
 
-  // MARK: - Color parser
+  // MARK: - Hex 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
-
     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), // 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) {

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

@@ -1,42 +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 codegen Float type ✅
+  // Float — matches TS NativeComponent Float 
   @ReactProp(name = "blurAmount", defaultFloat = 10f)
   fun setBlurAmount(view: BlurVibeView, amount: Float) {
     view.setBlurAmount(amount)
   }
 
-  // String — matches TS codegen string type ✅ (no-op on Android)
+  // 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 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
+  // String — matches TS NativeComponent string 
+  // Parsed as hex in BlurVibeView — no customType="Color" needed
   @ReactProp(name = "overlayColor")
   fun setOverlayColor(view: BlurVibeView, color: String?) {
-    view.setOverlayColor(color ?: "transparent")
+    view.setOverlayColor(color)
   }
 
-  // String — matches TS codegen string type ✅
+  // String — matches TS NativeComponent string 
   @ReactProp(name = "reducedTransparencyFallbackColor")
   fun setReducedTransparencyFallbackColor(view: BlurVibeView, color: String?) {
-    view.setReducedTransparencyFallbackColor(color ?: "#F2F2F2")
+    view.setReducedTransparencyFallbackColor(color)
   }
 
-  // Int32 — matches TS codegen Int32 type ✅
+  // Int — matches TS NativeComponent Int32 
   @ReactProp(name = "blurRadius", defaultInt = 4)
   fun setBlurRadius(view: BlurVibeView, radius: Int) {
     view.setBlurRadius(radius)

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/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.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;
 }