chore(🐙): package renaming

README.md

@@ -6,12 +6,12 @@ React Native WebGPU requires React Native 0.81 or newer. It doesn't support the
 
 ## Installation
 
-Please note that the package name is `react-native-wgpu`.
-
 ```
-npm install react-native-wgpu
+npm install react-native-webgpu
 ```
 
+> The package was previously published as `react-native-wgpu`. A shim with that name is still available and simply re-exports `react-native-webgpu`.
+
 ## With Expo
 
 Expo provides a React Native WebGPU template that works with React Three Fiber.
@@ -53,7 +53,7 @@ Usage is identical to Web.
 ```tsx
 import React from "react";
 import { StyleSheet, View, PixelRatio } from "react-native";
-import { Canvas, CanvasRef } from "react-native-wgpu";
+import { Canvas, CanvasRef } from "react-native-webgpu";
 
 import { redFragWGSL, triangleVertWGSL } from "./triangle";
 
@@ -235,7 +235,7 @@ npm install react-native-reanimated react-native-worklets
 WebGPU objects are automatically registered for Worklets serialization when the module loads. You can pass WebGPU objects like `GPUDevice` and `GPUCanvasContext` directly to worklets:
 
 ```tsx
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { runOnUI } from "react-native-reanimated";
 
 const renderFrame = (device: GPUDevice, context: GPUCanvasContext) => {

apps/example/package.json

@@ -36,7 +36,7 @@
     "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-web": "^0.21.2",
-    "react-native-wgpu": "*",
+    "react-native-webgpu": "*",
     "react-native-worklets": "0.7.2",
     "teapot": "^1.0.0",
     "three": "0.172.0",

apps/example/src/ABuffer/ABuffer.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4, vec3 } from "wgpu-matrix";
 
 import { mesh } from "../components/meshes/teapot";

apps/example/src/CanvasAPI/CanvasAPI.tsx

@@ -1,6 +1,6 @@
 import { Button, View } from "react-native";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 import { useRef } from "react";
 
 import { redFragWGSL, triangleVertWGSL } from "../Triangle/triangle";

apps/example/src/ComputeBoids/ComputeBoids.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useRef } from "react";
 import tgpu from "typegpu";
 import * as d from "typegpu/data";
 import { StyleSheet, View, Text, Button } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 
 import { useWebGPU } from "../components/useWebGPU";
 import { toBeAssignedLater } from "../components/utils";

apps/example/src/ComputeToys/ComputeToy.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 import { Platform, useWindowDimensions } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";

apps/example/src/ComputeToys/engine/index.ts

@@ -4,7 +4,7 @@
  */
 
 import { Mutex } from "async-mutex";
-import type { CanvasRef, RNCanvasContext } from "react-native-wgpu";
+import type { CanvasRef, RNCanvasContext } from "react-native-webgpu";
 
 import { Bindings } from "./bind";
 import { Blitter, ColorSpace } from "./blit";

apps/example/src/Cube/Cube.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4, vec3 } from "wgpu-matrix";
 
 import {

apps/example/src/Cube/Cubemap.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4, vec3 } from "wgpu-matrix";
 
 import { useWebGPU } from "../components/useWebGPU";

apps/example/src/Cube/FractalCube.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4, vec3 } from "wgpu-matrix";
 
 import {

apps/example/src/Cube/InstancedCube.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import type { Mat4 } from "wgpu-matrix";
 import { mat4, vec3 } from "wgpu-matrix";
 

apps/example/src/Cube/TexturedCube.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4, vec3 } from "wgpu-matrix";
 
 import {

apps/example/src/GradientTiles/GradientTiles.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button, PixelRatio, StyleSheet, Text, View } from "react-native";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas, useDevice } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas, useDevice } from "react-native-webgpu";
 import * as d from "typegpu/data";
 import tgpu, { type TgpuBindGroup, type TgpuBuffer } from "typegpu";
 

apps/example/src/MNISTInference/MNISTInference.tsx

@@ -16,7 +16,7 @@ import {
 } from "@shopify/react-native-skia";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { runOnJS, runOnUI, useSharedValue } from "react-native-reanimated";
-import { useDevice } from "react-native-wgpu";
+import { useDevice } from "react-native-webgpu";
 
 import type { Network } from "./Lib";
 import { createDemo, centerData, SIZE } from "./Lib";

apps/example/src/OcclusionQuery/OcclusionQuery.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useState } from "react";
 import { StyleSheet, View, Text } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4 } from "wgpu-matrix";
 
 import { useWebGPU } from "../components/useWebGPU";

apps/example/src/Particles/Particles.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4, vec3 } from "wgpu-matrix";
 
 import { useWebGPU } from "../components/useWebGPU";

apps/example/src/Reanimated/Reanimated.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { StyleSheet, View } from "react-native";
-import type { CanvasRef, RNCanvasContext } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef, RNCanvasContext } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 import type { SharedValue } from "react-native-reanimated";
 import { runOnUI, useSharedValue } from "react-native-reanimated";
 

apps/example/src/RenderBundles/RenderBundles.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4, vec3 } from "wgpu-matrix";
 
 import { useWebGPU } from "../components/useWebGPU";

