react-native-blur-vibe 0.1.0 → 0.1.1

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/BlurVibeView.kt

@@ -19,11 +19,14 @@ import android.widget.FrameLayout
 /**
  * BlurVibeView — Android implementation
  *
- * API 31+ : RenderEffect (hardware accelerated)
- * API 24-30: RenderScript (built into Android SDK, no extra dep needed)
+ * API 31+  : RenderEffect (hardware accelerated)
+ * API 24-30: RenderScript (built-in SDK, no extra dep)
  *
- * overlayColor sits on top of blur — like CSS:
- *   backdrop-filter: blur(Xpx) + background-color: overlayColor
+ * Color props (overlayColor, reducedTransparencyFallbackColor) are
+ * received as hex strings from JS and parsed manually here.
+ * This gives full control over alpha channel handling.
+ *
+ * Supports: "#RGB" "#RRGGBB" "#RRGGBBAA" "transparent"
  */
 @SuppressLint("NewApi")
 class BlurVibeView(context: Context) : FrameLayout(context) {
@@ -31,7 +34,7 @@ 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 {
@@ -43,18 +46,20 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
     applyBlur()
   }
 
+  // MARK: - Public setters (called by ViewManager)
+
   fun setBlurAmount(amount: Float) {
     blurAmountValue = amount.coerceIn(0f, 100f)
     applyBlur()
   }
 
-  fun setOverlayColor(color: Int) {
-    overlayColorValue = color
+  fun setOverlayColor(colorString: String) {
+    overlayColorValue = parseHexColor(colorString) ?: Color.TRANSPARENT
     updateOverlay()
   }
 
-  fun setReducedTransparencyFallbackColor(color: Int) {
-    reducedTransparencyFallbackColorValue = color
+  fun setReducedTransparencyFallbackColor(colorString: String) {
+    fallbackColorValue = parseHexColor(colorString) ?: Color.parseColor("#F2F2F2")
   }
 
   fun setBlurRadius(radius: Int) {
@@ -62,6 +67,8 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
     applyBlur()
   }
 
+  // MARK: - Blur
+
   private fun applyBlur() {
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
       applyRenderEffect()
@@ -106,10 +113,12 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
 
       background = android.graphics.drawable.BitmapDrawable(resources, bitmap)
     } catch (e: Exception) {
-      setBackgroundColor(reducedTransparencyFallbackColorValue)
+      setBackgroundColor(fallbackColorValue)
     }
   }
 
+  // MARK: - Overlay
+
   private fun updateOverlay() {
     overlayView.setBackgroundColor(overlayColorValue)
     bringChildToFront(overlayView)
@@ -125,4 +134,41 @@ class BlurVibeView(context: Context) : FrameLayout(context) {
       post { renderScriptBlur() }
     }
   }
+
+  // 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
+
+    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)
+        }
+        else -> null
+      }
+    } catch (e: NumberFormatException) {
+      null
+    }
+  }
 }

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

@@ -10,26 +10,33 @@ class BlurVibeViewManager : SimpleViewManager<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
   }
 
+  // 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: Int) {
-    view.setOverlayColor(color)
+  fun setOverlayColor(view: BlurVibeView, color: String?) {
+    view.setOverlayColor(color ?: "transparent")
   }
 
+  // String — matches TS codegen string type ✅
   @ReactProp(name = "reducedTransparencyFallbackColor")
-  fun setReducedTransparencyFallbackColor(view: BlurVibeView, color: Int) {
-    view.setReducedTransparencyFallbackColor(color)
+  fun setReducedTransparencyFallbackColor(view: BlurVibeView, color: String?) {
+    view.setReducedTransparencyFallbackColor(color ?: "#F2F2F2")
   }
 
+  // Int32 — matches TS codegen Int32 type ✅
   @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

@@ -6,4 +6,5 @@ RCT_EXTERN_MODULE(BlurVibeViewManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(blurAmount, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(blurType, NSString)
 RCT_EXPORT_VIEW_PROPERTY(overlayColor, NSString)
-RCT_EXPORT_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString)
+RCT_EXPORT_VIEW_PROPERTY(reducedTransparencyFallbackColor, NSString)
+RCT_EXPORT_VIEW_PROPERTY(blurRadius, NSNumber)

package/package.json

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