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.

On Android it needs Android 8 (API 26) or newer. An app with a lower minSdkVersion fails to build; on Expo, the config plugin raises it for you.

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, 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 adds the Swift packages to the .xcodeproj. Then build the project (not a workspace) as usual.
3. Do not run pod install in that app: it would re-integrate CocoaPods and break the Swift packages.

Dawn comes as a prebuilt binary that Xcode downloads the first time it resolves packages.

With React Native Skia v3 installed alongside, package resolution checks that both packages link the same Dawn release, and fails if they are not at compatible versions. After changing either version, reset the package caches in Xcode (File > Packages > Reset Package Caches) if the error persists.

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 APIs that need a GPU (useDevice, a real canvas context, and so on) 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