@sbaiahmed1/react-native-blur 4.6.1 → 4.6.2

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/src/main/java/com/sbaiahmed1/reactnativeblur/BlurType.kt

@@ -1,5 +1,6 @@
 package com.sbaiahmed1.reactnativeblur
 
+import android.content.res.Configuration
 import android.graphics.Color
 
 /**
@@ -9,51 +10,52 @@ import android.graphics.Color
 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)),
-  SYSTEM_ULTRA_THIN_MATERIAL(Color.argb(75, 240, 240, 240)),
-  SYSTEM_ULTRA_THIN_MATERIAL_LIGHT(Color.argb(77, 240, 240, 240)),
+  REGULAR_LIGHT(Color.argb(35, 255, 255, 255)),
+  REGULAR_DARK(Color.argb(35, 28, 28, 30)),
+  PROMINENT_LIGHT(Color.argb(140, 240, 240, 240)),
+  PROMINENT_DARK(Color.argb(140, 28, 28, 30)),
+  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_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_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_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.
+     * Uses the provided configuration to determine if dark mode is active for
+     * appropriate defaults.
      */
-    fun fromString(type: String): BlurType {
+    fun fromString(type: String, configuration: Configuration): BlurType {
+      val isDarkMode = (configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES
+
       return when (type.lowercase()) {
         "xlight" -> XLIGHT
         "light" -> LIGHT
         "dark" -> DARK
         "extradark" -> EXTRA_DARK
-        "regular" -> REGULAR
-        "prominent" -> PROMINENT
-        "systemultrathinmaterial" -> SYSTEM_ULTRA_THIN_MATERIAL
+        "regular" -> if (isDarkMode) REGULAR_DARK else REGULAR_LIGHT
+        "prominent" -> if (isDarkMode) PROMINENT_DARK else PROMINENT_LIGHT
+        "systemultrathinmaterial" -> if (isDarkMode) SYSTEM_ULTRA_THIN_MATERIAL_DARK else SYSTEM_ULTRA_THIN_MATERIAL_LIGHT
         "systemultrathinmateriallight" -> SYSTEM_ULTRA_THIN_MATERIAL_LIGHT
         "systemultrathinmaterialdark" -> SYSTEM_ULTRA_THIN_MATERIAL_DARK
-        "systemthinmaterial" -> SYSTEM_THIN_MATERIAL
+        "systemthinmaterial" -> if (isDarkMode) SYSTEM_THIN_MATERIAL_DARK else SYSTEM_THIN_MATERIAL_LIGHT
         "systemthinmateriallight" -> SYSTEM_THIN_MATERIAL_LIGHT
         "systemthinmaterialdark" -> SYSTEM_THIN_MATERIAL_DARK
-        "systemmaterial" -> SYSTEM_MATERIAL
+        "systemmaterial" -> if (isDarkMode) SYSTEM_MATERIAL_DARK else SYSTEM_MATERIAL_LIGHT
         "systemmateriallight" -> SYSTEM_MATERIAL_LIGHT
         "systemmaterialdark" -> SYSTEM_MATERIAL_DARK
-        "systemthickmaterial" -> SYSTEM_THICK_MATERIAL
+        "systemthickmaterial" -> if (isDarkMode) SYSTEM_THICK_MATERIAL_DARK else SYSTEM_THICK_MATERIAL_LIGHT
         "systemthickmateriallight" -> SYSTEM_THICK_MATERIAL_LIGHT
         "systemthickmaterialdark" -> SYSTEM_THICK_MATERIAL_DARK
-        "systemchromematerial" -> SYSTEM_CHROME_MATERIAL
+        "systemchromematerial" -> if (isDarkMode) SYSTEM_CHROME_MATERIAL_DARK else SYSTEM_CHROME_MATERIAL_LIGHT
         "systemchromemateriallight" -> SYSTEM_CHROME_MATERIAL_LIGHT
         "systemchromematerialdark" -> SYSTEM_CHROME_MATERIAL_DARK
         else -> XLIGHT // default fallback

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

@@ -1,6 +1,7 @@
 package com.sbaiahmed1.reactnativeblur
 
 import android.content.Context
+import android.content.res.Configuration
 import android.graphics.Color
 import android.graphics.Outline
 import android.util.AttributeSet
@@ -30,11 +31,13 @@ import android.view.View.MeasureSpec
 class ReactNativeBlurView : BlurViewGroup {
   private var currentBlurRadius = DEFAULT_BLUR_RADIUS
   private var currentOverlayColor = Color.TRANSPARENT
+  private var currentBlurRounds = DEFAULT_BLUR_ROUNDS
   private var currentCornerRadius = 0f
   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,6 +45,7 @@ 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
@@ -91,7 +95,7 @@ class ReactNativeBlurView : BlurViewGroup {
     super.setBackgroundColor(currentOverlayColor)
     clipChildren = true
     clipToOutline = true
-    blurRounds = 5
+    blurRounds = currentBlurRounds
     super.setDownsampleFactor(6.0F)
   }
 
@@ -187,16 +191,18 @@ class ReactNativeBlurView : BlurViewGroup {
   /**
    * Finds the optimal view to use as blur capture root.
    *
-   * Returns the nearest react-native-screens Screen ancestor if found, which scopes
-   * the blur to the current screen and prevents capturing navigation transitions.
-   *
-   * Returns null when no Screen ancestor exists (e.g. modals, standalone usage).
-   * A null return means swapBlurRootToScreenAncestor() is a no-op and QmBlurView
-   * keeps its default decor view as the blur root — this is correct for modals
-   * because they need to blur the content behind them (in the main activity window).
+   * 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()
+    return findNearestScreenAncestor() ?: findNearestReactRootView()
   }
 
   /**
@@ -214,6 +220,22 @@ 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) {
+      if (currentParent.javaClass.name == "com.facebook.react.ReactRootView") {
+        return currentParent as? ViewGroup
+      }
+      currentParent = currentParent.parent
+    }
+    return null
+  }
+
   /**
    * Initialize the blur view with current settings.
    * Called after the view is attached and the blur root has been swapped.
@@ -270,12 +292,29 @@ class ReactNativeBlurView : BlurViewGroup {
     }
   }
 
+  /**
+   * 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 the blur type which determines the overlay color.
    * @param type The blur type string (case-insensitive)
    */
   fun setBlurType(type: String) {
-    val blurType = BlurType.fromString(type)
+    currentBlurType = type
+    val blurType = BlurType.fromString(type, resources.configuration)
     currentOverlayColor = blurType.overlayColor
     logDebug("setBlurType: $type -> ${blurType.name}")
 
@@ -460,4 +499,18 @@ class ReactNativeBlurView : BlurViewGroup {
     // re-positioning children based on its own logic (e.g. gravity), which would
     // conflict with React Native's layout.
   }
+
+  /**
+   * Handle configuration changes, such as dark mode or orientation changes.
+   * This ensures the blur view updates its overlay color based on the new
+   * configuration.
+   */
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+
+    if (viewType == "blur") {
+      // Re-apply blur type to update overlay color based on new configuration
+      setBlurType(currentBlurType)
+    }
+  }
 }

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

@@ -39,6 +39,11 @@ class ReactNativeBlurViewManager : ViewGroupManager<ReactNativeBlurView>(),
     view?.setBlurAmount(blurAmount.toFloat())
   }
 
+  @ReactProp(name = "blurRounds")
+  override fun setBlurRounds(view: ReactNativeBlurView?, blurRounds: Int) {
+    view?.setRounds(blurRounds)
+  }
+
   @ReactProp(name = "borderRadius")
   override fun setBorderRadius(view: ReactNativeBlurView?, borderRadius: Float) {
     view?.setBorderRadius(borderRadius)

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

@@ -1,6 +1,7 @@
 package com.sbaiahmed1.reactnativeblur
 
 import android.content.Context
+import android.content.res.Configuration
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.LinearGradient
@@ -30,7 +31,9 @@ class ReactNativeProgressiveBlurView : FrameLayout {
   private val gradientPaint = Paint(Paint.ANTI_ALIAS_FLAG)
 
   private var currentBlurRadius = DEFAULT_BLUR_RADIUS
+  private var currentBlurRounds = DEFAULT_BLUR_ROUNDS
   private var currentOverlayColor = Color.TRANSPARENT
+  private var currentBlurType = "xlight"
   private var currentDirection = "topToBottom"
   private var currentStartOffset = 0.0f
   private var hasExplicitBackground: Boolean = false
@@ -42,6 +45,7 @@ class ReactNativeProgressiveBlurView : FrameLayout {
     private const val TAG = "ReactNativeProgressiveBlur"
     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
@@ -129,7 +133,7 @@ class ReactNativeProgressiveBlurView : FrameLayout {
         blurView = BlurView(context, null).apply {
           layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
           setDownsampleFactor(6.0F)
-          blurRounds = 5
+          blurRounds = currentBlurRounds
         }
         addView(blurView)
       }
@@ -209,16 +213,18 @@ class ReactNativeProgressiveBlurView : FrameLayout {
   /**
    * Finds the optimal view to use as blur capture root.
    *
-   * Returns the nearest react-native-screens Screen ancestor if found, which scopes
-   * the blur to the current screen and prevents capturing navigation transitions.
-   *
-   * Returns null when no Screen ancestor exists (e.g. modals, standalone usage).
-   * A null return means swapBlurRootToScreenAncestor() is a no-op and QmBlurView
-   * keeps its default decor view as the blur root — this is correct for modals
-   * because they need to blur the content behind them (in the main activity window).
+   * 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()
+    return findNearestScreenAncestor() ?: findNearestReactRootView()
   }
 
   /**
@@ -235,6 +241,22 @@ class ReactNativeProgressiveBlurView : FrameLayout {
     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) {
+      if (currentParent.javaClass.name == "com.facebook.react.ReactRootView") {
+        return currentParent as? ViewGroup
+      }
+      currentParent = currentParent.parent
+    }
+    return null
+  }
+
   override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
     val width = MeasureSpec.getSize(widthMeasureSpec)
     val height = MeasureSpec.getSize(heightMeasureSpec)
@@ -375,6 +397,17 @@ class ReactNativeProgressiveBlurView : FrameLayout {
     cleanup()
   }
 
+  /**
+   * Handle configuration changes, such as dark mode or orientation changes.
+   * This ensures the blur view updates its overlay color based on the new
+   * configuration.
+   */
+  override fun onConfigurationChanged(newConfig: Configuration) {
+    super.onConfigurationChanged(newConfig)
+
+    setBlurType(currentBlurType)
+  }
+
   /**
    * Cleanup method to prevent memory leaks.
    * Resets initialization state so blur is re-initialized on next attach.
@@ -429,6 +462,22 @@ class ReactNativeProgressiveBlurView : FrameLayout {
     }
   }
 
+  /**
+   * 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 {
+      blurView?.blurRounds = blurRounds
+    } catch (e: Exception) {
+      logError("Failed to set blur rounds: ${e.message}", e)
+    }
+  }
+
   /**
    * Set the direction of the progressive blur gradient.
    * @param direction The direction string: "blurredTopClearBottom" or "blurredBottomClearTop"
@@ -476,7 +525,8 @@ class ReactNativeProgressiveBlurView : FrameLayout {
    * @param type The blur type string (case-insensitive)
    */
   fun setBlurType(type: String) {
-    val blurType = BlurType.fromString(type)
+    currentBlurType = type
+    val blurType = BlurType.fromString(type, resources.configuration)
     currentOverlayColor = blurType.overlayColor
     logDebug("setBlurType: $type -> ${blurType.name} -> ${Integer.toHexString(currentOverlayColor)}")
 

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

@@ -45,6 +45,11 @@ class ReactNativeProgressiveBlurViewManager : SimpleViewManager<ReactNativeProgr
     view?.setBlurAmount(blurAmount.toFloat())
   }
 
+  @ReactProp(name = "blurRounds")
+  override fun setBlurRounds(view: ReactNativeProgressiveBlurView?, blurRounds: Int) {
+    view?.setRounds(blurRounds)
+  }
+
   @ReactProp(name = "direction")
   override fun setDirection(view: ReactNativeProgressiveBlurView?, direction: String?) {
     // Provide default value if direction is null or empty

package/ios/Views/BlurEffectView.swift

@@ -21,41 +21,54 @@ class BlurEffectView: UIVisualEffectView {
   }
 
   func updateBlur(style: UIBlurEffect.Style, intensity: Double) {
+    // Skip expensive animator recreation when nothing changed.
+    // During FlashList recycling, updateUIView fires on every layout pass
+    // even when props are identical, causing jank (issue #100).
+    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 a view re-joins a window
+    // (e.g. after modal dismiss + re-present). If the animation plays
+    // toward its end state the blur drifts to full intensity. Re-pause
+    // and re-set the fraction here to lock it back to our intended value.
+    // pausesOnCompletion = true (set in setupBlur) ensures the animator
+    // stays .active even if it reaches fraction 1.0, so this is always safe.
+    animator?.pauseAnimation()
+    animator?.fractionComplete = intensity
+  }
+
   private func setupBlur() {
-    // Clean up existing animator
-    if let animator = animator {
-      animator.stopAnimation(true)
-      animator.finishAnimation(at: .current)
+    if let existing = animator, existing.state == .active {
+      existing.stopAnimation(true)
     }
     animator = nil
 
-    // Reset effect
     effect = nil
 
-    // Create new animator
-    animator = UIViewPropertyAnimator(duration: 1, curve: .linear)
-    animator?.addAnimations { [weak self] in
+    let newAnimator = UIViewPropertyAnimator(duration: 1, curve: .linear)
+    newAnimator.addAnimations { [weak self] in
       self?.effect = UIBlurEffect(style: self?.blurStyle ?? .systemMaterial)
     }
-
-    // Set intensity
-    animator?.fractionComplete = intensity
-    // Stop the animation at the current state
-    DispatchQueue.main.async { [weak self] in
-      self?.animator?.stopAnimation(true)
-      self?.animator?.finishAnimation(at: .current)
-    }
+    // pausesOnCompletion: if UIKit ever resumes and runs this to the end,
+    // the animator stays .active (paused at 1.0) instead of going .inactive.
+    // This guarantees didMoveToWindow can always call pauseAnimation() safely.
+    newAnimator.pausesOnCompletion = true
+    newAnimator.startAnimation()
+    newAnimator.pauseAnimation()
+    newAnimator.fractionComplete = intensity
+    animator = newAnimator
   }
 
   deinit {
-    guard let animator = animator, animator.state == .active else { return }
-    animator.stopAnimation(true)
-    animator.finishAnimation(at: .current)
+    if let animator = animator, animator.state == .active {
+      animator.stopAnimation(true)
+    }
   }
 }
 

package/lib/module/BlurSwitch.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React from 'react';
-import { Platform, Switch } from 'react-native';
+import { Platform, StyleSheet, Switch } from 'react-native';
 import ReactNativeBlurSwitch from './ReactNativeBlurSwitchNativeComponent';
 import { jsx as _jsx } from "react/jsx-runtime";
 const toColorString = (color, fallback) => {
@@ -30,8 +30,9 @@ const toColorString = (color, fallback) => {
  */
 export const BlurSwitch = ({
   value = false,
-  onValueChange,
   blurAmount = 10,
+  blurRounds = 5,
+  onValueChange,
   thumbColor = '#FFFFFF',
   trackColor = {
     false: '#E5E5EA',
@@ -53,15 +54,13 @@ export const BlurSwitch = ({
     });
   }
   return /*#__PURE__*/_jsx(ReactNativeBlurSwitch, {
-    style: [{
-      width: 65,
-      height: 36
-    }, style],
+    style: [styles.switch, style],
     value: value,
     onValueChange: event => {
       onValueChange?.(event.nativeEvent.value);
     },
     blurAmount: blurAmount,
+    blurRounds: blurRounds,
     thumbColor: toColorString(thumbColor, '#FFFFFF'),
     trackColorOff: toColorString(trackColor?.false, '#E5E5EA'),
     trackColorOn: toColorString(trackColor?.true, '#34C759'),
@@ -69,5 +68,11 @@ export const BlurSwitch = ({
     ...props
   });
 };
+const styles = StyleSheet.create({
+  switch: {
+    width: 65,
+    height: 36
+  }
+});
 export default BlurSwitch;
 //# sourceMappingURL=BlurSwitch.js.map

package/lib/module/BlurSwitch.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Platform","Switch","ReactNativeBlurSwitch","jsx","_jsx","toColorString","color","fallback","BlurSwitch","value","onValueChange","blurAmount","thumbColor","trackColor","false","true","disabled","style","props","OS","width","height","event","nativeEvent","trackColorOff","trackColorOn"],"sourceRoot":"../../src","sources":["BlurSwitch.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,MAAM,QAAQ,cAAc;AAE/C,OAAOC,qBAAqB,MAAM,wCAAwC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3E,MAAMC,aAAa,GAAGA,CACpBC,KAA6B,EAC7BC,QAAgB,KACL;EACX,IAAI,OAAOD,KAAK,KAAK,QAAQ,EAAE,OAAOA,KAAK;EAC3C,OAAOC,QAAQ;AACjB,CAAC;AA8DD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,KAAK,GAAG,KAAK;EACbC,aAAa;EACbC,UAAU,GAAG,EAAE;EACfC,UAAU,GAAG,SAAS;EACtBC,UAAU,GAAG;IAAEC,KAAK,EAAE,SAAS;IAAEC,IAAI,EAAE;EAAU,CAAC;EAClDC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,IAAIlB,QAAQ,CAACmB,EAAE,KAAK,KAAK,EAAE;IACzB,oBACEf,IAAA,CAACH,MAAM;MACLQ,KAAK,EAAEA,KAAM;MACbC,aAAa,EAAEA,aAAc;MAC7BE,UAAU,EAAEA,UAAW;MACvBC,UAAU,EAAEA,UAAW;MACvBG,QAAQ,EAAEA,QAAS;MACnBC,KAAK,EAAEA,KAAM;MAAA,GACTC;IAAK,CACV,CAAC;EAEN;EAEA,oBACEd,IAAA,CAACF,qBAAqB;IACpBe,KAAK,EAAE,CAAC;MAAEG,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG,CAAC,EAAEJ,KAAK,CAAE;IAC1CR,KAAK,EAAEA,KAAM;IACbC,aAAa,EAAGY,KAAK,IAAK;MACxBZ,aAAa,GAAGY,KAAK,CAACC,WAAW,CAACd,KAAK,CAAC;IAC1C,CAAE;IACFE,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEP,aAAa,CAACO,UAAU,EAAE,SAAS,CAAE;IACjDY,aAAa,EAAEnB,aAAa,CAACQ,UAAU,EAAEC,KAAK,EAAE,SAAS,CAAE;IAC3DW,YAAY,EAAEpB,aAAa,CAACQ,UAAU,EAAEE,IAAI,EAAE,SAAS,CAAE;IACzDC,QAAQ,EAAEA,QAAS;IAAA,GACfE;EAAK,CACV,CAAC;AAEN,CAAC;AAED,eAAeV,UAAU","ignoreList":[]}
+{"version":3,"names":["React","Platform","StyleSheet","Switch","ReactNativeBlurSwitch","jsx","_jsx","toColorString","color","fallback","BlurSwitch","value","blurAmount","blurRounds","onValueChange","thumbColor","trackColor","false","true","disabled","style","props","OS","styles","switch","event","nativeEvent","trackColorOff","trackColorOn","create","width","height"],"sourceRoot":"../../src","sources":["BlurSwitch.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,UAAU,EAAEC,MAAM,QAAQ,cAAc;AAE3D,OAAOC,qBAAqB,MAAM,wCAAwC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3E,MAAMC,aAAa,GAAGA,CACpBC,KAA6B,EAC7BC,QAAgB,KACL;EACX,IAAI,OAAOD,KAAK,KAAK,QAAQ,EAAE,OAAOA,KAAK;EAC3C,OAAOC,QAAQ;AACjB,CAAC;AAyED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,KAAK,GAAG,KAAK;EACbC,UAAU,GAAG,EAAE;EACfC,UAAU,GAAG,CAAC;EACdC,aAAa;EACbC,UAAU,GAAG,SAAS;EACtBC,UAAU,GAAG;IAAEC,KAAK,EAAE,SAAS;IAAEC,IAAI,EAAE;EAAU,CAAC;EAClDC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,IAAIpB,QAAQ,CAACqB,EAAE,KAAK,KAAK,EAAE;IACzB,oBACEhB,IAAA,CAACH,MAAM;MACLQ,KAAK,EAAEA,KAAM;MACbG,aAAa,EAAEA,aAAc;MAC7BC,UAAU,EAAEA,UAAW;MACvBC,UAAU,EAAEA,UAAW;MACvBG,QAAQ,EAAEA,QAAS;MACnBC,KAAK,EAAEA,KAAM;MAAA,GACTC;IAAK,CACV,CAAC;EAEN;EAEA,oBACEf,IAAA,CAACF,qBAAqB;IACpBgB,KAAK,EAAE,CAACG,MAAM,CAACC,MAAM,EAAEJ,KAAK,CAAE;IAC9BT,KAAK,EAAEA,KAAM;IACbG,aAAa,EAAGW,KAAK,IAAK;MACxBX,aAAa,GAAGW,KAAK,CAACC,WAAW,CAACf,KAAK,CAAC;IAC1C,CAAE;IACFC,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEA,UAAW;IACvBE,UAAU,EAAER,aAAa,CAACQ,UAAU,EAAE,SAAS,CAAE;IACjDY,aAAa,EAAEpB,aAAa,CAACS,UAAU,EAAEC,KAAK,EAAE,SAAS,CAAE;IAC3DW,YAAY,EAAErB,aAAa,CAACS,UAAU,EAAEE,IAAI,EAAE,SAAS,CAAE;IACzDC,QAAQ,EAAEA,QAAS;IAAA,GACfE;EAAK,CACV,CAAC;AAEN,CAAC;AAED,MAAME,MAAM,GAAGrB,UAAU,CAAC2B,MAAM,CAAC;EAC/BL,MAAM,EAAE;IACNM,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,eAAerB,UAAU","ignoreList":[]}