@sbaiahmed1/react-native-blur 4.6.2-beta.0 → 4.6.3-beta.0

package/README.md

@@ -626,6 +626,7 @@ All props are optional and have sensible defaults.
 | ---------------------------------- | ------------ | ----------- | ----------------------------------------------------------------------------- |
 | `blurType`                         | `BlurType`   | `'xlight'`  | The type of blur effect to apply                                              |
 | `blurAmount`                       | `number`     | `10.0`      | The intensity of the blur effect (0-100)                                      |
+| `blurRounds`                       | `number`     | `5`         | The number of blur interactions must be an integer value (1-15)               |
 | `ignoreSafeArea`                   | `boolean`    | `true`      | (iOS only) Controls whether the blur effect should ignore all safe area edges |
 | `reducedTransparencyFallbackColor` | `string`     | `'#FFFFFF'` | Fallback color when reduced transparency is enabled                           |
 | `overlayColor`                     | `ColorValue` | `undefined` | The overlay color to apply on top of the blur effect                          |
@@ -647,16 +648,17 @@ All props are optional and have sensible defaults.
 
 All props are optional and have sensible defaults.
 
-| Prop                               | Type                                                                                     | Default                   | Description                                          |
-| ---------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
-| `blurType`                         | `BlurType`                                                                               | `'regular'`               | The type of blur effect to apply                     |
-| `blurAmount`                       | `number`                                                                                 | `20.0`                    | Maximum blur radius in pixels                        |
-| `direction`                        | `'blurredTopClearBottom' \| 'blurredBottomClearTop' \| 'blurredCenterClearTopAndBottom'` | `'blurredTopClearBottom'` | Direction of the blur gradient                       |
-| `startOffset`                      | `number`                                                                                 | `0.0`                     | Where the gradient starts (0.0 to 1.0)               |
-| `reducedTransparencyFallbackColor` | `string`                                                                                 | `'#FFFFFF'`               | Fallback color when reduced transparency is enabled  |
-| `overlayColor`                     | `ColorValue`                                                                             | `undefined`               | The overlay color to apply on top of the blur effect |
-| `style`                            | `ViewStyle`                                                                              | `undefined`               | Style object for the blur view                       |
-| `children`                         | `ReactNode`                                                                              | `undefined`               | Child components to render inside the blur view      |
+| Prop                               | Type                                                                                     | Default                   | Description                                                     |
+| ---------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------- | --------------------------------------------------------------- |
+| `blurType`                         | `BlurType`                                                                               | `'regular'`               | The type of blur effect to apply                                |
+| `blurAmount`                       | `number`                                                                                 | `20.0`                    | Maximum blur radius in pixels                                   |
+| `blurRounds`                       | `number`                                                                                 | `5`                       | The number of blur interactions must be an integer value (1-15) |
+| `direction`                        | `'blurredTopClearBottom' \| 'blurredBottomClearTop' \| 'blurredCenterClearTopAndBottom'` | `'blurredTopClearBottom'` | Direction of the blur gradient                                  |
+| `startOffset`                      | `number`                                                                                 | `0.0`                     | Where the gradient starts (0.0 to 1.0)                          |
+| `reducedTransparencyFallbackColor` | `string`                                                                                 | `'#FFFFFF'`               | Fallback color when reduced transparency is enabled             |
+| `overlayColor`                     | `ColorValue`                                                                             | `undefined`               | The overlay color to apply on top of the blur effect            |
+| `style`                            | `ViewStyle`                                                                              | `undefined`               | Style object for the blur view                                  |
+| `children`                         | `ReactNode`                                                                              | `undefined`               | Child components to render inside the blur view                 |
 
 > **Platform Note**: `ProgressiveBlurView` works on both **iOS** and **Android**.
 >
@@ -696,7 +698,8 @@ All props are optional and have sensible defaults.
 | --------------- | ------------------------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------------------------- |
 | `value`         | `boolean`                                   | `false`                                 | The current value of the switch                                                                          |
 | `onValueChange` | `(value: boolean) => void`                  | `undefined`                             | Callback invoked when the switch value changes                                                           |
