react-native-wgpu-components

Installation

Install the package, its peer dependencies, and Babel plugins.

Install

pnpm add react-native-wgpu-components \
  react-native-wgpu \
  react-native-webgpu-worklets \
  react-native-reanimated \
  react-native-worklets \
  typegpu
npm install react-native-wgpu-components \
  react-native-wgpu \
  react-native-webgpu-worklets \
  react-native-reanimated \
  react-native-worklets \
  typegpu

react-native-gesture-handler is an optional peer — only required if you opt into followCursor on a component.

Babel plugins

Add these to your app's babel.config.js:

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: [
    'unplugin-typegpu/babel',
    'react-native-worklets/plugin', // must be last
  ],
};

unplugin-typegpu is what transforms the TypeScript shader code (the 'use gpu' functions inside the package) into WGSL at build time. react-native-worklets/plugin is required by Reanimated v4.

Requirements

Minimum
React Native0.81 (new architecture)
React19.0
Expo55 (if you use Expo)
react-native-wgpu0.5
react-native-reanimated4.1
typegpu0.11

The package targets the new architecture — old-arch installs aren't supported.

Platforms

Works on iOS, Android, and Web. See Platforms for the GPU backend details and a few caveats.

On this page