Merge pull request #102 from sbaiahmed1/fix/blur-issues-85-89-100-101

fix: resolve blur animator race, scroll lag, and Android full-screen blur

Author: DanielAraldi

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

@@ -187,16 +187,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 +216,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.

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

@@ -209,16 +209,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 +237,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)

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