-| `blurAmount`    | `number`                                    | `10`                                    | (Android only) The intensity of the blur effect (0-100)                                                  |
+| `blurAmount`    | `number`                                    | `10.0`                                  | (Android only) The intensity of the blur effect (0-100)                                                  |
+| `blurRounds`    | `number`                                    | `5`                                     | The number of blur interactions must be an integer value (1-15)                                          |
 | `thumbColor`    | `ColorValue`                                | `'#FFFFFF'`                             | (iOS only) The color of the switch thumb                                                                 |
 | `trackColor`    | `{ false?: ColorValue; true?: ColorValue }` | `{ false: '#E5E5EA', true: '#34C759' }` | Track colors. On Android, only `true` is used - QmBlurView auto-calculates on/off colors from base color |
 | `disabled`      | `boolean`                                   | `false`                                 | Whether the switch is disabled (prevents interaction but maintains current value)                        |
@@ -845,6 +848,7 @@ interface MyGlassContainerProps {
 const blurProps: BlurViewProps = {
   blurType: 'systemMaterial',
   blurAmount: 50,
+  blurRounds: 10,
   reducedTransparencyFallbackColor: '#FFFFFF',
   overlayColor: '#FF000040',
 };
@@ -867,6 +871,7 @@ const blurSwitchProps: BlurSwitchProps = {
   value: true,
   onValueChange: (value) => console.log(value),
   blurAmount: 20,
+  blurRounds: 15,
   trackColor: { true: '#34C759' },
   disabled: false,
 };

package/android/build.gradle

@@ -74,7 +74,7 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation 'com.qmdeve.blurview:core:1.1.4'
+  implementation 'com.github.qmdeve:qmblurview:v1.1.5'
 }
 
 react {

package/android/src/main/java/com/sbaiahmed1/reactnativeblur/BlurType.kt

@@ -2,37 +2,30 @@ package com.sbaiahmed1.reactnativeblur
 
 import android.graphics.Color
 
-/**
- * Enum representing different blur types with their corresponding overlay colors.
- * Maps iOS blur types to Android overlay colors to approximate the visual appearance.
- */
 enum class BlurType(val overlayColor: Int) {
   XLIGHT(Color.argb(140, 240, 240, 240)),
   LIGHT(Color.argb(42, 255, 255, 255)),
-  DARK(Color.argb(120, 25, 25, 25)),
+  DARK(Color.argb(120, 26, 22, 22)),
   EXTRA_DARK(Color.argb(160, 35, 35, 35)),
   REGULAR(Color.argb(35, 255, 255, 255)),
-  PROMINENT(Color.argb(130, 240, 240, 240)),
+  PROMINENT(Color.argb(140, 240, 240, 240)),
   SYSTEM_ULTRA_THIN_MATERIAL(Color.argb(75, 240, 240, 240)),
-  SYSTEM_ULTRA_THIN_MATERIAL_LIGHT(Color.argb(77, 240, 240, 240)),
+  SYSTEM_ULTRA_THIN_MATERIAL_LIGHT(Color.argb(75, 240, 240, 240)),
   SYSTEM_ULTRA_THIN_MATERIAL_DARK(Color.argb(65, 40, 40, 40)),
   SYSTEM_THIN_MATERIAL(Color.argb(102, 240, 240, 240)),
-  SYSTEM_THIN_MATERIAL_LIGHT(Color.argb(105, 240, 240, 240)),
+  SYSTEM_THIN_MATERIAL_LIGHT(Color.argb(102, 240, 240, 240)),
   SYSTEM_THIN_MATERIAL_DARK(Color.argb(102, 35, 35, 35)),
-  SYSTEM_MATERIAL(Color.argb(130, 242, 242, 242)),
-  SYSTEM_MATERIAL_LIGHT(Color.argb(130, 245, 245, 245)),
+  SYSTEM_MATERIAL(Color.argb(140, 245, 245, 245)),
+  SYSTEM_MATERIAL_LIGHT(Color.argb(140, 245, 245, 245)),
   SYSTEM_MATERIAL_DARK(Color.argb(215, 65, 60, 60)),
-  SYSTEM_THICK_MATERIAL(Color.argb(160, 240, 240, 240)),
-  SYSTEM_THICK_MATERIAL_LIGHT(Color.argb(160, 242, 242, 242)),
+  SYSTEM_THICK_MATERIAL(Color.argb(210, 248, 248, 248)),
+  SYSTEM_THICK_MATERIAL_LIGHT(Color.argb(210, 248, 248, 248)),
   SYSTEM_THICK_MATERIAL_DARK(Color.argb(160, 35, 35, 35)),
-  SYSTEM_CHROME_MATERIAL(Color.argb(135, 240, 240, 240)),
-  SYSTEM_CHROME_MATERIAL_LIGHT(Color.argb(135, 242, 242, 242)),
-  SYSTEM_CHROME_MATERIAL_DARK(Color.argb(90, 32, 32, 32));
+  SYSTEM_CHROME_MATERIAL(Color.argb(165, 248, 248, 248)),
+  SYSTEM_CHROME_MATERIAL_LIGHT(Color.argb(165, 248, 248, 248)),
+  SYSTEM_CHROME_MATERIAL_DARK(Color.argb(100, 32, 32, 32));
 
   companion object {
-    /**
-     * Get BlurType from string, with fallback to LIGHT for unknown types.
-     */
     fun fromString(type: String): BlurType {
       return when (type.lowercase()) {
         "xlight" -> XLIGHT
@@ -56,7 +49,7 @@ enum class BlurType(val overlayColor: Int) {
         "systemchromematerial" -> SYSTEM_CHROME_MATERIAL
         "systemchromemateriallight" -> SYSTEM_CHROME_MATERIAL_LIGHT
         "systemchromematerialdark" -> SYSTEM_CHROME_MATERIAL_DARK
-        else -> XLIGHT // default fallback
+        else -> XLIGHT
       }
     }
   }

package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurSwitch.kt

@@ -22,9 +22,11 @@ class ReactNativeBlurSwitch : BlurSwitchButtonView {
   private var onValueChangeListener: ((Boolean) -> Unit)? = null
   private var currentValue = false
   private var isDisabled = false
+  private var currentBlurRounds = DEFAULT_BLUR_ROUNDS
 
   companion object {
     private const val TAG = "ReactNativeBlurSwitch"
+    private const val DEFAULT_BLUR_ROUNDS = 5
     private const val DEFAULT_WIDTH_DP = 65f
     private const val DEFAULT_HEIGHT_DP = 36f
     private const val MIN_BLUR_AMOUNT = 0f
@@ -70,7 +72,7 @@ class ReactNativeBlurSwitch : BlurSwitchButtonView {
    */
   private fun initializeSwitch() {
     try {
-      blurRounds = 5
+      blurRounds = currentBlurRounds
 
       setOnCheckedChangeListener { isChecked ->
         if (isDisabled) {
@@ -172,6 +174,22 @@ class ReactNativeBlurSwitch : BlurSwitchButtonView {
     }
   }
 
+  /**
+   * Set the number of blur rounds.
+   * @param rounds The number of blur rounds (1-15)
+   */
+  fun setRounds(rounds: Int) {
+    val blurRounds = rounds.coerceIn(1, 15)
+    currentBlurRounds = blurRounds
+    logDebug("setRounds: $rounds -> $blurRounds")
+
+    try {
+      super.setBlurRounds(blurRounds)
+    } catch (e: Exception) {
+      logError("Failed to set blur rounds: ${e.message}", e)
+    }
+  }
+
   /**
    * Set whether the switch is disabled.
    * @param disabled True to disable, false to enable

package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurSwitchManager.kt

@@ -40,6 +40,11 @@ class ReactNativeBlurSwitchManager : SimpleViewManager<ReactNativeBlurSwitch>()
     view?.setBlurAmount(blurAmount.toFloat())
   }
 
+  @ReactProp(name = "blurRounds")
+  fun setBlurRounds(view: ReactNativeBlurSwitch?, blurRounds: Int) {
+    view?.setRounds(blurRounds)
+  }
+
   @ReactProp(name = "thumbColor")
   fun setThumbColor(view: ReactNativeBlurSwitch?, color: String?) {
     color?.let {

package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt

@@ -3,6 +3,8 @@ package com.sbaiahmed1.reactnativeblur
 import android.content.Context
 import android.graphics.Color
 import android.graphics.Outline
+import android.graphics.Path
+import android.os.Build
 import android.util.AttributeSet
 import android.util.Log
 import android.util.TypedValue
@@ -30,11 +32,17 @@ import android.view.View.MeasureSpec
 class ReactNativeBlurView : BlurViewGroup {
   private var currentBlurRadius = DEFAULT_BLUR_RADIUS
   private var currentOverlayColor = Color.TRANSPARENT
-  private var currentCornerRadius = 0f
+  private var currentBlurRounds = DEFAULT_BLUR_ROUNDS
+  private var borderRadius = 0f
+  private var borderTopLeftRadius = -1f
+  private var borderTopRightRadius = -1f
+  private var borderBottomLeftRadius = -1f
+  private var borderBottomRightRadius = -1f
   private var glassTintColor: Int = Color.TRANSPARENT
   private var glassOpacity: Float = 1.0f
   private var viewType: String = "blur"
   private var glassType: String = "clear"
+  private var currentBlurType: String = "xlight"
   private var isBlurInitialized: Boolean = false
   private var initRunnable: Runnable? = null
 
@@ -42,9 +50,9 @@ class ReactNativeBlurView : BlurViewGroup {
     private const val TAG = "ReactNativeBlurView"
     private const val MAX_BLUR_RADIUS = 100f
     private const val DEFAULT_BLUR_RADIUS = 10f
+    private const val DEFAULT_BLUR_ROUNDS = 5
     private const val DEBUG = false
 
-    // Cross-platform blur amount constants
     private const val MIN_BLUR_AMOUNT = 0f
     private const val MAX_BLUR_AMOUNT = 100f
 
@@ -62,12 +70,6 @@ class ReactNativeBlurView : BlurViewGroup {
       Log.e(TAG, message, throwable)
     }
 
-    /**
-     * Maps blur amount (0-100) to Android blur radius (0-25).
-     * This ensures cross-platform consistency while respecting Android's limitations.
-     * @param amount The blur amount from 0-100
-     * @return The corresponding blur radius from 0-25
-     */
     private fun mapBlurAmountToRadius(amount: Float): Float {
       val clampedAmount = amount.coerceIn(MIN_BLUR_AMOUNT, MAX_BLUR_AMOUNT)
       return (clampedAmount / MAX_BLUR_AMOUNT) * MAX_BLUR_RADIUS
@@ -82,58 +84,32 @@ class ReactNativeBlurView : BlurViewGroup {
     setupView()
   }
 
-  /**
-   * Initial view setup in constructor - only sets up visual defaults.
-   * Blur initialization is deferred to onAttachedToWindow to ensure the
-   * view hierarchy is fully mounted, preventing flickering and wrong frame capture.
-   */
   private fun setupView() {
     super.setBackgroundColor(currentOverlayColor)
     clipChildren = true
     clipToOutline = true
-    blurRounds = 5
+    blurRounds = currentBlurRounds
     super.setDownsampleFactor(6.0F)
   }
 
-  /**
-   * Called when the view is attached to a window.
-   * After QmBlurView's onAttachedToWindow sets the decor view as blur root,
-   * we use reflection to redirect it to the nearest Screen ancestor.
-   * This scopes the blur capture to just the current screen, preventing
-   * navigation transition artifacts.
-   */
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
 
     if (isBlurInitialized) return
 
-    // Immediately try to swap blur root and initialize.
-    // We avoid posting a runnable to prevent the 1-second delay artifact.
-    // If the parent hierarchy is not ready yet (unlikely in onAttachedToWindow),
-    // we could fall back to post, but for now we prioritize immediate execution.
     swapBlurRootToScreenAncestor()
     initializeBlur()
   }
 
-  /**
-   * Uses reflection to redirect QmBlurView's internal blur capture root
-   * from the activity decor view to the nearest react-native-screens Screen ancestor.
-   *
-   * Reflection path: BlurViewGroup.mBaseBlurViewGroup -> BaseBlurViewGroup.mDecorView
-   * Also moves the OnPreDrawListener from the old root to the new one.
-   */
   private fun swapBlurRootToScreenAncestor() {
-    // Pinned to QmBlurView 1.1.4 – depends on: mBaseBlurViewGroup, mDecorView, preDrawListener, mDifferentRoot, mForceRedraw
     val newRoot = findOptimalBlurRoot() ?: return
 
     try {
-      // Step 1: Get BlurViewGroup's private mBaseBlurViewGroup field
       val blurViewGroupClass = BlurViewGroup::class.java
       val baseField = blurViewGroupClass.getDeclaredField("mBaseBlurViewGroup")
       baseField.isAccessible = true
       val baseBlurViewGroup = baseField.get(this) ?: return
 
-      // Step 2: Get BaseBlurViewGroup's private fields
       val baseClass = BaseBlurViewGroup::class.java
 
       val decorViewField = baseClass.getDeclaredField("mDecorView")
@@ -152,25 +128,20 @@ class ReactNativeBlurView : BlurViewGroup {
       }
 
       if (preDrawListener != null && oldDecorView != null) {
-        // Step 3: Remove listener from old root's ViewTreeObserver
         try {
           oldDecorView.viewTreeObserver.removeOnPreDrawListener(preDrawListener)
         } catch (e: Exception) {
           logDebug("Could not remove old pre-draw listener: ${e.message}")
         }
 
-        // Step 4: Set new root as mDecorView
         decorViewField.set(baseBlurViewGroup, newRoot)
 
-        // Step 5: Add listener to new root's ViewTreeObserver
         newRoot.viewTreeObserver.addOnPreDrawListener(preDrawListener)
 
-        // Step 6: Update mDifferentRoot flag
         val differentRootField = baseClass.getDeclaredField("mDifferentRoot")
         differentRootField.isAccessible = true
         differentRootField.setBoolean(baseBlurViewGroup, newRoot.rootView != this.rootView)
 
-        // Step 7: Force a redraw
         val forceRedrawField = baseClass.getDeclaredField("mForceRedraw")
         forceRedrawField.isAccessible = true
         forceRedrawField.setBoolean(baseBlurViewGroup, true)
@@ -184,27 +155,10 @@ class ReactNativeBlurView : BlurViewGroup {
     }
   }
 
-  /**
-   * Finds the optimal view to use as blur capture root.
-   *
-   * Priority:
-   * 1. Nearest react-native-screens Screen ancestor — scopes blur to the current
-   *    screen and prevents capturing navigation transition artifacts.
-   * 2. Nearest ReactRootView ancestor — scopes blur to the React Native root when
-   *    the component is not inside a Screen (e.g. plain View hierarchies). Without
-   *    this fallback, QmBlurView defaults to the activity decor view and blurs the
-   *    entire screen instead of just the component area (issue #89).
-   * 3. null — returned for modals, which intentionally need to blur content from
-   *    the main activity window (decor view is correct there).
-   */
   private fun findOptimalBlurRoot(): ViewGroup? {
     return findNearestScreenAncestor() ?: findNearestReactRootView()
   }
 
-  /**
-   * Walks up the view hierarchy looking for react-native-screens Screen components
-   * using class name detection to avoid hard dependencies on react-native-screens.
-   */
   private fun findNearestScreenAncestor(): ViewGroup? {
     var currentParent = this.parent
     while (currentParent != null) {
@@ -216,11 +170,6 @@ class ReactNativeBlurView : BlurViewGroup {
     return null
   }
 
-  /**
-   * Walks up the view hierarchy looking for the React Native root view.
-   * Used as a fallback when no Screen ancestor exists, to scope the blur
-   * capture to the RN root rather than the full activity decor view.
-   */
   private fun findNearestReactRootView(): ViewGroup? {
     var currentParent = this.parent
     while (currentParent != null) {
@@ -232,11 +181,6 @@ class ReactNativeBlurView : BlurViewGroup {
     return null
   }
 
-  /**
-   * Initialize the blur view with current settings.
-   * Called after the view is attached and the blur root has been swapped.
-   * Guarded by isBlurInitialized to prevent duplicate setup.
-   */
   private fun initializeBlur() {
     if (isBlurInitialized) return
 
@@ -252,20 +196,11 @@ class ReactNativeBlurView : BlurViewGroup {
     }
   }
 
-  /**
-   * Called when the view is detached from a window.
-   * Performs cleanup to prevent memory leaks and resets initialization state
-   * so blur is re-initialized on next attach (e.g. navigation transitions).
-   */
   override fun onDetachedFromWindow() {
     super.onDetachedFromWindow()
     cleanup()
   }
 
-  /**
-   * Cleanup method to reset state.
-   * Helps prevent memory leaks and ensures clean state.
-   */
   fun cleanup() {
     isBlurInitialized = false
     initRunnable?.let { removeCallbacks(it) }
@@ -273,10 +208,6 @@ class ReactNativeBlurView : BlurViewGroup {
     logDebug("View cleaned up")
   }
 
-  /**
-   * Set the blur amount with cross-platform mapping.
-   * @param amount The blur amount value (0-100), will be mapped to Android's 0-25 radius range
-   */
   fun setBlurAmount(amount: Float) {
     currentBlurRadius = mapBlurAmountToRadius(amount)
     logDebug("setBlurAmount: $amount -> $currentBlurRadius (mapped from 0-100 to 0-25 range)")
@@ -288,11 +219,24 @@ class ReactNativeBlurView : BlurViewGroup {
     }
   }
 
+  fun setRounds(rounds: Int) {
+    val blurRounds = rounds.coerceIn(1, 15)
+    currentBlurRounds = blurRounds
+    logDebug("setRounds: $rounds -> $blurRounds")
+
+    try {
+      super.setBlurRounds(blurRounds)
+    } catch (e: Exception) {
+      logError("Failed to set blur rounds: ${e.message}", e)
+    }
+  }
+
   /**
    * Set the blur type which determines the overlay color.
    * @param type The blur type string (case-insensitive)
    */
   fun setBlurType(type: String) {
+    currentBlurType = type
     val blurType = BlurType.fromString(type)
     currentOverlayColor = blurType.overlayColor
     logDebug("setBlurType: $type -> ${blurType.name}")
@@ -307,9 +251,6 @@ class ReactNativeBlurView : BlurViewGroup {
 
   /**
    * Set the glass tint color for liquid glass effect.
-   * @param color The color string in hex format (e.g., "#FF0000") or null to clear
-   */
-  fun setGlassTintColor(color: String?) {
     color?.let {
       try {
         glassTintColor = it.toColorInt()
@@ -326,58 +267,37 @@ class ReactNativeBlurView : BlurViewGroup {
     }
   }
 
-  /**
-   * Set the glass opacity for liquid glass effect.
-   * @param opacity The opacity value (0.0 to 1.0)
-   */
   fun setGlassOpacity(opacity: Float) {
     glassOpacity = opacity.coerceIn(0.0f, 1.0f)
     logDebug("setGlassOpacity: $opacity")
     updateGlassEffect()
   }
 
-  /**
-   * Set the view type (blur or liquidGlass).
-   * @param type The view type string
-   */
   fun setType(type: String) {
     viewType = type
     logDebug("setType: $type")
     updateViewType()
   }
 
-    /**
-   * Set the view type (blur or liquidGlass).
-   * @param isInteractive The view type string
-   */
   fun setIsInteractive(isInteractive: Boolean) {
     logDebug("setType: $isInteractive")
   }
 
-  /**
-   * Set the glass type for liquid glass effect.
-   * @param type The glass type string
-   */
   fun setGlassType(type: String) {
     glassType = type
     logDebug("setGlassType: $type")
     updateGlassEffect()
   }
 
-  /**
-   * Update the glass effect based on current glass properties.
-   */
   private fun updateGlassEffect() {
     if (viewType == "liquidGlass") {
       try {
-        // Apply glass tint with opacity
         val glassColor = Color.argb(
           (glassOpacity * 255).toInt(),
           Color.red(glassTintColor),
           Color.green(glassTintColor),
           Color.blue(glassTintColor)
         )
-        // Use QmBlurView's setOverlayColor method
         super.setOverlayColor(glassColor)
         logDebug("Applied glass effect: color=$glassColor, opacity=$glassOpacity")
       } catch (e: Exception) {
@@ -386,16 +306,12 @@ class ReactNativeBlurView : BlurViewGroup {
     }
   }
 
-  /**
-   * Update the view type and apply appropriate effects.
-   */
   private fun updateViewType() {
     when (viewType) {
       "liquidGlass" -> {
         updateGlassEffect()
       }
       "blur" -> {
-        // Restore original blur overlay color
         try {
           super.setBackgroundColor(currentOverlayColor)
           super.setOverlayColor(currentOverlayColor)
@@ -406,40 +322,90 @@ class ReactNativeBlurView : BlurViewGroup {
     }
   }
 
-  /**
-   * Set the border radius from React Native StyleSheet.
-   * React Native provides values in logical pixels (dp), which we convert for the native view.
-   * @param radius The border radius value in dp
-   */
   fun setBorderRadius(radius: Float) {
-    currentCornerRadius = radius
+    borderRadius = radius
     logDebug("setBorderRadius: $radius dp")
     updateCornerRadius()
   }
 
-  /**
-   * Convert pixels to density-independent pixels and update the corner radius.
-   * QmBlurView's setCornerRadius expects values in pixels, and React Native already
-   * provides values in dp, so we need to convert from dp to pixels.
-   */
+  fun setBorderTopLeftRadius(radius: Float) {
+    borderTopLeftRadius = radius
+    logDebug("setBorderTopLeftRadius: $radius dp")
+    updateCornerRadius()
+  }
+
+  fun setBorderTopRightRadius(radius: Float) {
+    borderTopRightRadius = radius
+    logDebug("setBorderTopRightRadius: $radius dp")
+    updateCornerRadius()
+  }
+
+  fun setBorderBottomLeftRadius(radius: Float) {
+    borderBottomLeftRadius = radius
+    logDebug("setBorderBottomLeftRadius: $radius dp")
+    updateCornerRadius()
+  }
+
+  fun setBorderBottomRightRadius(radius: Float) {
+    borderBottomRightRadius = radius
+    logDebug("setBorderBottomRightRadius: $radius dp")
+    updateCornerRadius()
+  }
+
+  private fun convertDpToPx(dp: Float): Float {
+    val displayMetrics = context.resources.displayMetrics
+    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics)
+  }
+
   private fun updateCornerRadius() {
     try {
-      // Convert from dp (React Native) to pixels (Android)
-      val radiusInPixels = 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, radiusInPixels)
+      val baseRadius = convertDpToPx(borderRadius)
+      val topLeft = if (borderTopLeftRadius > 0) convertDpToPx(borderTopLeftRadius) else baseRadius
+      val topRight = if (borderTopRightRadius > 0) convertDpToPx(borderTopRightRadius) else baseRadius
+      val bottomLeft = if (borderBottomLeftRadius > 0) convertDpToPx(borderBottomLeftRadius) else baseRadius
+      val bottomRight = if (borderBottomRightRadius > 0) convertDpToPx(borderBottomRightRadius) else baseRadius
+
+      super.setTopLeftCornerRadius(topLeft)
+      super.setTopRightCornerRadius(topRight)
+      super.setBottomLeftCornerRadius(bottomLeft)
+      super.setBottomRightCornerRadius(bottomRight)
+      super.setCornerRadius(baseRadius)
+
+      val isUniform = topLeft == topRight && topRight == bottomLeft && bottomLeft == bottomRight
+
+      if (isUniform) {
+        outlineProvider = object : ViewOutlineProvider() {
+          override fun getOutline(view: View, outline: Outline?) {
+            outline?.setRoundRect(0, 0, view.width, view.height, baseRadius)
+          }
+        }
+      } else {
+        outlineProvider = object : ViewOutlineProvider() {
+          override fun getOutline(view: View, outline: Outline?) {
+            val path = Path()
+            val radii = floatArrayOf(
+              topLeft,
+              topLeft,
+              topRight,
+              topRight,
+              bottomRight,
+              bottomRight,
+              bottomLeft,
+              bottomLeft
+            )
+            path.addRoundRect(0f, 0f, view.width.toFloat(), view.height.toFloat(), radii, Path.Direction.CW)
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+              outline?.setPath(path)
+            } else {
+              @Suppress("DEPRECATION")
+              outline?.setConvexPath(path)
+            }
+          }
         }
       }
-      clipToOutline = true
 
-      super.setCornerRadius(radiusInPixels)
-      logDebug("Updated corner radius: ${currentCornerRadius}dp -> ${radiusInPixels}px")
+      clipToOutline = true
+      logDebug("Updated corner radius: topLeft=$topLeft, topRight=$topRight, bottomLeft=$bottomLeft, bottomRight=$bottomRight (px)")
     } catch (e: Exception) {
       logError("Failed to update corner radius: ${e.message}", e)
     }
@@ -474,8 +440,5 @@ class ReactNativeBlurView : BlurViewGroup {
    */
   override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
     // No-op: Layout is handled by React Native's UIManager.
-    // We override this to prevent the superclass (BlurViewGroup/FrameLayout) from
-    // re-positioning children based on its own logic (e.g. gravity), which would
-    // conflict with React Native's layout.
   }
 }