react-native-blur-vibe 0.1.12 → 0.1.14

package/README.md

@@ -1,27 +1,26 @@
 # React Native Blur-Vibe
 
-<img width="1500" height="500" alt="github-banner" src="https://github.com/user-attachments/assets/78b2e5ec-5b57-48c0-b984-69cb57cbcf26" />
+<a href="https://www.npmjs.com/package/react-native-blur-vibe"><img width="100%" height="35%" alt="github-banner" src="https://github.com/user-attachments/assets/78b2e5ec-5b57-48c0-b984-69cb57cbcf26" /></a>
 <br></br>
-A modern, actively maintained blur view for React Native. Works on <b>iOS</b> and <b>Android</b> with full New Architecture (Fabric) support.
- 
+
+A modern, actively maintained blur view for React Native. Works on **iOS** and **Android** with both Old (Paper) and New (Fabric) Architecture support.
+
 > The key difference from other blur libraries: `overlayColor` works on **both iOS and Android** — letting you control blur visibility the same way CSS `backdrop-filter` + `background-color` works on the web.
- <br></br>
 
+<br></br>
 
 [![npm version](https://img.shields.io/npm/v/react-native-blur-vibe)](https://www.npmjs.com/package/react-native-blur-vibe)
 [![Build iOS](https://github.com/I-am-Pritam-20/react-native-blur-vibe/actions/workflows/build-ios.yml/badge.svg)](https://github.com/I-am-Pritam-20/react-native-blur-vibe/actions/workflows/build-ios.yml)
 [![Build Android](https://github.com/I-am-Pritam-20/react-native-blur-vibe/actions/workflows/build-android.yml/badge.svg)](https://github.com/I-am-Pritam-20/react-native-blur-vibe/actions/workflows/build-android.yml)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
- <div align="left">
+
+<div align="left">
   <p>
     <img src="https://img.shields.io/badge/iOS-13%2B-blue?style=flat-square" alt="iOS 13+" />
     <img src="https://img.shields.io/badge/Android-API%2021%2B-green?style=flat-square" alt="Android API 21+" />
   </p>
 </div>
 
----
-
-
 ---
 
 ## Platform matrix
@@ -32,8 +31,13 @@ A modern, actively maintained blur view for React Native. Works on <b>iOS</b> an
 | Overlay tint | ✅ | ✅ | ✅ |
 | Progressive blur | ✅ | ✅ | ❌ |
 | Noise texture | ✅ | ✅ | ❌ |
+| Full RN style props | ✅ | ✅ | ✅ |
 | `blurType` | ✅ | ❌ | ❌ |
+| `enabled` / `autoUpdate` | ✅ | ✅ | ✅ |
 | `blurRadius` downsample | ❌ | ❌ | ✅ |
+| Split-screen / PiP / Freeform | ✅ | ✅ | ✅ |
+| Old Architecture (Paper) | ✅ | ✅ | ✅ |
+| New Architecture (Fabric) | ✅ | ✅ | ✅ |
 
 ---
 
@@ -55,9 +59,7 @@ Minimum deployment target: **iOS 13.0**
 
 ### Android
 
-Minimum SDK: **API 21** (Android 5.0)
-
-No extra configuration required. The package automatically picks the best blur engine for the running API level.
+Minimum SDK: **API 21** (Android 5.0). No extra configuration needed.
 
 ---
 
@@ -94,8 +96,6 @@ export default function Card() {
 
 Blur intensity from `0` (no blur) to `100` (maximum blur).
 
-Approximate CSS `backdrop-filter` equivalents:
-
 | `blurAmount` | CSS equivalent | Visual feel |
 |---|---|---|
 | `5` | `backdrop-blur-sm` (4px) | Subtle hint |
@@ -103,7 +103,7 @@ Approximate CSS `backdrop-filter` equivalents:
 | `25` | `backdrop-blur-md` (12px) | Standard card |
 | `50` | `backdrop-blur-xl` (24px) | Heavy glass |
 | `75` | `backdrop-blur-2xl` | Dense blur |
-| `100` | `backdrop-blur-3xl` | Maximum |
+| `100` | `backdrop-blur-3xl` | Maximum — nearly opaque frosted panel |
 
 ```tsx
 <BlurView blurAmount={30} style={StyleSheet.absoluteFill} />
@@ -126,8 +126,6 @@ backdrop-filter: blur(Xpx);
 background-color: <overlayColor>;
 ```
 
-The alpha channel controls how much blur shows through:
-
 | Value | Effect |
 |---|---|
 | `"#00000000"` | Transparent — pure blur, no tint |
@@ -138,10 +136,6 @@ The alpha channel controls how much blur shows through:
 
 Supported formats: `"transparent"`, `"#RGB"`, `"#RRGGBB"`, `"#RRGGBBAA"`
 
-```tsx
-<BlurView blurAmount={20} overlayColor="#FFFFFF25" style={StyleSheet.absoluteFill} />
-```
-
 ---
 
 ### `blurType`
@@ -152,8 +146,7 @@ Supported formats: `"transparent"`, `"#RGB"`, `"#RRGGBB"`, `"#RRGGBBAA"`
 | Default | `"light"` |
 | Platform | **iOS only** — ignored on Android |
 
-
-**Adaptive styles** (change with light/dark mode — recommended):
+Maps to `UIBlurEffect.Style`. Use `overlayColor` to tint on Android.
 
 | Value | Description |
 |---|---|
@@ -168,9 +161,7 @@ Supported formats: `"transparent"`, `"#RGB"`, `"#RRGGBB"`, `"#RRGGBBAA"`
 | `"systemThickMaterial"` | Thick material |
 | `"systemChromeMaterial"` | For toolbars / nav bars |
 
-Also available: `Light` and `Dark` suffixed variants (e.g. `"systemMaterialDark"`) for explicit mode control. See `BlurType` in types for the full list.
-
- ❗On Android, use `overlayColor` to control the tint instead.
+Also available: `Light` and `Dark` suffixed variants (e.g. `"systemMaterialDark"`). See `BlurType` in types.
 
 ```tsx
 <BlurView blurType="systemMaterial" blurAmount={100} style={StyleSheet.absoluteFill} />
@@ -186,19 +177,7 @@ Also available: `Light` and `Dark` suffixed variants (e.g. `"systemMaterialDark"
 | Default | `"#F2F2F2"` |
 | Platform | iOS + Android |
 
-Solid color shown when blur is unavailable:
-- **iOS**: User enabled *Settings → Accessibility → Display & Text Size → Reduce Transparency*
-- **Android**: Device API level < 21
-
-Should provide sufficient contrast without the blur. Use a semi-opaque version of your background color.
-
-```tsx
-<BlurView
-  blurAmount={20}
-  reducedTransparencyFallbackColor="#1C1C1ECC"
-  style={StyleSheet.absoluteFill}
-/>
-```
+Solid color shown when blur is unavailable (iOS Reduce Transparency enabled, or Android API < 21).
 
 ---
 
@@ -208,19 +187,40 @@ Should provide sufficient contrast without the blur. Use a semi-opaque version o
 |---|---|
 | Type | `number` (integer 1–8) |
 | Default | `4` |
-| Platform | **Android API < 31 only** — ignored on API 31+ and iOS |
+| Platform | **Android API < 31 only** |
 
+RenderScript capture downsample factor. Higher = faster but softer. Ignored on API 31+ and iOS.
 
-| Value | Pixels captured | Quality | Speed |
-|---|---|---|---|
-| `1` | Full res | Sharpest | Slowest |
-| `4` | 1/16 (default) | Good | Fast |
-| `8` | 1/64 | Softer | Fastest |
+---
+
+### `enabled`
+
+| | |
+|---|---|
+| Type | `boolean` |
+| Default | `true` |
+| Platform | iOS + Android |
 
-On **Android API 31+** the blur runs at full resolution on the GPU — this prop has no effect.
+Enable or disable the blur effect. When `false`, the view renders transparently. Useful for toggling blur based on scroll position or performance mode.
 
 ```tsx
-<BlurView blurAmount={20} blurRadius={4} style={StyleSheet.absoluteFill} />
+<BlurView blurAmount={30} enabled={isScrolling ? false : true} style={StyleSheet.absoluteFill} />
+```
+
+---
+
+### `autoUpdate`
+
+| | |
+|---|---|
+| Type | `boolean` |
+| Default | `true` |
+| Platform | iOS + Android |
+
+When `false`, blur is captured once at mount and never updated. Use for completely static backgrounds (e.g. blurred album art) to eliminate all per-frame cost on Android API < 31.
+
+```tsx
+<BlurView blurAmount={40} autoUpdate={false} style={StyleSheet.absoluteFill} />
 ```
 
 ---
@@ -231,7 +231,7 @@ On **Android API 31+** the blur runs at full resolution on the GPU — this prop
 |---|---|
 | Type | `ProgressiveBlurDirection` |
 | Default | `"none"` |
-| Platform | **iOS + Android API 31+** — Android API < 31 shows uniform blur |
+| Platform | **iOS + Android API 31+** |
 
 Direction the blur intensity fades across the view.
 
@@ -244,9 +244,7 @@ Direction the blur intensity fades across the view.
 | `"rightToLeft"` | Right edge | Left edge |
 | `"radial"` | Center | Outer edges |
 
-
 ```tsx
-// Sticky header — full blur at top, fades to nothing at bottom
 <BlurView
   blurAmount={40}
   progressiveBlurDirection="topToBottom"
@@ -266,17 +264,7 @@ Direction the blur intensity fades across the view.
 | Default | `1.0` |
 | Platform | **iOS + Android API 31+** |
 
-Blur intensity at the **start** of the gradient direction.
-
-- `1.0` — full blur at `blurAmount` intensity
-- `0.0` — completely transparent / no blur
-
-"Start" depends on `progressiveBlurDirection`:
-- `"topToBottom"` → top edge
-- `"bottomToTop"` → bottom edge
-- `"leftToRight"` → left edge
-- `"rightToLeft"` → right edge
-- `"radial"` → center
+Blur intensity at the start of the gradient direction. `1.0` = full blur, `0.0` = no blur.
 
 ---
 
@@ -288,9 +276,7 @@ Blur intensity at the **start** of the gradient direction.
 | Default | `0.0` |
 | Platform | **iOS + Android API 31+** |
 
-Blur intensity at the **end** of the gradient direction.
-
-"End" is the opposite edge/point from `progressiveStartIntensity`.
+Blur intensity at the end of the gradient direction.
 
 ---
 
@@ -300,26 +286,55 @@ Blur intensity at the **end** of the gradient direction.
 |---|---|
 | Type | `number` (0.0–1.0) |
 | Default | `0.08` |
-| Platform | **iOS + Android API 31+** — Android API < 31 silently ignores |
+| Platform | **iOS + Android API 31+** |
 
-Noise grain overlay strength. Adds a subtle static grain texture on top of the blur, mimicking the micro-texture of real ground glass and making the blur feel more physical and premium.
+Noise grain overlay for tactile frosted-glass texture.
 
 | Value | Effect |
 |---|---|
 | `0` | No noise — clean digital blur |
-| `0.08` | Subtle, barely perceptible (default) |
-| `0.15` | Noticeable grain (Haze library default) |
+| `0.08` | Subtle grain (default) |
+| `0.15` | Noticeable grain |
 | `0.30` | Heavy grain |
 
+---
+
+## Style props
+
+`BlurView` accepts **all standard React Native View style props** via `StyleSheet` — including `borderRadius`, `borderColor`, `borderWidth`, `opacity`, `backgroundColor`, `elevation`, `shadowColor`, and all others.
+
+### `borderRadius` via StyleSheet
+
+Use `borderRadius` directly inside `style` — it works exactly like any other RN view:
+
 ```tsx
-<BlurView blurAmount={50} noiseFactor={0.12} style={StyleSheet.absoluteFill} />
+// ✅ Via StyleSheet (recommended)
+<BlurView
+  blurAmount={30}
+  overlayColor="#FFFFFF20"
+  style={{
+    borderRadius: 20,
+    overflow: 'hidden',   // required on iOS for clipping
+    ...StyleSheet.absoluteFillObject,
+  }}
+/>
+
+// ✅ Via StyleSheet.create
+const styles = StyleSheet.create({
+  blur: {
+    borderRadius: 16,
+    overflow: 'hidden',
+    position: 'absolute',
+    top: 0, left: 0, right: 0, bottom: 0,
+  },
+});
+
+<BlurView blurAmount={25} overlayColor="#00000040" style={styles.blur} />
 ```
 
----
+> **Note:** Add `overflow: 'hidden'` when using `borderRadius` on iOS to ensure child content is clipped correctly. On Android this is handled automatically via `clipToOutline`.
 
-## Usage examples
-
-### Basic frosted glass card
+### Rounded frosted card
 
 ```tsx
 import { BlurView } from 'react-native-blur-vibe';
@@ -330,22 +345,85 @@ function FrostedCard() {
     <ImageBackground source={require('./bg.jpg')} style={styles.bg}>
       <View style={styles.card}>
         <BlurView
-          blurAmount={30}
-          overlayColor="#FFFFFF20"
+          blurAmount={35}
+          overlayColor="#FFFFFF18"
           noiseFactor={0.1}
-          style={StyleSheet.absoluteFill}
+          style={[StyleSheet.absoluteFill, styles.blur]}
         />
-        <Text style={styles.title}>Hello</Text>
+        <Text style={styles.title}>Now Playing</Text>
       </View>
     </ImageBackground>
   );
 }
+
+const styles = StyleSheet.create({
+  bg: { flex: 1 },
+  card: {
+    margin: 20,
+    borderRadius: 24,
+    overflow: 'hidden',   // clips blur to card shape on iOS
+    padding: 20,
+  },
+  blur: {
+    borderRadius: 24,     // matches card borderRadius
+  },
+  title: { color: '#fff', fontSize: 18, fontWeight: '600' },
+});
+```
+
+### Individual corner radii
+
+```tsx
+<BlurView
+  blurAmount={25}
+  style={{
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+    overflow: 'hidden',
+  }}
+/>
+```
+
+### Border with blur
+
+```tsx
+<BlurView
+  blurAmount={30}
+  overlayColor="#FFFFFF10"
+  style={{
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+    overflow: 'hidden',
+  }}
+/>
+```
+
+---
+
+## Usage examples
+
+### Basic frosted glass card
+
+```tsx
+<ImageBackground source={require('./bg.jpg')} style={styles.bg}>
+  <View style={styles.card}>
+    <BlurView
+      blurAmount={30}
+      overlayColor="#FFFFFF20"
+      noiseFactor={0.1}
+      style={[StyleSheet.absoluteFill, { borderRadius: 20 }]}
+    />
+    <Text style={styles.title}>Hello</Text>
+  </View>
+</ImageBackground>
 ```
 
 ### Sticky header with progressive blur
 
 ```tsx
-// Full blur at top, fades to nothing — used by iOS App Library, Spotlight
 <BlurView
   blurAmount={40}
   overlayColor="#00000020"
@@ -359,7 +437,6 @@ function FrostedCard() {
 ### Bottom sheet scrim
 
 ```tsx
-// No blur at top, full blur at bottom — bottom sheet background
 <BlurView
   blurAmount={50}
   overlayColor="#00000040"
@@ -370,33 +447,44 @@ function FrostedCard() {
 />
 ```
 
-### Music player card (dark frosted glass)
+### Music player card — dark frosted glass
 
 ```tsx
 <BlurView
   blurAmount={60}
-  blurType="systemMaterial"        // iOS: system material
-  overlayColor="#00000050"         // Android: dark tint
+  blurType="systemMaterial"
+  overlayColor="#00000050"
   noiseFactor={0.12}
+  style={[StyleSheet.absoluteFill, { borderRadius: 16 }]}
+/>
+```
+
+### Toggle blur on scroll
+
+```tsx
+const [isScrolling, setIsScrolling] = React.useState(false);
+
+<BlurView
+  blurAmount={30}
+  enabled={!isScrolling}
   style={StyleSheet.absoluteFill}
 />
 ```
 
-### Pure blur, no tint
+### Static background blur (best performance)
 
 ```tsx
-// Maximum blur, fully transparent overlay
+// Capture once, never update — great for album art, splash screens
 <BlurView
   blurAmount={50}
-  overlayColor="#00000000"
+  autoUpdate={false}
+  overlayColor="#00000030"
   style={StyleSheet.absoluteFill}
 />
 ```
 
 ### Inside a Modal
 
-Works out of the box — the blur root is automatically scoped to the nearest `Screen` or `ReactRootView`.
-
 ```tsx
 <Modal visible={visible} transparent>
   <BlurView
@@ -408,7 +496,7 @@ Works out of the box — the blur root is automatically scoped to the nearest `S
 </Modal>
 ```
 
-### Inside FlatList / FlashList cards
+### Inside FlatList / FlashList
 
 ```tsx
 <FlatList
@@ -418,7 +506,7 @@ Works out of the box — the blur root is automatically scoped to the nearest `S
       <BlurView
         blurAmount={20}
         overlayColor="#FFFFFF15"
-        style={StyleSheet.absoluteFill}
+        style={[StyleSheet.absoluteFill, { borderRadius: 12 }]}
       />
       <Text>{item.title}</Text>
     </ImageBackground>
@@ -426,6 +514,8 @@ Works out of the box — the blur root is automatically scoped to the nearest `S
 />
 ```
 
+---
+
 ## TypeScript
 
 Full TypeScript support with detailed JSDoc on every prop.
@@ -438,4 +528,4 @@ import type { BlurViewProps, BlurType, ProgressiveBlurDirection } from 'react-na
 
 ## License
 
-MIT ©[Pritam Nanda](https://github.com/I-am-Pritam-20)
+MIT © [Pritam Nanda](https://github.com/I-am-Pritam-20)

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

@@ -11,19 +11,6 @@ import android.view.ViewOutlineProvider
 import androidx.core.graphics.toColorInt
 import com.facebook.react.views.view.ReactViewGroup
 
-/**
- * BlurVibeView — Android API 21–30 backdrop blur.
- *
- * Delegates all blur work to LegacyBlurController.
- * Extends ReactViewGroup — handles all RN style props (borderRadius,
- * opacity, transforms etc) natively via ReactViewGroup's own draw pipeline.
- *
- * THE STATIC BLUR FIX:
- * draw() is overridden to be a no-op when LegacyBlurController.isCapturing
- * is true. This prevents root.draw() from painting our stale blur output
- * into the capture bitmap. Without this, each frame captures the previous
- * frame's blur output and the blur appears frozen/static.
- */
 class BlurVibeView(context: Context) : ReactViewGroup(context) {
 
   private var blurController: LegacyBlurController? = null
@@ -33,7 +20,8 @@ class BlurVibeView(context: Context) : ReactViewGroup(context) {
 
   init {
     setWillNotDraw(false)
-    // DO NOT call setBackgroundColor — see BlurVibeViewApi31 for explanation.
+    outlineProvider = ViewOutlineProvider.BACKGROUND
+    clipToOutline   = true
   }
 
   // ── Lifecycle ──────────────────────────────────────────────────────────────
@@ -64,11 +52,6 @@ class BlurVibeView(context: Context) : ReactViewGroup(context) {
   }
 
   // ── draw() — suppress self during root capture ────────────────────────────
-  //
-  // When LegacyBlurController is actively capturing (root.draw() in progress),
-  // skip drawing ourselves. This makes us invisible to the capture canvas so
-  // the capture bitmap contains ONLY the content behind us, not our own stale
-  // blur output. Without this, the blur appears static/frozen.
 
   override fun draw(canvas: Canvas) {
     if (blurController?.isCapturing == true) return
@@ -105,17 +88,6 @@ class BlurVibeView(context: Context) : ReactViewGroup(context) {
     cornerRadiusPx = TypedValue.applyDimension(
       TypedValue.COMPLEX_UNIT_DIP, radiusDp, context.resources.displayMetrics
     )
-    if (cornerRadiusPx > 0f) {
-      outlineProvider = object : ViewOutlineProvider() {
-        override fun getOutline(view: View, outline: Outline) {
-          outline.setRoundRect(0, 0, view.width, view.height, cornerRadiusPx)
-        }
-      }
-      clipToOutline = true
-    } else {
-      outlineProvider = ViewOutlineProvider.BACKGROUND
-      clipToOutline   = false
-    }
     invalidate()
   }
 

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

@@ -3,23 +3,25 @@ package com.blurvibe
 import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.BitmapShader
-import android.graphics.BlendMode
-import android.graphics.BlendModeColorFilter
 import android.graphics.Canvas
 import android.graphics.Color
 import android.graphics.LinearGradient
-import android.graphics.Outline
 import android.graphics.Paint
+import android.graphics.PixelFormat
 import android.graphics.PorterDuff
 import android.graphics.PorterDuffXfermode
 import android.graphics.RadialGradient
+import android.graphics.Rect
 import android.graphics.RectF
-import android.graphics.RenderEffect
-import android.graphics.RenderNode
 import android.graphics.Shader
 import android.os.Build
+import android.os.Handler
+import android.os.HandlerThread
+import android.os.Looper
 import android.util.TypedValue
 import android.view.Choreographer
+import android.view.PixelCopy
+import android.view.Surface
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewOutlineProvider
@@ -30,13 +32,16 @@ import com.facebook.react.views.view.ReactViewGroup
 import kotlin.math.min
 import kotlin.random.Random
 
+/**
+ * BlurVibeViewApi31 — Backdrop blur for Android API 31+
+ **/
 @RequiresApi(Build.VERSION_CODES.S)
 class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
 
   // ── Blur params ────────────────────────────────────────────────────────────
 
-  private var blurAmount     = 10f
-  private var overlayColor   = Color.TRANSPARENT
+  private var blurAmount   = 10f
+  private var overlayColor = Color.TRANSPARENT
   private var cornerRadiusPx = 0f
 
   // ── Progressive blur ──────────────────────────────────────────────────────
@@ -51,58 +56,46 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   private var noiseBitmap: Bitmap? = null
   private val noisePaint  = Paint()
 
-  // ── Bitmap + RenderNode ────────────────────────────────────────────────────
-
-  private var internalBitmap: Bitmap? = null
-  private val renderNode = RenderNode("BlurVibeNode")
-
-  // ── Capture exclusion flag ────────────────────────────────────────────────
-  //
-  // THE FIX FOR STATIC BLUR:
-  //
-  // root.draw(canvas) walks the entire view tree including THIS BlurView.
-  // When it reaches us during capture, our onDraw draws the PREVIOUS frame's
-  // blurred bitmap — so the capture contains our own stale output, not just
-  // the content behind us. This makes the blur appear static because each
-  // frame captures the previous frame's blur output, not the live content.
+  // ── Bitmap double-buffer ──────────────────────────────────────────────────
   //
-  // Fix: set isCapturing = true before root.draw(), override draw() to be
-  // a no-op when isCapturing = true. root.draw() then skips us completely,
-  // capturing ONLY the content behind us. This is exactly how Dimezis
-  // BlurView solves the same problem.
-  //
-  // This does NOT cause a flash because we are not changing visibility —
-  // we are only suppressing our own draw() during the off-screen capture.
-  // The view remains visible on screen; we just skip drawing into the
-  // off-screen capture canvas.
+  // pixelCopyBitmap: written by PixelCopy (on its own callback thread)
+  // scaledBitmap:    written by workerThread after downsampling
+  // readyBitmap:     @Volatile — RenderThread reads this in onDraw()
 
-  private var isCapturing = false
+  private var pixelCopyBitmap: Bitmap? = null
+  private var scaledBitmap:    Bitmap? = null
+  @Volatile private var readyBitmap:   Bitmap? = null
 
-  // ── Draw paints ───────────────────────────────────────────────────────────
+  private val capturePaint = Paint(Paint.FILTER_BITMAP_FLAG)
+  private val bitmapPaint  = Paint(Paint.FILTER_BITMAP_FLAG or Paint.ANTI_ALIAS_FLAG)
 
-  private val maskPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-    xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
-  }
-  private val noisePaintFinal = Paint()
+  // ── Worker thread ─────────────────────────────────────────────────────────
+
+  private val workerThread  = HandlerThread("BlurVibeWorker31-${hashCode()}")
+    .also { it.start() }
+  private val workerHandler = Handler(workerThread.looper)
+  private val mainHandler   = Handler(Looper.getMainLooper())
 
-  // ── Root view ─────────────────────────────────────────────────────────────
+  // ── Root / window ─────────────────────────────────────────────────────────
 
-  private var blurRoot: ViewGroup? = null
-  private val myLocation   = IntArray(2)
-  private val rootLocation = IntArray(2)
+  private var blurRoot:  ViewGroup? = null
+  private val myLoc    = IntArray(2)
+  private val rootLoc  = IntArray(2)
 
   // ── State ─────────────────────────────────────────────────────────────────
 
+  var isCapturing    = false
+    private set
   private var blurEnabled    = true
   private var autoUpdate     = true
   private var frameScheduled = false
-  private var initialized    = false
+  private var pixelCopyInFlight = false
 
   // ── Choreographer gate ────────────────────────────────────────────────────
 
   private val frameCallback = Choreographer.FrameCallback {
     frameScheduled = false
-    if (isAttachedToWindow && blurEnabled) updateBlur()
+    if (isAttachedToWindow && blurEnabled) captureAndBlur()
   }
 
   private val preDrawListener = ViewTreeObserver.OnPreDrawListener {
@@ -113,16 +106,20 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     true
   }
 
+  // ── Paint objects ─────────────────────────────────────────────────────────
+
+  private val overlayPaint = Paint(Paint.ANTI_ALIAS_FLAG)
+  private val maskPaint    = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+    xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
+  }
+
   // ── Init ───────────────────────────────────────────────────────────────────
 
   init {
     setWillNotDraw(false)
-    // DO NOT call setBackgroundColor here.
-    // ReactViewGroup manages its own ReactViewBackgroundDrawable which handles
-    // all RN style props: borderRadius, borderColor, borderWidth, opacity,
-    // backgroundColor, shadow, elevation etc.
-    // Calling super.setBackgroundColor() replaces that drawable with a plain
-    // ColorDrawable — destroying all style prop handling.
+    // outlineProvider = BACKGROUND: ReactViewBackgroundDrawable implements
+    // getOutline() correctly for all RN borderRadius variants automatically.
+    outlineProvider = ViewOutlineProvider.BACKGROUND
   }
 
   // ── Lifecycle ──────────────────────────────────────────────────────────────
@@ -132,34 +129,31 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     blurRoot = findBlurRoot()
     safeAddPreDrawListener()
     generateNoiseBitmap()
-    if (measuredWidth > 0 && measuredHeight > 0) initBlur()
+    scheduleFrame()
   }
 
   override fun onDetachedFromWindow() {
-    blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
+    safeRemovePreDrawListener()
     Choreographer.getInstance().removeFrameCallback(frameCallback)
-    frameScheduled = false
-    initialized    = false
-    isCapturing    = false
-    blurRoot       = null
-    noiseBitmap?.recycle();    noiseBitmap    = null
-    internalBitmap?.recycle(); internalBitmap = null
-    renderNode.discardDisplayList()
+    frameScheduled     = false
+    isCapturing        = false
+    pixelCopyInFlight  = false
+    blurRoot           = null
+    readyBitmap        = null
+    noiseBitmap?.recycle(); noiseBitmap = null
+    workerHandler.post { releaseBitmapPool() }
     super.onDetachedFromWindow()
   }
 
   override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
     super.onSizeChanged(w, h, oldw, oldh)
     if (w > 0 && h > 0) {
-      internalBitmap?.recycle(); internalBitmap = null
-      renderNode.discardDisplayList()
-      initialized = false
-      initBlur()
+      readyBitmap = null
+      workerHandler.post { releaseBitmapPool() }
+      scheduleFrame()
     }
   }
 
-  // ── Multi-window safety ───────────────────────────────────────────────────
-
   override fun onWindowFocusChanged(hasWindowFocus: Boolean) {
     super.onWindowFocusChanged(hasWindowFocus)
     if (hasWindowFocus && blurEnabled && autoUpdate) {
@@ -168,114 +162,40 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     }
   }
 
-  private fun safeAddPreDrawListener() {
-    val root = blurRoot ?: return
-    val vto  = root.viewTreeObserver
-    vto.removeOnPreDrawListener(preDrawListener)
-    if (vto.isAlive) vto.addOnPreDrawListener(preDrawListener)
-  }
-
-  // ── Init blur ─────────────────────────────────────────────────────────────
-
-  private fun initBlur() {
-    val w = measuredWidth;  if (w <= 0) return
-    val h = measuredHeight; if (h <= 0) return
-    internalBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
-    renderNode.setPosition(0, 0, w, h)
-    initialized = true
-    updateBlur()
-  }
-
-  // ── Core: capture + blur + render ─────────────────────────────────────────
-
-  private fun updateBlur() {
-    if (!blurEnabled || !initialized) return
-    val root   = blurRoot       ?: return
-    val bitmap = internalBitmap ?: return
-    if (bitmap.isRecycled) return
-
-    // ① Compute this view's offset within the root (window coords — correct
-    //   for all window modes: split-screen, freeform, PiP, DeX)
-    root.getLocationInWindow(rootLocation)
-    getLocationInWindow(myLocation)
-    val offsetX = (myLocation[0] - rootLocation[0]).toFloat()
-    val offsetY = (myLocation[1] - rootLocation[1]).toFloat()
-
-    // ② Capture root content EXCLUDING this view.
-    //   isCapturing = true causes our draw() to be a no-op, so root.draw()
-    //   skips us and captures only the content behind us.
-    isCapturing = true
-    val captureCanvas = Canvas(bitmap)
-    captureCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
-    captureCanvas.translate(-offsetX, -offsetY)
-    try {
-      root.draw(captureCanvas)
-    } catch (_: Exception) {
-      isCapturing = false
-      return
-    }
-    isCapturing = false
-
-    // ③ Record bitmap into RenderNode.
-    //   Drawing a BITMAP into RenderNode is stable on all OEM drivers.
-    //   Drawing a RenderNode into another RenderNode's recording is NOT.
-    renderNode.setPosition(0, 0, bitmap.width, bitmap.height)
-    val nodeCanvas = renderNode.beginRecording()
-    nodeCanvas.drawBitmap(bitmap, 0f, 0f, null)
-    renderNode.endRecording()
-
-    // ④ Apply GPU blur + tint as chained RenderEffects
-    // Double-pass blur: two Gaussian passes = wider spread kernel
-    // Equivalent to sqrt(2) wider sigma — gives frosted-glass light diffusion
-    // CLAMP tile mode: no edge reflection artifacts
-    val radius = blurRadiusFromAmount(blurAmount)
-    val pass1  = RenderEffect.createBlurEffect(radius, radius, Shader.TileMode.CLAMP)
-    val pass2  = RenderEffect.createBlurEffect(radius * 0.5f, radius * 0.5f, Shader.TileMode.CLAMP)
-    val doubleBlur = RenderEffect.createChainEffect(pass2, pass1)  // pass1 first, then pass2
-
-    renderNode.setRenderEffect(
-      if (Color.alpha(overlayColor) > 0) {
-        RenderEffect.createChainEffect(
-          RenderEffect.createColorFilterEffect(
-            BlendModeColorFilter(overlayColor, BlendMode.SRC_ATOP)
-          ),
-          doubleBlur
-        )
-      } else doubleBlur
-    )
-
-    invalidate()
-  }
-
-  // ── draw() override — no-op during capture ────────────────────────────────
-  //
-  // When isCapturing = true (root.draw() is in progress capturing background),
-  // suppress our own draw so we don't paint stale blur into the capture bitmap.
-  // This makes us invisible to root.draw() during capture only —
-  // NOT to the actual screen renderer.
+  // ── draw() — no-op during root capture ────────────────────────────────────
 
   override fun draw(canvas: Canvas) {
-    if (isCapturing) return   // skip self during root capture
+    if (isCapturing) return
     super.draw(canvas)
   }
 
   // ── onDraw ────────────────────────────────────────────────────────────────
 
   override fun onDraw(canvas: Canvas) {
-    if (!blurEnabled || !initialized) return
+    if (!blurEnabled) return
     val w = width.toFloat();  if (w <= 0f) return
     val h = height.toFloat(); if (h <= 0f) return
-    if (!renderNode.hasDisplayList()) return
 
-    // Progressive mask requires a saved layer so DST_IN mask composites correctly
+    val bmp = readyBitmap?.takeIf { !it.isRecycled } ?: run {
+      // No blur ready yet — show overlay color as placeholder
+      if (Color.alpha(overlayColor) > 0) {
+        overlayPaint.color = overlayColor
+        canvas.drawRect(0f, 0f, w, h, overlayPaint)
+      }
+      // Redraw border on top even when no blur ready
+      background?.draw(canvas)
+      return
+    }
+
+    // Step 1: progressive mask layer
     val saveCount = if (progressiveDirection != PROGRESSIVE_NONE) {
       canvas.saveLayer(0f, 0f, w, h, null)
     } else -1
 
-    // Draw GPU-blurred + tinted result from RenderNode
-    canvas.drawRenderNode(renderNode)
+    // Step 2: blurred bitmap
+    canvas.drawBitmap(bmp, null, RectF(0f, 0f, w, h), bitmapPaint)
 
-    // Progressive alpha mask — fades blur across the view
+    // Step 3: progressive alpha mask
     if (progressiveDirection != PROGRESSIVE_NONE && saveCount >= 0) {
       buildProgressiveShader(w, h)?.let { shader ->
         maskPaint.shader = shader
@@ -284,16 +204,262 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
       canvas.restoreToCount(saveCount)
     }
 
-    // Noise grain overlay
+    // Step 4: overlay tint
+    if (Color.alpha(overlayColor) > 0) {
+      overlayPaint.color = overlayColor
+      canvas.drawRect(0f, 0f, w, h, overlayPaint)
+    }
+
+    // Step 5: noise grain
     noiseBitmap?.takeIf { !it.isRecycled && noiseFactor > 0f }?.let { noise ->
-      noisePaintFinal.alpha  = (noiseFactor * 255f).toInt().coerceIn(0, 255)
-      noisePaintFinal.shader = BitmapShader(noise, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT)
-      canvas.drawRect(0f, 0f, w, h, noisePaintFinal)
+      noisePaint.alpha  = (noiseFactor * 255f).toInt().coerceIn(0, 255)
+      noisePaint.shader = BitmapShader(noise, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT)
+      canvas.drawRect(0f, 0f, w, h, noisePaint)
+    }
+    background?.draw(canvas)
+  }
+
+  // ── Capture pipeline — PixelCopy (API 31+) ────────────────────────────────
+
+  private fun captureAndBlur() {
+    if (isCapturing || pixelCopyInFlight) return
+    val root  = blurRoot  ?: return
+    val vw    = width;      if (vw <= 0) return
+    val vh    = height;     if (vh <= 0) return
+
+    // Compute this view's screen rect for PixelCopy
+    getLocationInWindow(myLoc)
+    root.getLocationInWindow(rootLoc)
+
+    // Screen-space rect of the CONTENT BEHIND this view (use root location
+    // as origin since PixelCopy works in window coordinates)
+    val srcRect = Rect(
+      myLoc[0], myLoc[1],
+      myLoc[0] + vw, myLoc[1] + vh
+    )
+
+    val sw = (vw / DOWNSAMPLE).toInt().coerceAtLeast(1)
+    val sh = (vh / DOWNSAMPLE).toInt().coerceAtLeast(1)
+
+    val destBitmap = reuseBitmap(pixelCopyBitmap, vw, vh)
+      .also { pixelCopyBitmap = it }
+
+    // Hide ourselves during PixelCopy so we capture ONLY content behind us
+    isCapturing       = true
+    pixelCopyInFlight = true
+
+    val window = (context as? android.app.Activity)?.window
+      ?: run {
+        // Fallback to root.draw() if window not available
+        isCapturing       = false
+        pixelCopyInFlight = false
+        captureWithRootDraw()
+        return
+      }
+
+    PixelCopy.request(
+      window,
+      srcRect,
+      destBitmap,
+      { result ->
+        isCapturing       = false
+        pixelCopyInFlight = false
+
+        if (result != PixelCopy.SUCCESS) {
+          // PixelCopy failed — fall back to root.draw()
+          mainHandler.post { captureWithRootDraw() }
+          return@request
+        }
+
+        // Blur on worker thread
+        val captureRef = destBitmap
+        workerHandler.post {
+          val scaled = reuseBitmap(scaledBitmap, sw, sh).also { scaledBitmap = it }
+
+          // Downsample
+          Canvas(scaled).drawBitmap(
+            captureRef,
+            Rect(0, 0, captureRef.width, captureRef.height),
+            Rect(0, 0, scaled.width, scaled.height),
+            capturePaint
+          )
+
+          // Multi-pass software Gaussian blur
+          val radius = blurRadiusFromAmount(blurAmount)
+          repeat(BLUR_ROUNDS) { stackBlur(scaled, radius.toInt().coerceAtLeast(1)) }
+
+          readyBitmap = scaled
+          mainHandler.post { invalidate() }
+        }
+      },
+      mainHandler
+    )
+  }
+
+  // ── Fallback: root.draw() when PixelCopy unavailable ─────────────────────
+
+  private fun captureWithRootDraw() {
+    if (isCapturing) return
+    val root = blurRoot ?: return
+    val vw   = width;  if (vw <= 0) return
+    val vh   = height; if (vh <= 0) return
+    val sw   = (vw / DOWNSAMPLE).toInt().coerceAtLeast(1)
+    val sh   = (vh / DOWNSAMPLE).toInt().coerceAtLeast(1)
+
+    root.getLocationInWindow(rootLoc)
+    getLocationInWindow(myLoc)
+    val offsetX = (myLoc[0] - rootLoc[0]).toFloat()
+    val offsetY = (myLoc[1] - rootLoc[1]).toFloat()
+
+    val capture = reuseBitmap(pixelCopyBitmap, vw, vh).also { pixelCopyBitmap = it }
+    val scaled  = reuseBitmap(scaledBitmap,    sw, sh).also { scaledBitmap    = it }
+
+    isCapturing = true
+    val c = Canvas(capture)
+    c.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)
+    c.translate(-offsetX, -offsetY)
+    try { root.draw(c) } catch (_: Exception) { isCapturing = false; return }
+    isCapturing = false
+
+    val captureRef = capture
+    workerHandler.post {
+      Canvas(scaled).drawBitmap(
+        captureRef,
+        Rect(0, 0, captureRef.width, captureRef.height),
+        Rect(0, 0, scaled.width, scaled.height),
+        capturePaint
+      )
+      val radius = blurRadiusFromAmount(blurAmount)
+      repeat(BLUR_ROUNDS) { stackBlur(scaled, radius.toInt().coerceAtLeast(1)) }
+      readyBitmap = scaled
+      mainHandler.post { invalidate() }
+    }
+  }
+
+  // ── Stack blur (pure Kotlin, no deprecated APIs) ──────────────────────────
+  //
+  // Mario Klingemann's StackBlur — O(w×h) regardless of radius.
+  // Fast, no RenderScript, works on all API levels, zero deprecation warnings.
+  // Used by many production apps including Facebook's Fresco library.
+  // radius clamped 1–254 (algorithm limit).
+
+  private fun stackBlur(bmp: Bitmap, radius: Int) {
+    val r = radius.coerceIn(1, 254)
+    val w = bmp.width
+    val h = bmp.height
+    val pixels = IntArray(w * h)
+    bmp.getPixels(pixels, 0, w, 0, 0, w, h)
+
+    val div = r + r + 1
+    val wm = w - 1
+    val hm = h - 1
+    val wh = w * h
+    val divSum = (div + 1) shr 1
+    val divSumSq = divSum * divSum
+    val dv = IntArray(256 * divSumSq) { it / divSumSq }
+
+    var yi = 0
+    val vmin = IntArray(maxOf(w, h))
+    val vmax = IntArray(maxOf(w, h))
+
+    val rStack = IntArray(div)
+    val gStack = IntArray(div)
+    val bStack = IntArray(div)
+
+    for (y in 0 until h) {
+      var rSum = 0; var gSum = 0; var bSum = 0
+      var rOut = 0; var gOut = 0; var bOut = 0
+
+      var p = pixels[yi]
+      var pr = (p shr 16) and 0xFF
+      var pg = (p shr 8)  and 0xFF
+      var pb = p and 0xFF
+
+      for (i in 0 until divSum) {
+        rStack[i] = pr; gStack[i] = pg; bStack[i] = pb
+        rSum += pr * (i + 1); gSum += pg * (i + 1); bSum += pb * (i + 1)
+        rOut += pr; gOut += pg; bOut += pb
+      }
+      for (i in 1 until divSum) {
+        val ii = if (i <= wm) i else wm
+        p  = pixels[yi + ii]
+        pr = (p shr 16) and 0xFF; pg = (p shr 8) and 0xFF; pb = p and 0xFF
+        rStack[i + r] = pr; gStack[i + r] = pg; bStack[i + r] = pb
+        rSum += pr * (divSum - i)
+        gSum += pg * (divSum - i)
+        bSum += pb * (divSum - i)
+      }
+
+      var si = r
+      for (x in 0 until w) {
+        pixels[yi + x] = (-0x1000000 or (dv[rSum] shl 16) or (dv[gSum] shl 8) or dv[bSum])
+        rSum -= rOut; gSum -= gOut; bSum -= bOut
+        rOut -= rStack[si]; gOut -= gStack[si]; bOut -= bStack[si]
+        var sip = si + divSum
+        if (sip >= div) sip -= div
+        pr = rStack[sip]; pg = gStack[sip]; pb = bStack[sip]
+        rOut += pr; gOut += pg; bOut += pb
+        rSum += rOut; gSum += gOut; bSum += bOut
+        if (x < r) vmin[x] = x + r + 1 else if (x + r < wm) vmin[x] = x + r + 1 else vmin[x] = wm
+        if (x > r) vmax[x] = x - r else vmax[x] = 0
+        val sp = pixels[yi + vmin[x]]
+        val vp = pixels[yi + vmax[x]]
+        rStack[sip] = (sp shr 16) and 0xFF
+        gStack[sip] = (sp shr 8)  and 0xFF
+        bStack[sip] = sp and 0xFF
+        rOut += rStack[sip] - ((vp shr 16) and 0xFF)
+        gOut += gStack[sip] - ((vp shr 8) and 0xFF)
+        bOut += bStack[sip] - (vp and 0xFF)
+        if (++si >= div) si = 0
+      }
+      yi += w
     }
 
-    // Let ReactViewGroup draw borders/background on top (handles borderRadius
-    // and all other RN style props natively — no conflict with our blur)
-    super.onDraw(canvas)
+    var xi = 0
+    for (x in 0 until w) {
+      var rSum = 0; var gSum = 0; var bSum = 0
+      var rOut = 0; var gOut = 0; var bOut = 0
+      var yp = -r * w
+      var p  = pixels[xi]
+      var pr = (p shr 16) and 0xFF
+      var pg = (p shr 8)  and 0xFF
+      var pb = p and 0xFF
+      for (i in 0 until divSum) {
+        rStack[i] = pr; gStack[i] = pg; bStack[i] = pb
+        rSum += pr * (i + 1); gSum += pg * (i + 1); bSum += pb * (i + 1)
+        rOut += pr; gOut += pg; bOut += pb
+      }
+      for (i in 1..r) {
+        if (i <= hm) yp += w
+        p  = pixels[xi + yp]
+        pr = (p shr 16) and 0xFF; pg = (p shr 8) and 0xFF; pb = p and 0xFF
+        rStack[i + r] = pr; gStack[i + r] = pg; bStack[i + r] = pb
+        rSum += pr * (divSum - i); gSum += pg * (divSum - i); bSum += pb * (divSum - i)
+      }
+      var si = r
+      for (y in 0 until h) {
+        pixels[xi + y * w] = (-0x1000000 or (dv[rSum] shl 16) or (dv[gSum] shl 8) or dv[bSum])
+        rSum -= rOut; gSum -= gOut; bSum -= bOut
+        rOut -= rStack[si]; gOut -= gStack[si]; bOut -= bStack[si]
+        var sip = si + divSum; if (sip >= div) sip -= div
+        pr = rStack[sip]; pg = gStack[sip]; pb = bStack[sip]
+        rOut += pr; gOut += pg; bOut += pb
+        rSum += rOut; gSum += gOut; bSum += bOut
+        vmin[y] = if (y + r < hm) (y + r + 1) * w else hm * w
+        vmax[y] = if (y > r) (y - r) * w else 0
+        val sp = pixels[xi + vmin[y]]
+        val vp = pixels[xi + vmax[y]]
+        rStack[sip] = (sp shr 16) and 0xFF
+        gStack[sip] = (sp shr 8)  and 0xFF
+        bStack[sip] = sp and 0xFF
+        rOut += rStack[sip] - ((vp shr 16) and 0xFF)
+        gOut += gStack[sip] - ((vp shr 8) and 0xFF)
+        bOut += bStack[sip] - (vp and 0xFF)
+        if (++si >= div) si = 0
+      }
+      xi++
+    }
+    bmp.setPixels(pixels, 0, w, 0, 0, w, h)
   }
 
   // ── Progressive shader ────────────────────────────────────────────────────
@@ -319,8 +485,7 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     val bmp  = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888)
     val rng  = Random(42)
     for (x in 0 until size) for (y in 0 until size) {
-      val v = rng.nextInt(256)
-      bmp.setPixel(x, y, Color.argb(255, v, v, v))
+      val v = rng.nextInt(256); bmp.setPixel(x, y, Color.argb(255, v, v, v))
     }
     noiseBitmap = bmp
   }
@@ -333,27 +498,14 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
 
   fun setOverlayColor(colorString: String?) {
     overlayColor = parseHexColor(colorString ?: "transparent") ?: Color.TRANSPARENT
-    scheduleFrame()
+    invalidate()
   }
 
-  // borderRadius from JS style prop — handled natively by ReactViewGroup.
-  // applyBorderRadius is called by our @ReactProp "borderRadius" binding.
-  // We additionally set clipToOutline so the blur content is clipped correctly.
   fun applyBorderRadius(radiusDp: Float) {
     cornerRadiusPx = TypedValue.applyDimension(
       TypedValue.COMPLEX_UNIT_DIP, radiusDp, context.resources.displayMetrics
     )
-    if (cornerRadiusPx > 0f) {
-      outlineProvider = object : ViewOutlineProvider() {
-        override fun getOutline(view: View, outline: Outline) {
-          outline.setRoundRect(0, 0, view.width, view.height, cornerRadiusPx)
-        }
-      }
-      clipToOutline = true
-    } else {
-      outlineProvider = ViewOutlineProvider.BACKGROUND
-      clipToOutline   = false
-    }
+    clipToOutline = cornerRadiusPx > 0f
     invalidate()
   }
 
@@ -378,22 +530,15 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     blurEnabled = enabled
     if (enabled) { safeAddPreDrawListener(); scheduleFrame() }
     else {
-      blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
+      safeRemovePreDrawListener()
       Choreographer.getInstance().removeFrameCallback(frameCallback)
-      frameScheduled = false
-      renderNode.discardDisplayList()
-      invalidate()
+      frameScheduled = false; readyBitmap = null; invalidate()
     }
   }
 
   fun setAutoUpdate(update: Boolean) {
     autoUpdate = update
-    if (update) safeAddPreDrawListener()
-    else {
-      blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
-      Choreographer.getInstance().removeFrameCallback(frameCallback)
-      frameScheduled = false
-    }
+    if (update) safeAddPreDrawListener() else safeRemovePreDrawListener()
   }
 
   // ── Helpers ────────────────────────────────────────────────────────────────
@@ -405,15 +550,15 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     }
   }
 
-  private fun blurRadiusFromAmount(amount: Float): Float {
-    // Linear mapping: 0→1px, 10→13px, 25→31px, 50→61px, 75→91px, 100→120px
-    // These values match CSS backdrop-filter feel:
-    //   blurAmount=10  ≈ backdrop-blur-sm  (4px CSS = ~13px GPU after downsample)
-    //   blurAmount=25  ≈ backdrop-blur-md  (12px CSS ≈ 31px GPU)
-    //   blurAmount=50  ≈ backdrop-blur-xl  (24px CSS ≈ 61px GPU)
-    //   blurAmount=100 ≈ backdrop-blur-3xl (64px CSS = fully frosted glass)
-    val t = amount.coerceIn(0f, 100f) / 100f
-    return (1f + t * 119f)  // 1–120 linear
+  private fun safeAddPreDrawListener() {
+    val root = blurRoot ?: return
+    val vto  = root.viewTreeObserver
+    vto.removeOnPreDrawListener(preDrawListener)
+    if (vto.isAlive) vto.addOnPreDrawListener(preDrawListener)
+  }
+
+  private fun safeRemovePreDrawListener() {
+    blurRoot?.viewTreeObserver?.removeOnPreDrawListener(preDrawListener)
   }
 
   private fun findBlurRoot(): ViewGroup? {
@@ -430,6 +575,23 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     return rootView as? ViewGroup
   }
 
+  private fun releaseBitmapPool() {
+    pixelCopyBitmap?.recycle(); pixelCopyBitmap = null
+    scaledBitmap?.recycle();    scaledBitmap    = null
+  }
+
+  private fun reuseBitmap(existing: Bitmap?, w: Int, h: Int): Bitmap {
+    if (existing != null && !existing.isRecycled
+        && existing.width == w && existing.height == h) return existing
+    existing?.recycle()
+    return Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
+  }
+
+  private fun blurRadiusFromAmount(amount: Float): Float {
+    val t = amount.coerceIn(0f, 100f) / 100f
+    return (2f + t * 22f)   // 2–24, StackBlur works well in this range per pass
+  }
+
   private fun parseHexColor(s: String): Int? {
     val t = s.trim()
     if (t.equals("transparent", ignoreCase = true)) return Color.TRANSPARENT
@@ -455,6 +617,8 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {}
 
   companion object {
+    private const val DOWNSAMPLE  = 2f
+    private const val BLUR_ROUNDS = 3
     const val PROGRESSIVE_NONE          = 0
     const val PROGRESSIVE_TOP_TO_BOTTOM = 1
     const val PROGRESSIVE_BOTTOM_TO_TOP = 2

package/package.json

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