react-native-effects 0.2.0 → 0.3.0

package/lib/module/components/ShaderView/index.js

@@ -1,8 +1,8 @@
 "use strict";
 
-import { PixelRatio, StyleSheet } from 'react-native';
-import { Canvas } from 'react-native-webgpu';
-import { useEffect, useRef } from 'react';
+import { AppState, PixelRatio, StyleSheet } from 'react-native';
+import { Canvas, installWebGPU } from 'react-native-webgpu';
+import { useEffect, useRef, useState } from 'react';
 import { createSynchronizable, scheduleOnRuntime } from 'react-native-worklets';
 import { colorToVec4 } from "../../utils/colors.js";
 import { useWGPUSetup } from "../../hooks/useWGPUSetup.js";
@@ -29,8 +29,22 @@ export default function ShaderView({
   const {
     canvasRef,
     runtime,
-    resources
+    resources,
+    onCanvasLayout
   } = useWGPUSetup();
+
+  // Pause the render loop while the app is backgrounded. The rAF loop otherwise
+  // keeps churning frames against a surface that's offscreen (and often
+  // transiently invalid), wasting battery/GPU. We only pause on a true
+  // 'background' transition — iOS 'inactive' (app switcher peek, notification
+  // pulldown) is left running to avoid flicker on brief, foreground interruptions.
+  const [appActive, setAppActive] = useState(() => (AppState.currentState ?? 'active') !== 'background');
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', state => {
+      setAppActive(state !== 'background');
+    });
+    return () => subscription.remove();
+  }, []);
   const propsSync = useRef(createSynchronizable(new Float64Array(SYNC_SIZE))).current;
 
   // Convert props to flat floats and push to synchronizable
@@ -78,9 +92,12 @@ export default function ShaderView({
     };
   }, [propsSync]);
 
