React Native WebGPU

Expo

Start with raw WebGPU, Three.js, or React Three Fiber on Expo

The React Native WebGPU Expo template includes raw WebGPU, Three.js, and React Three Fiber examples for iOS, Android, and web.

Create a project

npx create-expo-app@latest my-webgpu-app --template https://github.com/wcandillon/react-native-webgpu/tree/main/apps/expo-webgpu

Open the app and choose an example from the menu:

  • WebGPU triangle uses react-native-webgpu directly and renders WGSL without a 3D framework.
  • Three.js imports three/webgpu and creates the scene imperatively.
  • React Three Fiber uses declarative JSX with the standard Fiber module build.

The template installs the required Reanimated and Worklets peers, enables the react-native-webgpu config plugin, and includes the Metro resolver used by the React Three Fiber example.

For a walkthrough of the React Three Fiber example, watch the video below.

Config plugin

react-native-webgpu ships its own Expo config plugin. Add it to the plugins array of your app config:

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

The plugin configures both native projects:

iOS: it disables Metal API Validation in the Xcode scheme, which is required to run WebGPU on the iOS Simulator, where validation flags false positives in Dawn (see Troubleshooting). It changes nothing for release builds.

Android: it raises the app's minSdkVersion to 26, the minimum the library supports (Expo's default is 24). A higher value is kept.

With Continuous Native Generation, npx expo prebuild --clean regenerates the native projects, so settings changed by hand do not stick; the config plugin re-applies both on every prebuild.