fix(🐛): Fix Android hardware buffer view

apps/example/ios/Podfile.lock

@@ -1433,7 +1433,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - react-native-wgpu (0.2.1):
+  - react-native-wgpu (0.2.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1833,7 +1833,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNReanimated (3.17.5):
+  - RNReanimated (3.19.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1856,10 +1856,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.17.5)
-    - RNReanimated/worklets (= 3.17.5)
+    - RNReanimated/reanimated (= 3.19.1)
+    - RNReanimated/worklets (= 3.19.1)
     - Yoga
-  - RNReanimated/reanimated (3.17.5):
+  - RNReanimated/reanimated (3.19.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1882,9 +1882,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 3.17.5)
+    - RNReanimated/reanimated/apple (= 3.19.1)
     - Yoga
-  - RNReanimated/reanimated/apple (3.17.5):
+  - RNReanimated/reanimated/apple (3.19.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1908,7 +1908,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNReanimated/worklets (3.17.5):
+  - RNReanimated/worklets (3.19.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1931,9 +1931,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/worklets/apple (= 3.17.5)
+    - RNReanimated/worklets/apple (= 3.19.1)
     - Yoga
-  - RNReanimated/worklets/apple (3.17.5):
+  - RNReanimated/worklets/apple (3.19.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2246,7 +2246,7 @@ SPEC CHECKSUMS:
   React-microtasksnativemodule: ca2804a25fdcefffa0aa942aa23ab53b99614a34
   react-native-safe-area-context: 00d03dc688ba86664be66f9e3f203fc7d747d899
   react-native-skia: 443d0725a6cbbcce886edb96b591935eb3bc36d8
-  react-native-wgpu: 55ba6ce8b236d09f103b3568b48ce8c0477f517e
+  react-native-wgpu: e7754c8f25598bfc7e77e5938acce1445f8f2f2b
   React-NativeModulesApple: 452b86b29fae99ed0a4015dca3ad9cd222f88abf
   React-oscompat: ef5df1c734f19b8003e149317d041b8ce1f7d29c
   React-perflogger: 6fd2f6811533e9c19a61e855c3033eecbf4ad2a0
@@ -2282,7 +2282,7 @@ SPEC CHECKSUMS:
   ReactTestApp-DevSupport: 8f2bfaea9444fcf141b1f694c02d2af51fd6ec1c
   ReactTestApp-Resources: 1bd9ff10e4c24f2ad87101a32023721ae923bccf
   RNGestureHandler: 5d8431415d4b8518e86e289e9ad5bb9be78f6dba
-  RNReanimated: c567de23384730756bb19ff55490819980536b09
+  RNReanimated: 44c559bda6bcfa00af5be64f5c26c1b1184b83ca
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 9f110fc4b7aa538663cba3c14cbb1c335f43c13f
 

apps/example/package.json

@@ -29,7 +29,7 @@
     "react-native": "0.79.2",
     "react-native-gesture-handler": "^2.17.1",
     "react-native-macos": "^0.78.3",
-    "react-native-reanimated": "^3.12.1",
+    "react-native-reanimated": "3.19.1",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-wgpu": "*",
     "teapot": "^1.0.0",

apps/example/src/Resize/Resize.tsx

@@ -62,14 +62,21 @@ export const Resize = () => {
         count: sampleCount,
       },
     });
-    let currentSize = { width: 0, height: 0 };
     let renderTarget: GPUTexture | undefined;
     let renderTargetView: GPUTextureView;
-
     return () => {
+      const currentWidth = canvas.clientWidth * PixelRatio.get();
+      const currentHeight = canvas.clientHeight * PixelRatio.get();
+
+      // The canvas size is animating via CSS.
+      // When the size changes, we need to reallocate the render target.
+      // We also need to set the physical size of the canvas to match the computed CSS size.
       if (
-        currentSize.width !== canvas.clientWidth ||
-        currentSize.height !== canvas.clientHeight
+        (currentWidth !== canvas.width ||
+          currentHeight !== canvas.height ||
+          !renderTargetView) &&
+        currentWidth &&
+        currentHeight
       ) {
         if (renderTarget !== undefined) {
           // Destroy the previous render target
@@ -78,13 +85,10 @@ export const Resize = () => {
 
         // Setting the canvas width and height will automatically resize the textures returned
         // when calling getCurrentTexture() on the context.
-        canvas.width = canvas.clientWidth * PixelRatio.get();
-        canvas.height = canvas.clientHeight * PixelRatio.get();
+        canvas.width = currentWidth;
+        canvas.height = currentHeight;
 
-        currentSize = {
-          width: canvas.clientWidth,
-          height: canvas.clientHeight,
-        };
+        // Resize the multisampled render target to match the new canvas size.
         renderTarget = device.createTexture({
           size: [canvas.width, canvas.height],
           sampleCount,
@@ -94,15 +98,16 @@ export const Resize = () => {
 
         renderTargetView = renderTarget.createView();
       }
+
       if (renderTargetView) {
         const commandEncoder = device.createCommandEncoder();
-        const a = 0.7;
+
         const renderPassDescriptor: GPURenderPassDescriptor = {
           colorAttachments: [
             {
               view: renderTargetView,
               resolveTarget: context.getCurrentTexture().createView(),
-              clearValue: [a, a, a, a],
+              clearValue: [0.5, 0.5, 0.5, 0.5],
               loadOp: "clear",
               storeOp: "store",
             },
@@ -125,7 +130,7 @@ export const Resize = () => {
   return (
     <View style={{ flex: 1, alignItems: "center" }}>
       <Animated.View style={style}>
-        <Canvas ref={ref} style={{ flex: 0.5 }} transparent />
+        <Canvas ref={ref} style={{ flex: 1 }} transparent />
       </Animated.View>
     </View>
   );