-  // Start render loop when GPU resources are ready
+  // Start render loop when GPU resources are ready and the app is foregrounded.
+  // When the app backgrounds, `appActive` flips false and this effect's cleanup
+  // tears the loop down (via the `cancelled` token below); on return to the
+  // foreground it re-runs and starts a fresh loop.
   useEffect(() => {
-    if (!resources) {
+    if (!resources || !appActive) {
       return;
     }
     const {
@@ -98,6 +115,12 @@ export default function ShaderView({
     scheduleOnRuntime(runtime, () => {
       'worklet';
 
+      // Worklet runtimes start without the WebGPU flag constants
+      // (GPUBufferUsage, GPUTextureUsage, ...). installWebGPU() captures them
+      // into this runtime so they're available below. Idempotent / safe no-op
+      // if already installed.
+      installWebGPU();
+
       // Create pipeline once
       const pipeline = device.createRenderPipeline({
         layout: 'auto',
@@ -138,15 +161,37 @@ export default function ShaderView({
       const uniformData = new Float32Array(UNIFORM_FLOAT_COUNT);
       let accumulatedTime = 0;
       let lastTimestamp = 0;
+      let warned = false;
+      let bufferDestroyed = false;
+
+      // Free this loop's uniform buffer when the loop ends (alive=0 / superseded
+      // by Fast Refresh / unmount). On a fragmentShader change the effect
+      // re-runs and schedules a fresh loop with a new buffer while the device
+      // persists, so without this the old buffer leaks every shader swap.
+      function destroyBuffer() {
+        if (bufferDestroyed) {
+          return;
+        }
+        bufferDestroyed = true;
+        try {
+          uniformBuffer.destroy();
+        } catch {
+          // The device may already have been destroyed on unmount — the buffer
+          // is gone either way, so there's nothing to recover.
+          return;
+        }
+      }
       function render(timestamp) {
         const props = propsSync.getDirty();
         if (props[IDX_ALIVE] === 0) {
+          destroyBuffer();
           return;
         }
 
         // This loop was superseded (Fast Refresh / unmount) — bail without
         // scheduling another frame so it can be garbage-collected.
         if (cancelled.getDirty()[0] === 1) {
+          destroyBuffer();
           return;
         }
 
@@ -211,23 +256,40 @@ export default function ShaderView({
           uniformData[26] = live[2];
           uniformData[27] = live[3];
         }
-        device.queue.writeBuffer(uniformBuffer, 0, uniformData);
-        const commandEncoder = device.createCommandEncoder();
-        const textureView = context.getCurrentTexture().createView();
-        const passEncoder = commandEncoder.beginRenderPass({
-          colorAttachments: [{
-            view: textureView,
-            clearValue: transparent ? [0, 0, 0, 0] : [0, 0, 0, 1],
-            loadOp: 'clear',
-            storeOp: 'store'
-          }]
-        });
-        passEncoder.setPipeline(pipeline);
-        passEncoder.setBindGroup(0, bindGroup);
-        passEncoder.draw(3);
-        passEncoder.end();
-        device.queue.submit([commandEncoder.finish()]);
-        context.present();
+
+        // GPU work can throw when the surface is transiently invalid — the app
+        // backgrounded, the view detached, or the device was lost. Swallow the
+        // failed frame so the loop survives and recovers when the surface comes
+        // back (rather than the worklet crashing or the loop dying silently).
+        try {
+          device.queue.writeBuffer(uniformBuffer, 0, uniformData);
+          const commandEncoder = device.createCommandEncoder();
+          const textureView = context.getCurrentTexture().createView();
+          const passEncoder = commandEncoder.beginRenderPass({
+            colorAttachments: [{
+              view: textureView,
+              clearValue: transparent ? [0, 0, 0, 0] : [0, 0, 0, 1],
+              loadOp: 'clear',
+              storeOp: 'store'
+            }]
+          });
+          passEncoder.setPipeline(pipeline);
+          passEncoder.setBindGroup(0, bindGroup);
+          passEncoder.draw(3);
+          passEncoder.end();
+          device.queue.submit([commandEncoder.finish()]);
+          context.present();
+        } catch (e) {
+          // Warn once to avoid spamming the console every frame on a persistent
+          // failure (e.g. a lost device).
+          if (!warned) {
+            warned = true;
+            console.warn('[react-native-effects] render frame failed:', e);
+          }
+        }
+
+        // Always reschedule animated loops, even after a caught failure, so the
+        // effect self-heals once the surface is valid again.
         if (!isStatic) {
           requestAnimationFrame(render);
         }
@@ -237,11 +299,16 @@ export default function ShaderView({
     return () => {
       cancelled.setBlocking(() => Float64Array.of(1));
     };
-  }, [resources, runtime, propsSync, paramsSynchronizable, fragmentShader, isStatic, transparent]);
+  }, [resources, appActive, runtime, propsSync, paramsSynchronizable, fragmentShader, isStatic, transparent]);
   return /*#__PURE__*/_jsx(Canvas, {
     ref: canvasRef,
+    transparent: transparent,
     style: [styles.canvas, style],
-    ...viewProps
+    ...viewProps,
+    onLayout: event => {
+      onCanvasLayout(event);
+      viewProps.onLayout?.(event);
+    }
   });
 }
 const styles = StyleSheet.create({

package/lib/module/components/ShaderView/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","StyleSheet","Canvas","useEffect","useRef","createSynchronizable","scheduleOnRuntime","colorToVec4","useWGPUSetup","TRIANGLE_VERTEX_SHADER","UNIFORM_BUFFER_SIZE","UNIFORM_FLOAT_COUNT","jsx","_jsx","SYNC_SIZE","IDX_SPEED","IDX_PARAMS","IDX_ALIVE","ShaderView","fragmentShader","colors","speed","params","isStatic","transparent","paramsSynchronizable","style","viewProps","canvasRef","runtime","resources","propsSync","Float64Array","current","data","undefined","c0","r","g","b","a","c1","i","setBlocking","prev","device","context","presentationFormat","dpr","get","cancelled","pipeline","createRenderPipeline","layout","vertex","module","createShaderModule","code","entryPoint","fragment","targets","format","primitive","topology","uniformBuffer","createBuffer","size","usage","GPUBufferUsage","UNIFORM","COPY_DST","bindGroup","createBindGroup","getBindGroupLayout","entries","binding","resource","buffer","uniformData","Float32Array","accumulatedTime","lastTimestamp","render","timestamp","props","getDirty","dt","currentSpeed","canvas","width","height","aspect","live","queue","writeBuffer","commandEncoder","createCommandEncoder","textureView","getCurrentTexture","createView","passEncoder","beginRenderPass","colorAttachments","view","clearValue","loadOp","storeOp","setPipeline","setBindGroup","draw","end","submit","finish","present","requestAnimationFrame","of","ref","styles","create","flex"],"sourceRoot":"../../../../src","sources":["components/ShaderView/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["AppState","PixelRatio","StyleSheet","Canvas","installWebGPU","useEffect","useRef","useState","createSynchronizable","scheduleOnRuntime","colorToVec4","useWGPUSetup","TRIANGLE_VERTEX_SHADER","UNIFORM_BUFFER_SIZE","UNIFORM_FLOAT_COUNT","jsx","_jsx","SYNC_SIZE","IDX_SPEED","IDX_PARAMS","IDX_ALIVE","ShaderView","fragmentShader","colors","speed","params","isStatic","transparent","paramsSynchronizable","style","viewProps","canvasRef","runtime","resources","onCanvasLayout","appActive","setAppActive","currentState","subscription","addEventListener","state","remove","propsSync","Float64Array","current","data","undefined","c0","r","g","b","a","c1","i","setBlocking","prev","device","context","presentationFormat","dpr","get","cancelled","pipeline","createRenderPipeline","layout","vertex","module","createShaderModule","code","entryPoint","fragment","targets","format","primitive","topology","uniformBuffer","createBuffer","size","usage","GPUBufferUsage","UNIFORM","COPY_DST","bindGroup","createBindGroup","getBindGroupLayout","entries","binding","resource","buffer","uniformData","Float32Array","accumulatedTime","lastTimestamp","warned","bufferDestroyed","destroyBuffer","destroy","render","timestamp","props","getDirty","dt","currentSpeed","canvas","width","height","aspect","live","queue","writeBuffer","commandEncoder","createCommandEncoder","textureView","getCurrentTexture","createView","passEncoder","beginRenderPass","colorAttachments","view","clearValue","loadOp","storeOp","setPipeline","setBindGroup","draw","end","submit","finish","present","e","console","warn","requestAnimationFrame","of","ref","styles","onLayout","event","create","flex"],"sourceRoot":"../../../../src","sources":["components/ShaderView/index.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,UAAU,EAAEC,UAAU,QAAQ,cAAc;AAC/D,SAASC,MAAM,EAAEC,aAAa,QAAQ,qBAAqB;AAC3D,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACnD,SAASC,oBAAoB,EAAEC,iBAAiB,QAAQ,uBAAuB;AAC/E,SAASC,WAAW,QAAQ,uBAAoB;AAChD,SAASC,YAAY,QAAQ,6BAA0B;AACvD,SAASC,sBAAsB,QAAQ,yCAAsC;AAC7E,SACEC,mBAAmB,EACnBC,mBAAmB,QACd,2BAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGhC;AACA;AACA,MAAMC,SAAS,GAAG,EAAE;AACpB,MAAMC,SAAS,GAAG,CAAC;AACnB,MAAMC,UAAU,GAAG,CAAC,CAAC,CAAC;AACtB,MAAMC,SAAS,GAAG,EAAE;AAEpB,eAAe,SAASC,UAAUA,CAAC;EACjCC,cAAc;EACdC,MAAM,GAAG,EAAE;EACXC,KAAK,GAAG,GAAG;EACXC,MAAM,GAAG,EAAE;EACXC,QAAQ,GAAG,KAAK;EAChBC,WAAW,GAAG,KAAK;EACnBC,oBAAoB;EACpBC,KAAK;EACL,GAAGC;AACY,CAAC,EAAE;EAClB,MAAM;IAAEC,SAAS;IAAEC,OAAO;IAAEC,SAAS;IAAEC;EAAe,CAAC,GAAGvB,YAAY,CAAC,CAAC;;EAExE;EACA;EACA;EACA;EACA;EACA,MAAM,CAACwB,SAAS,EAAEC,YAAY,CAAC,GAAG7B,QAAQ,CACxC,MAAM,CAACP,QAAQ,CAACqC,YAAY,IAAI,QAAQ,MAAM,YAChD,CAAC;EACDhC,SAAS,CAAC,MAAM;IACd,MAAMiC,YAAY,GAAGtC,QAAQ,CAACuC,gBAAgB,CAAC,QAAQ,EAAGC,KAAK,IAAK;MAClEJ,YAAY,CAACI,KAAK,KAAK,YAAY,CAAC;IACtC,CAAC,CAAC;IACF,OAAO,MAAMF,YAAY,CAACG,MAAM,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,SAAS,GAAGpC,MAAM,CACtBE,oBAAoB,CAAe,IAAImC,YAAY,CAAC1B,SAAS,CAAC,CAChE,CAAC,CAAC2B,OAAO;;EAET;EACAvC,SAAS,CAAC,MAAM;IACd,MAAMwC,IAAI,GAAG,IAAIF,YAAY,CAAC1B,SAAS,CAAC;;IAExC;IACA,IAAIM,MAAM,CAAC,CAAC,CAAC,KAAKuB,SAAS,EAAE;MAC3B,MAAMC,EAAE,GAAGrC,WAAW,CAACa,MAAM,CAAC,CAAC,CAAC,CAAC;MACjCsB,IAAI,CAAC,CAAC,CAAC,GAAGE,EAAE,CAACC,CAAC;MACdH,IAAI,CAAC,CAAC,CAAC,GAAGE,EAAE,CAACE,CAAC;MACdJ,IAAI,CAAC,CAAC,CAAC,GAAGE,EAAE,CAACG,CAAC;MACdL,IAAI,CAAC,CAAC,CAAC,GAAGE,EAAE,CAACI,CAAC;IAChB;;IAEA;IACA,IAAI5B,MAAM,CAAC,CAAC,CAAC,KAAKuB,SAAS,EAAE;MAC3B,MAAMM,EAAE,GAAG1C,WAAW,CAACa,MAAM,CAAC,CAAC,CAAC,CAAC;MACjCsB,IAAI,CAAC,CAAC,CAAC,GAAGO,EAAE,CAACJ,CAAC;MACdH,IAAI,CAAC,CAAC,CAAC,GAAGO,EAAE,CAACH,CAAC;MACdJ,IAAI,CAAC,CAAC,CAAC,GAAGO,EAAE,CAACF,CAAC;MACdL,IAAI,CAAC,CAAC,CAAC,GAAGO,EAAE,CAACD,CAAC;IAChB;;IAEA;IACAN,IAAI,CAAC3B,SAAS,CAAC,GAAGM,KAAK;;IAEvB;IACA,KAAK,IAAI6B,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,CAAC,EAAEA,CAAC,EAAE,EAAE;MAC1BR,IAAI,CAAC1B,UAAU,GAAGkC,CAAC,CAAC,GAAG5B,MAAM,CAAC4B,CAAC,CAAC,IAAI,CAAC;IACvC;;IAEA;IACAR,IAAI,CAACzB,SAAS,CAAC,GAAG,CAAC;IAEnBsB,SAAS,CAACY,WAAW,CAAC,MAAMT,IAAI,CAAC;EACnC,CAAC,EAAE,CAACtB,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEiB,SAAS,CAAC,CAAC;;EAEtC;EACArC,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXqC,SAAS,CAACY,WAAW,CAAEC,IAAI,IAAK;QAC9BA,IAAI,CAACnC,SAAS,CAAC,GAAG,CAAC;QACnB,OAAOmC,IAAI;MACb,CAAC,CAAC;IACJ,CAAC;EACH,CAAC,EAAE,CAACb,SAAS,CAAC,CAAC;;EAEf;EACA;EACA;EACA;EACArC,SAAS,CAAC,MAAM;IACd,IAAI,CAAC4B,SAAS,IAAI,CAACE,SAAS,EAAE;MAC5B;IACF;IAEA,MAAM;MAAEqB,MAAM;MAAEC,OAAO;MAAEC;IAAmB,CAAC,GAAGzB,SAAS;IACzD,MAAM0B,GAAG,GAAG1D,UAAU,CAAC2D,GAAG,CAAC,CAAC;;IAE5B;IACA;IACA;IACA;IACA,MAAMC,SAAS,GAAGrD,oBAAoB,CAAe,IAAImC,YAAY,CAAC,CAAC,CAAC,CAAC;IAEzElC,iBAAiB,CAACuB,OAAO,EAAE,MAAM;MAC/B,SAAS;;MAET;MACA;MACA;MACA;MACA5B,aAAa,CAAC,CAAC;;MAEf;MACA,MAAM0D,QAAQ,GAAGN,MAAM,CAACO,oBAAoB,CAAC;QAC3CC,MAAM,EAAE,MAAM;QACdC,MAAM,EAAE;UACNC,MAAM,EAAEV,MAAM,CAACW,kBAAkB,CAAC;YAAEC,IAAI,EAAExD;UAAuB,CAAC,CAAC;UACnEyD,UAAU,EAAE;QACd,CAAC;QACDC,QAAQ,EAAE;UACRJ,MAAM,EAAEV,MAAM,CAACW,kBAAkB,CAAC;YAAEC,IAAI,EAAE9C;UAAe,CAAC,CAAC;UAC3D+C,UAAU,EAAE,MAAM;UAClBE,OAAO,EAAE,CAAC;YAAEC,MAAM,EAAEd;UAAmB,CAAC;QAC1C,CAAC;QACDe,SAAS,EAAE;UAAEC,QAAQ,EAAE;QAAgB;MACzC,CAAC,CAAC;;MAEF;MACA,MAAMC,aAAa,GAAGnB,MAAM,CAACoB,YAAY,CAAC;QACxCC,IAAI,EAAEhE,mBAAmB;QACzBiE,KAAK,EAAEC,cAAc,CAACC,OAAO,GAAGD,cAAc,CAACE;MACjD,CAAC,CAAC;MAEF,MAAMC,SAAS,GAAG1B,MAAM,CAAC2B,eAAe,CAAC;QACvCnB,MAAM,EAAEF,QAAQ,CAACsB,kBAAkB,CAAC,CAAC,CAAC;QACtCC,OAAO,EAAE,CAAC;UAAEC,OAAO,EAAE,CAAC;UAAEC,QAAQ,EAAE;YAAEC,MAAM,EAAEb;UAAc;QAAE,CAAC;MAC/D,CAAC,CAAC;MAEF,MAAMc,WAAW,GAAG,IAAIC,YAAY,CAAC5E,mBAAmB,CAAC;MACzD,IAAI6E,eAAe,GAAG,CAAC;MACvB,IAAIC,aAAa,GAAG,CAAC;MACrB,IAAIC,MAAM,GAAG,KAAK;MAClB,IAAIC,eAAe,GAAG,KAAK;;MAE3B;MACA;MACA;MACA;MACA,SAASC,aAAaA,CAAA,EAAG;QACvB,IAAID,eAAe,EAAE;UACnB;QACF;QACAA,eAAe,GAAG,IAAI;QACtB,IAAI;UACFnB,aAAa,CAACqB,OAAO,CAAC,CAAC;QACzB,CAAC,CAAC,MAAM;UACN;UACA;UACA;QACF;MACF;MAEA,SAASC,MAAMA,CAACC,SAAiB,EAAE;QACjC,MAAMC,KAAK,GAAGzD,SAAS,CAAC0D,QAAQ,CAAC,CAAC;QAClC,IAAID,KAAK,CAAC/E,SAAS,CAAC,KAAK,CAAC,EAAE;UAC1B2E,aAAa,CAAC,CAAC;UACf;QACF;;QAEA;QACA;QACA,IAAIlC,SAAS,CAACuC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE;UACjCL,aAAa,CAAC,CAAC;UACf;QACF;;QAEA;QACA,MAAMM,EAAE,GAAGT,aAAa,KAAK,CAAC,GAAG,CAAC,GAAG,CAACM,SAAS,GAAGN,aAAa,IAAI,IAAI;QACvEA,aAAa,GAAGM,SAAS;;QAEzB;QACA,MAAMI,YAAY,GAAGH,KAAK,CAACjF,SAAS,CAAE;QACtCyE,eAAe,IAAIU,EAAE,GAAGC,YAAY;;QAEpC;QACA,MAAMC,MAAM,GAAG9C,OAAO,CAAC8C,MAGtB;QACD,MAAMC,KAAK,GAAGD,MAAM,CAACC,KAAK,IAAI,CAAC;QAC/B,MAAMC,MAAM,GAAGF,MAAM,CAACE,MAAM,IAAI,CAAC;QACjC,MAAMC,MAAM,GAAGF,KAAK,GAAGC,MAAM;;QAE7B;QACA;QACAhB,WAAW,CAAC,CAAC,CAAC,GAAGe,KAAK;QACtBf,WAAW,CAAC,CAAC,CAAC,GAAGgB,MAAM;QACvBhB,WAAW,CAAC,CAAC,CAAC,GAAGiB,MAAM;QACvBjB,WAAW,CAAC,CAAC,CAAC,GAAG9B,GAAG;;QAEpB;QACA8B,WAAW,CAAC,CAAC,CAAC,GAAGE,eAAe;QAChCF,WAAW,CAAC,CAAC,CAAC,GAAGY,EAAE;QACnBZ,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC;QAClBA,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC;;QAElB;QACAA,WAAW,CAAC,CAAC,CAAC,GAAGU,KAAK,CAAC,CAAC,CAAE;QAC1BV,WAAW,CAAC,CAAC,CAAC,GAAGU,KAAK,CAAC,CAAC,CAAE;QAC1BV,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAC,CAAC,CAAE;QAC3BV,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAC,CAAC,CAAE;;QAE3B;QACAV,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAC,CAAC,CAAE;QAC3BV,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAC,CAAC,CAAE;QAC3BV,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAC,CAAC,CAAE;QAC3BV,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAC,CAAC,CAAE;;QAE3B;QACAV,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAChF,UAAU,CAAE;QACpCsE,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAChF,UAAU,GAAG,CAAC,CAAE;QACxCsE,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAChF,UAAU,GAAG,CAAC,CAAE;QACxCsE,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAChF,UAAU,GAAG,CAAC,CAAE;;QAExC;QACAsE,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAChF,UAAU,GAAG,CAAC,CAAE;QACxCsE,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAChF,UAAU,GAAG,CAAC,CAAE;QACxCsE,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAChF,UAAU,GAAG,CAAC,CAAE;QACxCsE,WAAW,CAAC,EAAE,CAAC,GAAGU,KAAK,CAAChF,UAAU,GAAG,CAAC,CAAE;;QAExC;QACA;QACA;QACA,IAAIS,oBAAoB,EAAE;UACxB,MAAM+E,IAAI,GAAG/E,oBAAoB,CAACwE,QAAQ,CAAC,CAAC;UAC5CX,WAAW,CAAC,EAAE,CAAC,GAAGkB,IAAI,CAAC,CAAC,CAAE;UAC1BlB,WAAW,CAAC,EAAE,CAAC,GAAGkB,IAAI,CAAC,CAAC,CAAE;UAC1BlB,WAAW,CAAC,EAAE,CAAC,GAAGkB,IAAI,CAAC,CAAC,CAAE;UAC1BlB,WAAW,CAAC,EAAE,CAAC,GAAGkB,IAAI,CAAC,CAAC,CAAE;QAC5B;;QAEA;QACA;QACA;QACA;QACA,IAAI;UACFnD,MAAM,CAACoD,KAAK,CAACC,WAAW,CAAClC,aAAa,EAAE,CAAC,EAAEc,WAAW,CAAC;UAEvD,MAAMqB,cAAc,GAAGtD,MAAM,CAACuD,oBAAoB,CAAC,CAAC;UACpD,MAAMC,WAAW,GAAGvD,OAAO,CAACwD,iBAAiB,CAAC,CAAC,CAACC,UAAU,CAAC,CAAC;UAC5D,MAAMC,WAAW,GAAGL,cAAc,CAACM,eAAe,CAAC;YACjDC,gBAAgB,EAAE,CAChB;cACEC,IAAI,EAAEN,WAAW;cACjBO,UAAU,EAAE5F,WAAW,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;cACrD6F,MAAM,EAAE,OAAO;cACfC,OAAO,EAAE;YACX,CAAC;UAEL,CAAC,CAAC;UAEFN,WAAW,CAACO,WAAW,CAAC5D,QAAQ,CAAC;UACjCqD,WAAW,CAACQ,YAAY,CAAC,CAAC,EAAEzC,SAAS,CAAC;UACtCiC,WAAW,CAACS,IAAI,CAAC,CAAC,CAAC;UACnBT,WAAW,CAACU,GAAG,CAAC,CAAC;UAEjBrE,MAAM,CAACoD,KAAK,CAACkB,MAAM,CAAC,CAAChB,cAAc,CAACiB,MAAM,CAAC,CAAC,CAAC,CAAC;UAC9CtE,OAAO,CAACuE,OAAO,CAAC,CAAC;QACnB,CAAC,CAAC,OAAOC,CAAC,EAAE;UACV;UACA;UACA,IAAI,CAACpC,MAAM,EAAE;YACXA,MAAM,GAAG,IAAI;YACbqC,OAAO,CAACC,IAAI,CAAC,6CAA6C,EAAEF,CAAC,CAAC;UAChE;QACF;;QAEA;QACA;QACA,IAAI,CAACvG,QAAQ,EAAE;UACb0G,qBAAqB,CAACnC,MAAM,CAAC;QAC/B;MACF;MAEAmC,qBAAqB,CAACnC,MAAM,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,MAAM;MACXpC,SAAS,CAACP,WAAW,CAAC,MAAMX,YAAY,CAAC0F,EAAE,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;EACH,CAAC,EAAE,CACDpG,SAAS,EACTE,SAAS,EACTH,OAAO,EACPU,SAAS,EACTd,oBAAoB,EACpBN,cAAc,EACdI,QAAQ,EACRC,WAAW,CACZ,CAAC;EAEF,oBACEX,IAAA,CAACb,MAAM;IACLmI,GAAG,EAAEvG,SAAU;IACfJ,WAAW,EAAEA,WAAY;IACzBE,KAAK,EAAE,CAAC0G,MAAM,CAAChC,MAAM,EAAE1E,KAAK,CAAE;IAAA,GAC1BC,SAAS;IACb0G,QAAQ,EAAGC,KAAK,IAAK;MACnBvG,cAAc,CAACuG,KAAK,CAAC;MACrB3G,SAAS,CAAC0G,QAAQ,GAAGC,KAAK,CAAC;IAC7B;EAAE,CACH,CAAC;AAEN;AAEA,MAAMF,MAAM,GAAGrI,UAAU,CAACwI,MAAM,CAAC;EAC/BnC,MAAM,EAAE;IACNoC,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/hooks/useWGPUSetup.js

@@ -2,36 +2,44 @@
 
 import { PixelRatio } from 'react-native';
 import { useCanvasRef } from 'react-native-webgpu';
-import { useEffect, useState } from 'react';
-import { initWebGPU } from "../utils/initWebGPU.js";
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { BackgroundRuntime } from "../utils/backgroundRuntime.js";
+import { getSharedGPUDevice } from "../utils/gpuDevice.js";
 export function useWGPUSetup() {
   const canvasRef = useCanvasRef();
   const [resources, setResources] = useState(null);
   const runtime = BackgroundRuntime;
+
+  // Physical-pixel size the surface is currently configured for. Used to drive
+  // resize (and to skip redundant reconfigures when the layout pass reports the
+  // same size).
+  const configuredSizeRef = useRef(null);
   useEffect(() => {
     let cancelled = false;
     (async () => {
-      const adapter = await navigator.gpu.requestAdapter();
-      if (!adapter || cancelled) {
-        return;
-      }
-      const device = await adapter.requestDevice();
-      if (cancelled) {
+      // Shared across every ShaderView — see getSharedGPUDevice. Returns null if
+      // no adapter is available.
+      const device = await getSharedGPUDevice();
+      if (!device || cancelled) {
         return;
       }
       const context = canvasRef.current.getContext('webgpu');
       const canvas = context.canvas;
       const dpr = PixelRatio.get();
-      canvas.width = canvas.width * dpr;
-      canvas.height = canvas.height * dpr;
+      const width = Math.max(1, Math.round(canvas.width * dpr));
+      const height = Math.max(1, Math.round(canvas.height * dpr));
+      canvas.width = width;
+      canvas.height = height;
       const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
       context.configure({
         device,
         format: presentationFormat,
         alphaMode: 'premultiplied'
       });
-      initWebGPU(runtime);
+      configuredSizeRef.current = {
+        width,
+        height
+      };
       if (!cancelled) {
         setResources({
           device,
@@ -42,13 +50,54 @@ export function useWGPUSetup() {
     })();
     return () => {
       cancelled = true;
+      // The device is shared across all ShaderViews and lives for the JS
+      // runtime's lifetime, so it must NOT be destroyed here. This view's own
+      // GPU resources (the uniform buffer) are torn down by the render loop when
+      // it stops; the pipeline/shader modules are released once the loop's
+      // worklet closure is garbage-collected.
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  // Resize the drawing buffer and reconfigure the surface whenever the view's
+  // layout changes (most notably device rotation). Without this the buffer keeps
+  // its original dimensions and the shader renders stretched / wrong-aspect. The
+  // render loop reads `canvas.width/height` each frame, so the resolution uniform
+  // picks up the new size on the next frame. No-op until GPU resources are ready
+  // (initial sizing is handled by the setup effect above).
+  const onCanvasLayout = useCallback(event => {
+    if (!resources) {
+      return;
+    }
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    const dpr = PixelRatio.get();
+    const w = Math.max(1, Math.round(width * dpr));
+    const h = Math.max(1, Math.round(height * dpr));
+    const prev = configuredSizeRef.current;
+    if (prev && prev.width === w && prev.height === h) {
+      return;
+    }
+    const canvas = resources.context.canvas;
+    canvas.width = w;
+    canvas.height = h;
+    resources.context.configure({
+      device: resources.device,
+      format: resources.presentationFormat,
+      alphaMode: 'premultiplied'
+    });
+    configuredSizeRef.current = {
+      width: w,
+      height: h
+    };
+  }, [resources]);
   return {
     canvasRef,
     runtime,
-    resources
+    resources,
+    onCanvasLayout
   };
 }
 //# sourceMappingURL=useWGPUSetup.js.map

package/lib/module/hooks/useWGPUSetup.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","useCanvasRef","useEffect","useState","initWebGPU","BackgroundRuntime","useWGPUSetup","canvasRef","resources","setResources","runtime","cancelled","adapter","navigator","gpu","requestAdapter","device","requestDevice","context","current","getContext","canvas","dpr","get","width","height","presentationFormat","getPreferredCanvasFormat","configure","format","alphaMode"],"sourceRoot":"../../../src","sources":["hooks/useWGPUSetup.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AACzC,SACEC,YAAY,QAGP,qBAAqB;AAC5B,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,SAASC,UAAU,QAAQ,wBAAqB;AAChD,SAASC,iBAAiB,QAAQ,+BAA4B;AAc9D,OAAO,SAASC,YAAYA,CAAA,EAAoB;EAC9C,MAAMC,SAAS,GAAGN,YAAY,CAAC,CAAC;EAChC,MAAM,CAACO,SAAS,EAAEC,YAAY,CAAC,GAAGN,QAAQ,CAAsB,IAAI,CAAC;EACrE,MAAMO,OAAO,GAAGL,iBAAiB;EAEjCH,SAAS,CAAC,MAAM;IACd,IAAIS,SAAS,GAAG,KAAK;IAErB,CAAC,YAAY;MACX,MAAMC,OAAO,GAAG,MAAMC,SAAS,CAACC,GAAG,CAACC,cAAc,CAAC,CAAC;MACpD,IAAI,CAACH,OAAO,IAAID,SAAS,EAAE;QACzB;MACF;MAEA,MAAMK,MAAM,GAAG,MAAMJ,OAAO,CAACK,aAAa,CAAC,CAAC;MAC5C,IAAIN,SAAS,EAAE;QACb;MACF;MAEA,MAAMO,OAAO,GAAGX,SAAS,CAACY,OAAO,CAAEC,UAAU,CAAC,QAAQ,CAAE;MACxD,MAAMC,MAAM,GAAGH,OAAO,CAACG,MAGtB;MACD,MAAMC,GAAG,GAAGtB,UAAU,CAACuB,GAAG,CAAC,CAAC;MAC5BF,MAAM,CAACG,KAAK,GAAGH,MAAM,CAACG,KAAK,GAAGF,GAAG;MACjCD,MAAM,CAACI,MAAM,GAAGJ,MAAM,CAACI,MAAM,GAAGH,GAAG;MAEnC,MAAMI,kBAAkB,GAAGb,SAAS,CAACC,GAAG,CAACa,wBAAwB,CAAC,CAAC;MACnET,OAAO,CAACU,SAAS,CAAC;QAChBZ,MAAM;QACNa,MAAM,EAAEH,kBAAkB;QAC1BI,SAAS,EAAE;MACb,CAAC,CAAC;MAEF1B,UAAU,CAACM,OAAO,CAAC;MAEnB,IAAI,CAACC,SAAS,EAAE;QACdF,YAAY,CAAC;UAAEO,MAAM;UAAEE,OAAO;UAAEQ;QAAmB,CAAC,CAAC;MACvD;IACF,CAAC,EAAE,CAAC;IAEJ,OAAO,MAAM;MACXf,SAAS,GAAG,IAAI;IAClB,CAAC;IACD;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IAAEJ,SAAS;IAAEG,OAAO;IAAEF;EAAU,CAAC;AAC1C","ignoreList":[]}
+{"version":3,"names":["PixelRatio","useCanvasRef","useCallback","useEffect","useRef","useState","BackgroundRuntime","getSharedGPUDevice","useWGPUSetup","canvasRef","resources","setResources","runtime","configuredSizeRef","cancelled","device","context","current","getContext","canvas","dpr","get","width","Math","max","round","height","presentationFormat","navigator","gpu","getPreferredCanvasFormat","configure","format","alphaMode","onCanvasLayout","event","nativeEvent","layout","w","h","prev"],"sourceRoot":"../../../src","sources":["hooks/useWGPUSetup.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/utils/gpuDevice.js

@@ -0,0 +1,38 @@
+"use strict";
+
+let devicePromise = null;
+
+/**
+ * Lazily requests a single GPUDevice shared by every ShaderView.
+ *
+ * Requesting an adapter + device per view is expensive (real GPU/memory cost and
+ * slower init), and a screen that mounts several effects would otherwise spin up
+ * N devices on the one background runtime. The promise is cached for the lifetime
+ * of the JS runtime so every view awaits the same device.
+ *
+ * If the device is ever lost, the cache is cleared so the next ShaderView mount
+ * requests a fresh one instead of awaiting a dead device forever.
+ */
+export function getSharedGPUDevice() {
+  if (devicePromise) {
+    return devicePromise;
+  }
+  const promise = (async () => {
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) {
+      return null;
+    }
+    const device = await adapter.requestDevice();
+    device.lost?.then(() => {
+      // Only clear if we're still the cached promise, so we don't clobber a
+      // newer device that a later mount may already have requested.
+      if (devicePromise === promise) {
+        devicePromise = null;
+      }
+    });
+    return device;
+  })();
+  devicePromise = promise;
+  return promise;
+}
+//# sourceMappingURL=gpuDevice.js.map

package/lib/module/utils/gpuDevice.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["devicePromise","getSharedGPUDevice","promise","adapter","navigator","gpu","requestAdapter","device","requestDevice","lost","then"],"sourceRoot":"../../../src","sources":["utils/gpuDevice.ts"],"mappings":";;AAAA,IAAIA,aAA+C,GAAG,IAAI;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAAA,EAA8B;EAC9D,IAAID,aAAa,EAAE;IACjB,OAAOA,aAAa;EACtB;EAEA,MAAME,OAAO,GAAG,CAAC,YAAY;IAC3B,MAAMC,OAAO,GAAG,MAAMC,SAAS,CAACC,GAAG,CAACC,cAAc,CAAC,CAAC;IACpD,IAAI,CAACH,OAAO,EAAE;MACZ,OAAO,IAAI;IACb;IAEA,MAAMI,MAAM,GAAG,MAAMJ,OAAO,CAACK,aAAa,CAAC,CAAC;IAC5CD,MAAM,CAACE,IAAI,EAAEC,IAAI,CAAC,MAAM;MACtB;MACA;MACA,IAAIV,aAAa,KAAKE,OAAO,EAAE;QAC7BF,aAAa,GAAG,IAAI;MACtB;IACF,CAAC,CAAC;IACF,OAAOO,MAAM;EACf,CAAC,EAAE,CAAC;EAEJP,aAAa,GAAGE,OAAO;EACvB,OAAOA,OAAO;AAChB","ignoreList":[]}

package/lib/typescript/src/components/ShaderView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ShaderView/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAS/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,cAAc,EACd,MAAW,EACX,KAAW,EACX,MAAW,EACX,QAAgB,EAChB,WAAmB,EACnB,oBAAoB,EACpB,KAAK,EACL,GAAG,SAAS,EACb,EAAE,eAAe,+BAiOjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ShaderView/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAS/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,cAAc,EACd,MAAW,EACX,KAAW,EACX,MAAW,EACX,QAAgB,EAChB,WAAmB,EACnB,oBAAoB,EACpB,KAAK,EACL,GAAG,SAAS,EACb,EAAE,eAAe,+BAwSjB"}

package/lib/typescript/src/hooks/useWGPUSetup.d.ts

@@ -1,5 +1,6 @@
+import { type LayoutChangeEvent } from 'react-native';
 import { type CanvasRef, type RNCanvasContext } from 'react-native-webgpu';
-import type { WorkletRuntime } from 'react-native-worklets';
+import { type WorkletRuntime } from 'react-native-worklets';
 type GPUResources = {
     device: GPUDevice;
     context: RNCanvasContext;
@@ -9,6 +10,8 @@ type WGPUSetupResult = {
     canvasRef: React.RefObject<CanvasRef>;
     runtime: WorkletRuntime;
     resources: GPUResources | null;
+    /** Wire to `<Canvas onLayout>` so the surface resizes on rotation/layout change. */
+    onCanvasLayout: (event: LayoutChangeEvent) => void;
 };
 export declare function useWGPUSetup(): WGPUSetupResult;
 export {};

package/lib/typescript/src/hooks/useWGPUSetup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWGPUSetup.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useWGPUSetup.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAI5D,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,eAAe,CAAC;IACzB,kBAAkB,EAAE,gBAAgB,CAAC;CACtC,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,OAAO,EAAE,cAAc,CAAC;IACxB,SAAS,EAAE,YAAY,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,wBAAgB,YAAY,IAAI,eAAe,CAiD9C"}
+{"version":3,"file":"useWGPUSetup.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useWGPUSetup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,eAAe,EACrB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAI5D,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,eAAe,CAAC;IACzB,kBAAkB,EAAE,gBAAgB,CAAC;CACtC,CAAC;AAOF,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,OAAO,EAAE,cAAc,CAAC;IACxB,SAAS,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,oFAAoF;IACpF,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF,wBAAgB,YAAY,IAAI,eAAe,CA0F9C"}

package/lib/typescript/src/utils/gpuDevice.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Lazily requests a single GPUDevice shared by every ShaderView.
+ *
+ * Requesting an adapter + device per view is expensive (real GPU/memory cost and
+ * slower init), and a screen that mounts several effects would otherwise spin up
+ * N devices on the one background runtime. The promise is cached for the lifetime
+ * of the JS runtime so every view awaits the same device.
+ *
+ * If the device is ever lost, the cache is cleared so the next ShaderView mount
+ * requests a fresh one instead of awaiting a dead device forever.
+ */
+export declare function getSharedGPUDevice(): Promise<GPUDevice | null>;
+//# sourceMappingURL=gpuDevice.d.ts.map

package/lib/typescript/src/utils/gpuDevice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gpuDevice.d.ts","sourceRoot":"","sources":["../../../../src/utils/gpuDevice.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CAwB9D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-effects",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "WebGPU-powered visual effects running on a background thread in React Native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -89,7 +89,7 @@
     "react-native-builder-bob": "^0.41.0",
     "react-native-gesture-handler": "2.31.1",
     "react-native-reanimated": "4.3.1",
-    "react-native-webgpu": "0.5.14",
+    "react-native-webgpu": "0.5.15",
     "react-native-worklets": "0.8.3",
     "release-it": "^20.2.0",
     "turbo": "^2.9.16",

package/src/components/ShaderView/index.tsx

@@ -1,6 +1,6 @@
-import { PixelRatio, StyleSheet } from 'react-native';
-import { Canvas } from 'react-native-webgpu';
-import { useEffect, useRef } from 'react';
+import { AppState, PixelRatio, StyleSheet } from 'react-native';
+import { Canvas, installWebGPU } from 'react-native-webgpu';
+import { useEffect, useRef, useState } from 'react';
 import { createSynchronizable, scheduleOnRuntime } from 'react-native-worklets';
 import { colorToVec4 } from '../../utils/colors';
 import { useWGPUSetup } from '../../hooks/useWGPUSetup';
@@ -29,7 +29,22 @@ export default function ShaderView({
   style,
   ...viewProps
 }: ShaderViewProps) {
-  const { canvasRef, runtime, resources } = useWGPUSetup();
+  const { canvasRef, runtime, resources, onCanvasLayout } = useWGPUSetup();
+
+  // Pause the render loop while the app is backgrounded. The rAF loop otherwise
+  // keeps churning frames against a surface that's offscreen (and often
+  // transiently invalid), wasting battery/GPU. We only pause on a true
+  // 'background' transition — iOS 'inactive' (app switcher peek, notification
+  // pulldown) is left running to avoid flicker on brief, foreground interruptions.
+  const [appActive, setAppActive] = useState(
+    () => (AppState.currentState ?? 'active') !== 'background'
+  );
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (state) => {
+      setAppActive(state !== 'background');
+    });
+    return () => subscription.remove();
+  }, []);
 
   const propsSync = useRef(
     createSynchronizable<Float64Array>(new Float64Array(SYNC_SIZE))
@@ -81,9 +96,12 @@ export default function ShaderView({
     };
   }, [propsSync]);
 
-  // Start render loop when GPU resources are ready
+  // Start render loop when GPU resources are ready and the app is foregrounded.
+  // When the app backgrounds, `appActive` flips false and this effect's cleanup
+  // tears the loop down (via the `cancelled` token below); on return to the
+  // foreground it re-runs and starts a fresh loop.
   useEffect(() => {
-    if (!resources) {
+    if (!resources || !appActive) {
       return;
     }
 
@@ -99,6 +117,12 @@ export default function ShaderView({
     scheduleOnRuntime(runtime, () => {
       'worklet';
 
+      // Worklet runtimes start without the WebGPU flag constants
+      // (GPUBufferUsage, GPUTextureUsage, ...). installWebGPU() captures them
+      // into this runtime so they're available below. Idempotent / safe no-op
+      // if already installed.
+      installWebGPU();
+
       // Create pipeline once
       const pipeline = device.createRenderPipeline({
         layout: 'auto',
@@ -128,16 +152,38 @@ export default function ShaderView({
       const uniformData = new Float32Array(UNIFORM_FLOAT_COUNT);
       let accumulatedTime = 0;
       let lastTimestamp = 0;
+      let warned = false;
+      let bufferDestroyed = false;
+
+      // Free this loop's uniform buffer when the loop ends (alive=0 / superseded
+      // by Fast Refresh / unmount). On a fragmentShader change the effect
+      // re-runs and schedules a fresh loop with a new buffer while the device
+      // persists, so without this the old buffer leaks every shader swap.
+      function destroyBuffer() {
+        if (bufferDestroyed) {
+          return;
+        }
+        bufferDestroyed = true;
+        try {
+          uniformBuffer.destroy();
+        } catch {
+          // The device may already have been destroyed on unmount — the buffer
+          // is gone either way, so there's nothing to recover.
+          return;
+        }
+      }
 
       function render(timestamp: number) {
         const props = propsSync.getDirty();
         if (props[IDX_ALIVE] === 0) {
+          destroyBuffer();
           return;
         }
 
         // This loop was superseded (Fast Refresh / unmount) — bail without
         // scheduling another frame so it can be garbage-collected.
         if (cancelled.getDirty()[0] === 1) {
+          destroyBuffer();
           return;
         }
 
@@ -206,29 +252,44 @@ export default function ShaderView({
           uniformData[27] = live[3]!;
         }
 
-        device.queue.writeBuffer(uniformBuffer, 0, uniformData);
-
-        const commandEncoder = device.createCommandEncoder();
-        const textureView = context.getCurrentTexture().createView();
-        const passEncoder = commandEncoder.beginRenderPass({
-          colorAttachments: [
-            {
-              view: textureView,
-              clearValue: transparent ? [0, 0, 0, 0] : [0, 0, 0, 1],
-              loadOp: 'clear',
-              storeOp: 'store',
-            },
-          ],
-        });
-
-        passEncoder.setPipeline(pipeline);
-        passEncoder.setBindGroup(0, bindGroup);
-        passEncoder.draw(3);
-        passEncoder.end();
-
-        device.queue.submit([commandEncoder.finish()]);
-        context.present();
+        // GPU work can throw when the surface is transiently invalid — the app
+        // backgrounded, the view detached, or the device was lost. Swallow the
+        // failed frame so the loop survives and recovers when the surface comes
+        // back (rather than the worklet crashing or the loop dying silently).
+        try {
+          device.queue.writeBuffer(uniformBuffer, 0, uniformData);
+
+          const commandEncoder = device.createCommandEncoder();
+          const textureView = context.getCurrentTexture().createView();
+          const passEncoder = commandEncoder.beginRenderPass({
+            colorAttachments: [
+              {
+                view: textureView,
+                clearValue: transparent ? [0, 0, 0, 0] : [0, 0, 0, 1],
+                loadOp: 'clear',
+                storeOp: 'store',
+              },
+            ],
+          });
+
+          passEncoder.setPipeline(pipeline);
+          passEncoder.setBindGroup(0, bindGroup);
+          passEncoder.draw(3);
+          passEncoder.end();
+
+          device.queue.submit([commandEncoder.finish()]);
+          context.present();
+        } catch (e) {
+          // Warn once to avoid spamming the console every frame on a persistent
+          // failure (e.g. a lost device).
+          if (!warned) {
+            warned = true;
+            console.warn('[react-native-effects] render frame failed:', e);
+          }
+        }
 
+        // Always reschedule animated loops, even after a caught failure, so the
+        // effect self-heals once the surface is valid again.
         if (!isStatic) {
           requestAnimationFrame(render);
         }
@@ -242,6 +303,7 @@ export default function ShaderView({
     };
   }, [
     resources,
+    appActive,
     runtime,
     propsSync,
     paramsSynchronizable,
@@ -251,7 +313,16 @@ export default function ShaderView({
   ]);
 
   return (
-    <Canvas ref={canvasRef} style={[styles.canvas, style]} {...viewProps} />
+    <Canvas
+      ref={canvasRef}
+      transparent={transparent}
+      style={[styles.canvas, style]}
+      {...viewProps}
+      onLayout={(event) => {
+        onCanvasLayout(event);
+        viewProps.onLayout?.(event);
+      }}
+    />
   );
 }
 

package/src/hooks/useWGPUSetup.tsx

@@ -1,13 +1,13 @@
-import { PixelRatio } from 'react-native';
+import { PixelRatio, type LayoutChangeEvent } from 'react-native';
 import {
   useCanvasRef,
   type CanvasRef,
   type RNCanvasContext,
 } from 'react-native-webgpu';
-import { useEffect, useState } from 'react';
-import type { WorkletRuntime } from 'react-native-worklets';
-import { initWebGPU } from '../utils/initWebGPU';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { type WorkletRuntime } from 'react-native-worklets';
 import { BackgroundRuntime } from '../utils/backgroundRuntime';
+import { getSharedGPUDevice } from '../utils/gpuDevice';
 
 type GPUResources = {
   device: GPUDevice;
@@ -15,10 +15,17 @@ type GPUResources = {
   presentationFormat: GPUTextureFormat;
 };
 
+type CanvasWithSize = RNCanvasContext['canvas'] & {
+  width: number;
+  height: number;
+};
+
 type WGPUSetupResult = {
   canvasRef: React.RefObject<CanvasRef>;
   runtime: WorkletRuntime;
   resources: GPUResources | null;
+  /** Wire to `<Canvas onLayout>` so the surface resizes on rotation/layout change. */
+  onCanvasLayout: (event: LayoutChangeEvent) => void;
 };
 
 export function useWGPUSetup(): WGPUSetupResult {
@@ -26,28 +33,31 @@ export function useWGPUSetup(): WGPUSetupResult {
   const [resources, setResources] = useState<GPUResources | null>(null);
   const runtime = BackgroundRuntime;
 
+  // Physical-pixel size the surface is currently configured for. Used to drive
+  // resize (and to skip redundant reconfigures when the layout pass reports the
+  // same size).
+  const configuredSizeRef = useRef<{ width: number; height: number } | null>(
+    null
+  );
+
   useEffect(() => {
     let cancelled = false;
 
     (async () => {
-      const adapter = await navigator.gpu.requestAdapter();
-      if (!adapter || cancelled) {
-        return;
-      }
-
-      const device = await adapter.requestDevice();
-      if (cancelled) {
+      // Shared across every ShaderView — see getSharedGPUDevice. Returns null if
+      // no adapter is available.
+      const device = await getSharedGPUDevice();
+      if (!device || cancelled) {
         return;
       }
 
       const context = canvasRef.current!.getContext('webgpu')!;
-      const canvas = context.canvas as typeof context.canvas & {
-        width: number;
-        height: number;
-      };
+      const canvas = context.canvas as CanvasWithSize;
       const dpr = PixelRatio.get();
-      canvas.width = canvas.width * dpr;
-      canvas.height = canvas.height * dpr;
+      const width = Math.max(1, Math.round(canvas.width * dpr));
+      const height = Math.max(1, Math.round(canvas.height * dpr));
+      canvas.width = width;
+      canvas.height = height;
 
       const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
       context.configure({
@@ -55,8 +65,7 @@ export function useWGPUSetup(): WGPUSetupResult {
         format: presentationFormat,
         alphaMode: 'premultiplied',
       });
-
-      initWebGPU(runtime);
+      configuredSizeRef.current = { width, height };
 
       if (!cancelled) {
         setResources({ device, context, presentationFormat });
@@ -65,9 +74,48 @@ export function useWGPUSetup(): WGPUSetupResult {
 
     return () => {
       cancelled = true;
+      // The device is shared across all ShaderViews and lives for the JS
+      // runtime's lifetime, so it must NOT be destroyed here. This view's own
+      // GPU resources (the uniform buffer) are torn down by the render loop when
+      // it stops; the pipeline/shader modules are released once the loop's
+      // worklet closure is garbage-collected.
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return { canvasRef, runtime, resources };
+  // Resize the drawing buffer and reconfigure the surface whenever the view's
+  // layout changes (most notably device rotation). Without this the buffer keeps
+  // its original dimensions and the shader renders stretched / wrong-aspect. The
+  // render loop reads `canvas.width/height` each frame, so the resolution uniform
+  // picks up the new size on the next frame. No-op until GPU resources are ready
+  // (initial sizing is handled by the setup effect above).
+  const onCanvasLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (!resources) {
+        return;
+      }
+      const { width, height } = event.nativeEvent.layout;
+      const dpr = PixelRatio.get();
+      const w = Math.max(1, Math.round(width * dpr));
+      const h = Math.max(1, Math.round(height * dpr));
+
+      const prev = configuredSizeRef.current;
+      if (prev && prev.width === w && prev.height === h) {
+        return;
+      }
+
+      const canvas = resources.context.canvas as CanvasWithSize;
+      canvas.width = w;
+      canvas.height = h;
+      resources.context.configure({
+        device: resources.device,
+        format: resources.presentationFormat,
+        alphaMode: 'premultiplied',
+      });
+      configuredSizeRef.current = { width: w, height: h };
+    },
+    [resources]
+  );
+
+  return { canvasRef, runtime, resources, onCanvasLayout };
 }

package/src/utils/gpuDevice.ts

@@ -0,0 +1,38 @@
+let devicePromise: Promise<GPUDevice | null> | null = null;
+
+/**
+ * Lazily requests a single GPUDevice shared by every ShaderView.
+ *
+ * Requesting an adapter + device per view is expensive (real GPU/memory cost and
+ * slower init), and a screen that mounts several effects would otherwise spin up
+ * N devices on the one background runtime. The promise is cached for the lifetime
+ * of the JS runtime so every view awaits the same device.
+ *
+ * If the device is ever lost, the cache is cleared so the next ShaderView mount
+ * requests a fresh one instead of awaiting a dead device forever.
+ */
+export function getSharedGPUDevice(): Promise<GPUDevice | null> {
+  if (devicePromise) {
+    return devicePromise;
+  }
+
+  const promise = (async () => {
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) {
+      return null;
+    }
+
+    const device = await adapter.requestDevice();
+    device.lost?.then(() => {
+      // Only clear if we're still the cached promise, so we don't clobber a
+      // newer device that a later mount may already have requested.
+      if (devicePromise === promise) {
+        devicePromise = null;
+      }
+    });
+    return device;
+  })();
+
+  devicePromise = promise;
+  return promise;
+}

package/lib/module/utils/initWebGPU.js

@@ -1,40 +0,0 @@
-"use strict";
-
-import { scheduleOnRuntime } from 'react-native-worklets';
-
-/**
- * Installs WebGPU globals on the given worklet runtime.
- *
- * Worklet runtimes run on a separate JS context that lacks browser-like globals.
- * This function captures WebGPU constants and `navigator.gpu` from the RN thread
- * and injects them into the worklet's `globalThis` so that WebGPU code can run
- * as if it were in a browser environment.
- *
- * @param runtime - The worklet runtime to initialize
- */
-export function initWebGPU(runtime) {
-  const navigator = globalThis.navigator;
-  const GPUBufferUsage = globalThis.GPUBufferUsage;
-  const GPUColorWrite = globalThis.GPUColorWrite;
-  const GPUMapMode = globalThis.GPUMapMode;
-  const GPUShaderStage = globalThis.GPUShaderStage;
-  const GPUTextureUsage = globalThis.GPUTextureUsage;
-  scheduleOnRuntime(runtime, () => {
-    'worklet';
-
-    if (globalThis.self) {
-      return;
-    }
-    globalThis.self = globalThis;
-    globalThis.navigator = {
-      gpu: navigator.gpu
-    };
-    globalThis.GPUBufferUsage = GPUBufferUsage;
-    globalThis.GPUColorWrite = GPUColorWrite;
-    globalThis.GPUMapMode = GPUMapMode;
-    globalThis.GPUShaderStage = GPUShaderStage;
-    globalThis.GPUTextureUsage = GPUTextureUsage;
-    globalThis.setImmediate = globalThis.requestAnimationFrame;
-  });
-}
-//# sourceMappingURL=initWebGPU.js.map

package/lib/module/utils/initWebGPU.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["scheduleOnRuntime","initWebGPU","runtime","navigator","globalThis","GPUBufferUsage","GPUColorWrite","GPUMapMode","GPUShaderStage","GPUTextureUsage","self","gpu","setImmediate","requestAnimationFrame"],"sourceRoot":"../../../src","sources":["utils/initWebGPU.ts"],"mappings":";;AAAA,SAASA,iBAAiB,QAA6B,uBAAuB;;AAE9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAACC,OAAuB,EAAE;EAClD,MAAMC,SAAS,GAAGC,UAAU,CAACD,SAAyB;EACtD,MAAME,cAAc,GAAGD,UAAU,CAACC,cAAc;EAChD,MAAMC,aAAa,GAAGF,UAAU,CAACE,aAAa;EAC9C,MAAMC,UAAU,GAAGH,UAAU,CAACG,UAAU;EACxC,MAAMC,cAAc,GAAGJ,UAAU,CAACI,cAAc;EAChD,MAAMC,eAAe,GAAGL,UAAU,CAACK,eAAe;EAElDT,iBAAiB,CAACE,OAAO,EAAE,MAAM;IAC/B,SAAS;;IAET,IAAIE,UAAU,CAACM,IAAI,EAAE;MACnB;IACF;IACAN,UAAU,CAACM,IAAI,GAAGN,UAAU;IAC5BA,UAAU,CAACD,SAAS,GAAG;MAAEQ,GAAG,EAAER,SAAS,CAACQ;IAAI,CAAyB;IACrEP,UAAU,CAACC,cAAc,GAAGA,cAAc;IAC1CD,UAAU,CAACE,aAAa,GAAGA,aAAa;IACxCF,UAAU,CAACG,UAAU,GAAGA,UAAU;IAClCH,UAAU,CAACI,cAAc,GAAGA,cAAc;IAC1CJ,UAAU,CAACK,eAAe,GAAGA,eAAe;IAC5CL,UAAU,CAACQ,YAAY,GACrBR,UAAU,CAACS,qBAA4C;EAC3D,CAAC,CAAC;AACJ","ignoreList":[]}

package/lib/typescript/src/utils/initWebGPU.d.ts

@@ -1,23 +0,0 @@
-import { type WorkletRuntime } from 'react-native-worklets';
-/**
- * Installs WebGPU globals on the given worklet runtime.
- *
- * Worklet runtimes run on a separate JS context that lacks browser-like globals.
- * This function captures WebGPU constants and `navigator.gpu` from the RN thread
- * and injects them into the worklet's `globalThis` so that WebGPU code can run
- * as if it were in a browser environment.
- *
- * @param runtime - The worklet runtime to initialize
- */
-export declare function initWebGPU(runtime: WorkletRuntime): void;
-declare global {
-    var self: typeof globalThis;
-    var _WORKLET: boolean | undefined;
-    var performance: {
-        now(): number;
-    };
-    interface Navigator {
-        gpu: GPU;
-    }
-}
-//# sourceMappingURL=initWebGPU.d.ts.map

package/lib/typescript/src/utils/initWebGPU.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"initWebGPU.d.ts","sourceRoot":"","sources":["../../../../src/utils/initWebGPU.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE/E;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,cAAc,QAwBjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,IAAI,IAAI,EAAE,OAAO,UAAU,CAAC;IAC5B,IAAI,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,IAAI,WAAW,EAAE;QAAE,GAAG,IAAI,MAAM,CAAA;KAAE,CAAC;IAEnC,UAAU,SAAS;QACjB,GAAG,EAAE,GAAG,CAAC;KACV;CACF"}

package/src/utils/initWebGPU.ts

@@ -1,47 +0,0 @@
-import { scheduleOnRuntime, type WorkletRuntime } from 'react-native-worklets';
-
-/**
- * Installs WebGPU globals on the given worklet runtime.
- *
- * Worklet runtimes run on a separate JS context that lacks browser-like globals.
- * This function captures WebGPU constants and `navigator.gpu` from the RN thread
- * and injects them into the worklet's `globalThis` so that WebGPU code can run
- * as if it were in a browser environment.
- *
- * @param runtime - The worklet runtime to initialize
- */
-export function initWebGPU(runtime: WorkletRuntime) {
-  const navigator = globalThis.navigator as NavigatorGPU;
-  const GPUBufferUsage = globalThis.GPUBufferUsage;
-  const GPUColorWrite = globalThis.GPUColorWrite;
-  const GPUMapMode = globalThis.GPUMapMode;
-  const GPUShaderStage = globalThis.GPUShaderStage;
-  const GPUTextureUsage = globalThis.GPUTextureUsage;
-
-  scheduleOnRuntime(runtime, () => {
-    'worklet';
-
-    if (globalThis.self) {
-      return;
-    }
-    globalThis.self = globalThis;
-    globalThis.navigator = { gpu: navigator.gpu } as unknown as Navigator;
-    globalThis.GPUBufferUsage = GPUBufferUsage;
-    globalThis.GPUColorWrite = GPUColorWrite;
-    globalThis.GPUMapMode = GPUMapMode;
-    globalThis.GPUShaderStage = GPUShaderStage;
-    globalThis.GPUTextureUsage = GPUTextureUsage;
-    globalThis.setImmediate =
-      globalThis.requestAnimationFrame as typeof setImmediate;
-  });
-}
-
-declare global {
-  var self: typeof globalThis;
-  var _WORKLET: boolean | undefined;
-  var performance: { now(): number };
-
-  interface Navigator {
-    gpu: GPU;
-  }
-}