apps/example/src/Resize/Resize.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { Dimensions, PixelRatio, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import Animated, {
   cancelAnimation,
   Easing,

apps/example/src/ReversedZ/ReversedZ.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import type { Mat4 } from "wgpu-matrix";
 import { mat4, vec3 } from "wgpu-matrix";
 

apps/example/src/Sampler/SamplerParameters.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4 } from "wgpu-matrix";
 
 import { useWebGPU } from "../components/useWebGPU";

apps/example/src/ShadowMapping/DeferedRendering.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4, vec3, vec4 } from "wgpu-matrix";
 
 import { useWebGPU } from "../components/useWebGPU";

apps/example/src/ShadowMapping/ShadowMapping.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat4, vec3, vec4 } from "wgpu-matrix";
 
 import { useWebGPU } from "../components/useWebGPU";

apps/example/src/StorageBufferVertices/StorageBufferVertices.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 
 import { useWebGPU } from "../components/useWebGPU";
 

apps/example/src/Tests.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Dimensions, Text, View, Image } from "react-native";
-import { GPUOffscreenCanvas, useDevice } from "react-native-wgpu";
+import { GPUOffscreenCanvas, useDevice } from "react-native-webgpu";
 import { mat4, vec3, mat3 } from "wgpu-matrix";
 
 import { useClient } from "./useClient";

apps/example/src/ThreeJS/Backdrop.tsx

@@ -1,6 +1,6 @@
 import * as THREE from "three";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 import { PixelRatio, Text, View, StyleSheet } from "react-native";
 import { useEffect, useRef } from "react";
 import {

apps/example/src/ThreeJS/Cube.tsx

@@ -1,6 +1,6 @@
 import * as THREE from "three";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 import { View } from "react-native";
 import { useEffect, useRef } from "react";
 

apps/example/src/ThreeJS/Helmet.tsx

@@ -1,6 +1,6 @@
 import * as THREE from "three";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 import { StyleSheet, Text, View } from "react-native";
 import { useEffect, useRef } from "react";
 

apps/example/src/ThreeJS/InstancedMesh.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import * as THREE from "three";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 import { View } from "react-native";
 import { useEffect, useRef } from "react";
 import { time, oscSine, mix, range, normalWorld } from "three/tsl";

apps/example/src/ThreeJS/PostProcessing.tsx

@@ -1,6 +1,6 @@
 import * as THREE from "three";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 import { PixelRatio, Text, View, StyleSheet } from "react-native";
 import { useEffect, useRef } from "react";
 import { color, pass } from "three/tsl";

apps/example/src/ThreeJS/components/FiberCanvas.tsx

@@ -9,8 +9,8 @@ import {
 } from "@react-three/fiber";
 import type { ViewProps } from "react-native";
 import { PixelRatio } from "react-native";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 
 import { makeWebGPURenderer, ReactNativeCanvas } from "./makeWebGPURenderer";
 

apps/example/src/ThreeJS/components/makeWebGPURenderer.ts

@@ -1,4 +1,4 @@
-import type { NativeCanvas } from "react-native-wgpu";
+import type { NativeCanvas } from "react-native-webgpu";
 import * as THREE from "three";
 
 // Here we need to wrap the Canvas into a non-host object for now

apps/example/src/ThreeJS/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { warnIfNotHardwareAccelerated } from "react-native-wgpu";
+import { warnIfNotHardwareAccelerated } from "react-native-webgpu";
 
 import { Cube } from "./Cube";
 import type { Routes } from "./Routes";

apps/example/src/Triangle/HelloTriangle.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { StyleSheet, View, PixelRatio } from "react-native";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 
 import { redFragWGSL, triangleVertWGSL } from "./triangle";
 

apps/example/src/Triangle/HelloTriangleMSAA.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import { StyleSheet, View } from "react-native";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 
 import { redFragWGSL, triangleVertWGSL } from "./triangle";
 

apps/example/src/Wireframe/Wireframe.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import { Canvas } from "react-native-wgpu";
+import { Canvas } from "react-native-webgpu";
 import { mat3, mat4 } from "wgpu-matrix";
 
 import { useWebGPU } from "../components/useWebGPU";

apps/example/src/components/Texture.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { PixelRatio } from "react-native";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
 
 interface TextureState {
   pipeline: GPURenderPipeline;

apps/example/src/components/useAssets.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Image } from "react-native";
-import "react-native-wgpu";
+import "react-native-webgpu";
 
 export const fetchAsset = async (mod: number) => {
   const response = await fetch(Image.resolveAssetSource(mod).uri);

apps/example/src/components/useWebGPU.ts

@@ -4,7 +4,7 @@ import {
   useDevice,
   type CanvasRef,
   type NativeCanvas,
-} from "react-native-wgpu";
+} from "react-native-webgpu";
 
 interface SceneProps {
   context: GPUCanvasContext;

apps/example/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "noUncheckedIndexedAccess": false,
     "paths": {
-      "react-native-wgpu": ["../../packages/webgpu/src/index"],
+      "react-native-webgpu": ["../../packages/webgpu/src/index"],
       "three": ["../../node_modules/@types/three/src/Three.WebGPU.d.ts"],
       "three/tsl": ["../../node_modules/@types/three/src/Three.TSL.d.ts"],
       "three/addons/*": ["../../node_modules/@types/three/examples/jsm/*"]

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-native-webgpu",
+  "name": "react-native-webgpu-monorepo",
   "private": true,
   "workspaces": [
     "packages/*",