react-native-blur-vibe 0.1.12 → 0.1.13

package/README.md

@@ -2,26 +2,25 @@
 
 <img width="1500" height="500" alt="github-banner" src="https://github.com/user-attachments/assets/78b2e5ec-5b57-48c0-b984-69cb57cbcf26" />
 <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 full New Architecture (Fabric) 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,21 +3,24 @@ 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.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.renderscript.Allocation
+import android.renderscript.Element
+import android.renderscript.RenderScript
+import android.renderscript.ScriptIntrinsicBlur
 import android.util.TypedValue
 import android.view.Choreographer
 import android.view.View
@@ -30,13 +33,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 +57,54 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
   private var noiseBitmap: Bitmap? = null
   private val noisePaint  = Paint()
 
-  // ── Bitmap + RenderNode ────────────────────────────────────────────────────
+  // ── Double-buffer bitmap pool ─────────────────────────────────────────────
 
-  private var internalBitmap: Bitmap? = null
-  private val renderNode = RenderNode("BlurVibeNode")
+  private var captureBitmap: Bitmap? = null
+  private var scaledBitmap:  Bitmap? = null
+  @Volatile private var readyBitmap:  Bitmap? = null
 
-  // ── 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.
-  //
-  // 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.
+  private val capturePaint = Paint(Paint.FILTER_BITMAP_FLAG)
+  private val bitmapPaint  = Paint(Paint.FILTER_BITMAP_FLAG or Paint.ANTI_ALIAS_FLAG)
 
-  private var isCapturing = false
+  // ── Worker thread — blur runs here, main thread never blocks ──────────────
 
-  // ── Draw paints ───────────────────────────────────────────────────────────
+  private val workerThread  = HandlerThread("BlurVibeWorker31-${hashCode()}")
+    .also { it.start() }
+  private val workerHandler = Handler(workerThread.looper)
+  private val mainHandler   = Handler(Looper.getMainLooper())
 
-  private val maskPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-    xfermode = PorterDuffXfermode(PorterDuff.Mode.DST_IN)
-  }
-  private val noisePaintFinal = Paint()
+  // ── RenderScript (deprecated API 31 but still functional through API 35) ──
+
+  @Suppress("DEPRECATION")
+  private var rs:         RenderScript?        = null
+  @Suppress("DEPRECATION")
+  private var blurScript: ScriptIntrinsicBlur? = null
+  @Suppress("DEPRECATION")
+  private var inAlloc:    Allocation?          = null
+  @Suppress("DEPRECATION")
+  private var outAlloc:   Allocation?          = null
 
   // ── Root view ─────────────────────────────────────────────────────────────
 
   private var blurRoot: ViewGroup? = null
-  private val myLocation   = IntArray(2)
-  private val rootLocation = IntArray(2)
+  private val myLoc   = IntArray(2)
+  private val rootLoc = IntArray(2)
 
   // ── State ─────────────────────────────────────────────────────────────────
 
+  // isCapturing: suppresses our own draw() during root.draw() capture
+  // so we don't paint stale blur into the capture bitmap (static blur bug)
+  var isCapturing    = false
+    private set
   private var blurEnabled    = true
   private var autoUpdate     = true
   private var frameScheduled = false
-  private var initialized    = 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 +115,25 @@ 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.
+    // DO NOT call setBackgroundColor — it replaces ReactViewGroup's
+    // ReactViewBackgroundDrawable, killing all RN style prop handling.
+    //
+    // outlineProvider = BACKGROUND: ReactViewBackgroundDrawable implements
+    // getOutline() for all RN borderRadius variants. clipToOutline=false
+    // by default — only enabled when a non-zero radius is actually set,
+    // to avoid GPU clip stack issues with overflow:hidden + Reanimated.
+    outlineProvider = ViewOutlineProvider.BACKGROUND
   }
 
   // ── Lifecycle ──────────────────────────────────────────────────────────────
@@ -132,34 +143,34 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     blurRoot = findBlurRoot()
     safeAddPreDrawListener()
     generateNoiseBitmap()
-    if (measuredWidth > 0 && measuredHeight > 0) initBlur()
+    workerHandler.post { initRenderScript() }
+    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()
+    readyBitmap    = null
+    noiseBitmap?.recycle(); noiseBitmap = null
+    workerHandler.post {
+      releaseBitmapPool()
+      releaseRenderScript()
+    }
     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 +179,43 @@ 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 ────────────────────────────────
+  // ── draw() — no-op during root 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.
+  // Prevents stale blur output from being captured into the background bitmap.
+  // When isCapturing=true, root.draw() is in progress — we skip ourselves
+  // so only the content BEHIND us is captured.
 
   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 — draw overlay only so view isn't invisible
+      if (Color.alpha(overlayColor) > 0) {
+        overlayPaint.color = overlayColor
+        canvas.drawRect(0f, 0f, w, h, overlayPaint)
+      }
+      super.onDraw(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: draw 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,18 +224,122 @@ 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)
     }
 
-    // Let ReactViewGroup draw borders/background on top (handles borderRadius
-    // and all other RN style props natively — no conflict with our blur)
+    // Step 6: let ReactViewGroup draw borders/radius on top
     super.onDraw(canvas)
   }
 
