Installation

React Native WebGPU brings the WebGPU API to iOS, Android, macOS, and visionOS using Dawn.

Install the package

npm i react-native-webgpu

Requirements

Please note that this module does not work on the legacy architecture.

iOS: Swift Package Manager

By default, react-native-webgpu links on iOS/macOS through CocoaPods autolinking - no extra setup needed. As an alternative, the package also ships a Package.swift for React Native's SwiftPM autolinking, which needs no CocoaPods at all:

1. Use React Native 0.87 or newer. Earlier releases have no SwiftPM autolinking (scripts/spm), so keep CocoaPods there.
2. From your app's ios directory, run npx react-native spm add --deintegrate once. It removes CocoaPods from the project and injects the Swift packages into the .xcodeproj. Then build the project (not a workspace) as usual: React Native's Sync SPM Autolinking build phase picks react-native-webgpu up as a self-managed package and links its ReactNativeWebGPU product.
3. Do not run pod install in that app: it would re-integrate CocoaPods and break the Swift package graph.

The manifest consumes React Native's headers as Swift package products (ReactHeaders, ReactNativeHeaders, ReactNativeDependenciesHeaders, plus the app's generated ReactAppHeaders for the RNWgpuViewSpec codegen output), so no CocoaPods install is involved. If a Graphite build of @shopify/react-native-skia is installed alongside, the manifest also checks that both packages link the same Dawn release and fails package resolution on a mismatch (see React Native Skia). SwiftPM caches manifest evaluations, so after changing either package's Dawn version reset the package caches in Xcode (File > Packages > Reset Package Caches) if the check does not re-run. The manifest follows the same integration model as @shopify/react-native-skia's own Package.swift, so the two libraries link the same way.

Package.swift's WebGPUDawn binary target resolves to a prebuilt Dawn .xcframework published on GitHub Releases; Xcode downloads and checksum-verifies it the first time it resolves packages.

Setup

Once installed, the global navigator.gpu API is available - the same entry point as in Chrome or Safari:

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter!.requestDevice();

Rendering happens inside a Canvas view. The typical loop is:

1. Get a WebGPU context from the canvas ref
2. Configure the context with your device
3. Encode render (or compute) passes
4. device.queue.submit(...)
5. context.present() - required on React Native (Frame presentations)

Start with the Canvas view once installation is done.

Testing with Jest

react-native-webgpu wraps a native module, which isn't available under Jest. Add its mock to setupFilesAfterEnv in your jest.config.js:

// jest.config.js
module.exports = {
  // Other values
  setupFilesAfterEnv: [
    "react-native-webgpu/jestSetup.js",
  ],
};

This replaces the package with a JS-only stand-in: <Canvas> renders as a plain View so screens built around it can still be rendered in tests, while GPU-dependent APIs (importDevice, adoptTexture, useDevice, a real canvas context) throw a clear error if a test actually exercises them.

Troubleshooting

{
  "expo": {
    "plugins": ["react-native-webgpu"]
  }
}

Next steps

• Expo - scaffold the hosted WebGPU examples template
• Canvas - your rendering surface
• Native APIs - the React Native specific differences
• Learn WebGPU - learn the low-level API