diff --git a/with-webgpu/app.json b/with-webgpu/app.json
index 2e8ca6d7..d0e788c3 100644
--- a/with-webgpu/app.json
+++ b/with-webgpu/app.json
@@ -9,7 +9,15 @@
"plugins": [
"expo-router",
"expo-splash-screen",
- "expo-status-bar"
+ "expo-status-bar",
+ [
+ "expo-build-properties",
+ {
+ "android": {
+ "minSdkVersion": 26
+ }
+ }
+ ]
]
}
}
diff --git a/with-webgpu/package.json b/with-webgpu/package.json
index a15f4dce..02298c75 100644
--- a/with-webgpu/package.json
+++ b/with-webgpu/package.json
@@ -7,6 +7,7 @@
"dependencies": {
"@react-three/fiber": "^9.4.0",
"expo": "^56.0.4",
+ "expo-build-properties": "~56.0.16",
"expo-constants": "~56.0.15",
"expo-linking": "~56.0.11",
"expo-router": "~56.2.6",
@@ -19,7 +20,7 @@
"react-native-safe-area-context": "~5.7.0",
"react-native-screens": "4.25.2",
"react-native-web": "^0.21.0",
- "react-native-wgpu": "^0.4.1",
+ "react-native-webgpu": "^0.5.14",
"react-native-worklets": "0.8.3",
"three": "0.172.0",
"wgpu-matrix": "^3.0.2"
@@ -29,4 +30,4 @@
"@types/three": "0.172.0",
"typescript": "~6.0.3"
}
-}
+}
\ No newline at end of file
diff --git a/with-webgpu/src/components/three-cube.tsx b/with-webgpu/src/components/three-cube.tsx
index 9dad3970..fae192f8 100644
--- a/with-webgpu/src/components/three-cube.tsx
+++ b/with-webgpu/src/components/three-cube.tsx
@@ -1,10 +1,10 @@
// https://github.com/wcandillon/react-native-webgpu/blob/578ad989b4326724702b14245d5c82622849ee23/apps/example/src/Cube/Cube.tsx#L1
-import * as THREE from "three/webgpu";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
-import { View } from "react-native";
import { useEffect, useRef } from "react";
+import { View } from "react-native";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
+import * as THREE from "three/webgpu";
import { makeWebGPURenderer } from "@/lib/make-webgpu-renderer";
@@ -47,4 +47,4 @@ export const Cube = () => {
);
-};
\ No newline at end of file
+};
diff --git a/with-webgpu/src/lib/fiber-canvas.tsx b/with-webgpu/src/lib/fiber-canvas.tsx
index 4dcef9b5..f0ffcb86 100644
--- a/with-webgpu/src/lib/fiber-canvas.tsx
+++ b/with-webgpu/src/lib/fiber-canvas.tsx
@@ -1,18 +1,21 @@
// https://github.com/wcandillon/react-native-webgpu/blob/578ad989b4326724702b14245d5c82622849ee23/apps/example/src/ThreeJS/components/FiberCanvas.tsx#L1
-import * as THREE from "three/webgpu";
-import React, { useEffect, useRef } from "react";
import type { ReconcilerRoot, RootState } from "@react-three/fiber";
import {
- extend,
createRoot,
- unmountComponentAtNode,
events,
+ extend,
+ unmountComponentAtNode,
} from "@react-three/fiber";
+import React, { useEffect, useRef } from "react";
import type { ViewProps } from "react-native";
import { PixelRatio } from "react-native";
-import { Canvas, type CanvasRef } from "react-native-wgpu";
+import { Canvas, type CanvasRef } from "react-native-webgpu";
+import * as THREE from "three/webgpu";
-import { makeWebGPURenderer, ReactNativeCanvas } from "@/lib/make-webgpu-renderer";
+import {
+ makeWebGPURenderer,
+ ReactNativeCanvas,
+} from "@/lib/make-webgpu-renderer";
interface FiberCanvasProps {
children: React.ReactNode;
@@ -77,4 +80,4 @@ export const FiberCanvas = ({
});
return ;
-};
\ No newline at end of file
+};
diff --git a/with-webgpu/src/lib/make-webgpu-renderer.ts b/with-webgpu/src/lib/make-webgpu-renderer.ts
index 0474d199..8eebf15f 100644
--- a/with-webgpu/src/lib/make-webgpu-renderer.ts
+++ b/with-webgpu/src/lib/make-webgpu-renderer.ts
@@ -1,5 +1,5 @@
// https://github.com/wcandillon/react-native-webgpu/blob/578ad989b4326724702b14245d5c82622849ee23/apps/example/src/ThreeJS/components/makeWebGPURenderer.ts#L1
-import type { NativeCanvas } from "react-native-wgpu";
+import type { NativeCanvas } from "react-native-webgpu";
import * as THREE from "three/webgpu";
// Here we need to wrap the Canvas into a non-host object for now
@@ -69,4 +69,4 @@ export const makeWebGPURenderer = (
// @ts-expect-error
canvas: new ReactNativeCanvas(context.canvas),
context,
- });
\ No newline at end of file
+ });