+  // ── Capture + blur pipeline ───────────────────────────────────────────────
+
+  private fun captureAndBlur() {
+    if (isCapturing) return
+    val root = blurRoot ?: return
+    val rw   = root.width;  if (rw <= 0) return
+    val rh   = root.height; if (rh <= 0) 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)
+
+    // Compute offset — window coords, correct for split-screen/freeform/PiP
+    root.getLocationInWindow(rootLoc)
+    getLocationInWindow(myLoc)
+    val offsetX = (myLoc[0] - rootLoc[0]).toFloat()
+    val offsetY = (myLoc[1] - rootLoc[1]).toFloat()
+
+    val capture = reuseBitmap(captureBitmap, vw, vh).also { captureBitmap = it }
+    val scaled  = reuseBitmap(scaledBitmap,  sw, sh).also { scaledBitmap  = it }
+
+    // Capture — isCapturing suppresses our own draw() so root.draw() skips us
+    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
+
+    // Downsample + blur on worker thread (never blocks main/RenderThread)
+    val captureRef = capture
+    val scaledRef  = scaled
+    val radius     = blurRadiusFromAmount(blurAmount)
+
+    workerHandler.post {
+      // Downsample
+      Canvas(scaledRef).drawBitmap(
+        captureRef,
+        Rect(0, 0, captureRef.width, captureRef.height),
+        Rect(0, 0, scaledRef.width,  scaledRef.height),
+        capturePaint
+      )
+      // Multi-pass blur for wide frosted-glass spread
+      repeat(BLUR_ROUNDS) { blurBitmap(scaledRef, radius) }
+
+      // Atomic swap: readyBitmap is @Volatile — RenderThread sees new value immediately
+      // We never mutate scaledRef after this point until the next capture starts
+      readyBitmap = scaledRef
+
+      mainHandler.post { invalidate() }
+    }
+  }
+
+  // ── RenderScript blur ─────────────────────────────────────────────────────
+
+  @Suppress("DEPRECATION")
+  private fun initRenderScript() {
+    try {
+      rs = RenderScript.create(context)
+      blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs))
+    } catch (_: Exception) {}
+  }
+
+  @Suppress("DEPRECATION")
+  private fun blurBitmap(bmp: Bitmap, radius: Float) {
+    val r  = rs         ?: return softwareBlur(bmp, radius)
+    val sc = blurScript ?: return softwareBlur(bmp, radius)
+    try {
+      val iA = reuseAlloc(inAlloc,  bmp, r).also { inAlloc  = it }
+      val oA = reuseAlloc(outAlloc, bmp, r).also { outAlloc = it }
+      iA.copyFrom(bmp)
+      sc.setRadius(radius.coerceIn(1f, 25f))
+      sc.setInput(iA)
+      sc.forEach(oA)
+      oA.copyTo(bmp)
+    } catch (_: Exception) { softwareBlur(bmp, radius) }
+  }
+
+  private fun softwareBlur(bmp: Bitmap, radius: Float) {
+    val p = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+      maskFilter = android.graphics.BlurMaskFilter(radius, android.graphics.BlurMaskFilter.Blur.NORMAL)
+    }
+    Canvas(bmp).drawBitmap(bmp, 0f, 0f, p)
+  }
+
+  @Suppress("DEPRECATION")
+  private fun releaseRenderScript() {
+    inAlloc?.destroy();    inAlloc    = null
+    outAlloc?.destroy();   outAlloc   = null
+    blurScript?.destroy(); blurScript = null
+    rs?.destroy();         rs         = null
+  }
+
   // ── Progressive shader ────────────────────────────────────────────────────
 
   private fun buildProgressiveShader(w: Float, h: Float): Shader? {
@@ -319,8 +363,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 +376,17 @@ 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
-    }
+    // Only enable clipToOutline when radius > 0.
+    // Keeping it false when not needed avoids GPU clip stack issues
+    // when overflow:hidden is set on parent + Reanimated is animating.
+    clipToOutline = cornerRadiusPx > 0f
     invalidate()
   }
 
@@ -378,22 +411,17 @@ 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()
+      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 +433,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 +458,28 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     return rootView as? ViewGroup
   }
 
+  private fun releaseBitmapPool() {
+    captureBitmap?.recycle(); captureBitmap = null
+    scaledBitmap?.recycle();  scaledBitmap  = null
+  }
+
+  @Suppress("DEPRECATION")
+  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)
+  }
+
+  @Suppress("DEPRECATION")
+  private fun reuseAlloc(existing: Allocation?, src: Bitmap, rs: RenderScript): Allocation {
+    if (existing != null && existing.type.x == src.width && existing.type.y == src.height)
+      return existing
+    existing?.destroy()
+    return Allocation.createFromBitmap(rs, src,
+      Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT)
+  }
+
   private fun parseHexColor(s: String): Int? {
     val t = s.trim()
     if (t.equals("transparent", ignoreCase = true)) return Color.TRANSPARENT
@@ -452,9 +502,19 @@ class BlurVibeViewApi31(context: Context) : ReactViewGroup(context) {
     } catch (_: NumberFormatException) { null }
   }
 
+  private fun blurRadiusFromAmount(amount: Float): Float {
+    // Linear 0→100 maps to 1→25 (RenderScript kernel max is 25).
+    // With BLUR_ROUNDS=4 passes the effective spread is radius × √4 = radius × 2,
+    // so blurAmount=100 gives effective spread of ~50px — properly frosted glass.
+    val t = amount.coerceIn(0f, 100f) / 100f
+    return (1f + t * 24f)
+  }
+
   override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {}
 
   companion object {
+    private const val DOWNSAMPLE  = 2f   // 1/4 pixels — higher quality than legacy
+    private const val BLUR_ROUNDS = 4    // 4 passes — wider Gaussian spread for API 31+
     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.13",
   "description": "React Native package implementing Blur View in iOS and Android",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",