Merge branch 'main' into feat/add-blur-rounds-android

Author: DanielAraldi

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

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
@@ -36,6 +37,7 @@ class ReactNativeBlurView : BlurViewGroup {
   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
 
@@ -189,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()
   }
 
   /**
@@ -216,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.
@@ -293,7 +313,8 @@ class ReactNativeBlurView : BlurViewGroup {
    * @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}")
 
@@ -478,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)
+    }
+  }
 }

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
@@ -32,6 +33,7 @@ class ReactNativeProgressiveBlurView : FrameLayout {
   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
@@ -211,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()
   }
 
   /**
@@ -237,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)
@@ -377,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.
@@ -494,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)}")
 

example/app/(tabs)/index.tsx

@@ -5,10 +5,10 @@ import {
   ImageBackground,
   ScrollView,
   Pressable,
-  Modal,
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
+import { FullWindowOverlay } from 'react-native-screens';
 import { BlurView } from '@sbaiahmed1/react-native-blur';
 import { DEMO_IMAGES } from '@/constants/blur';
 
@@ -65,21 +65,23 @@ export default function HomeScreen() {
         </BlurView>
       </ScrollView>
 
-      <Modal visible={isModalVisible} transparent statusBarTranslucent>
-        <TouchableWithoutFeedback onPress={() => setIsModalVisible(false)}>
-          <BlurView
-            ignoreSafeArea
-            blurType={'dark'}
-            style={StyleSheet.absoluteFill}
-          />
-        </TouchableWithoutFeedback>
+      {isModalVisible && (
+        <FullWindowOverlay>
+          <TouchableWithoutFeedback onPress={() => setIsModalVisible(false)}>
+            <BlurView
+              ignoreSafeArea
+              blurType={'dark'}
+              style={StyleSheet.absoluteFill}
+            />
+          </TouchableWithoutFeedback>
 
-        <View style={styles.modalContent}>
-          <View style={styles.modalCard}>
-            <Text>Hello this is a centred text in a modal</Text>
+          <View style={styles.modalContent} pointerEvents="none">
+            <View style={styles.modalCard}>
+              <Text>Hello this is a centred text in a modal</Text>
+            </View>
           </View>
-        </View>
-      </Modal>
+        </FullWindowOverlay>
+      )}
     </ImageBackground>
   );
 }

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)
+    }
   }
 }