React APIs

The WebGPU API itself is symmetric with the Web and has nothing React-specific about it. On top of that, react-native-webgpu ships a small set of React helpers, mainly for device creation.

GPUDeviceProvider

When several components need the same device, request it once with GPUDeviceProvider and read it from any descendant with useMainDevice. The provider renders null until the device is ready, so children only mount once device is non-null.

function App() {
  return (
    <GPUDeviceProvider
      deviceDescriptor={{
        requiredFeatures: ["rnwebgpu/native-texture" as GPUFeatureName],
      }}
    >
      <Scene />
    </GPUDeviceProvider>
  );
}

See the GPUDeviceProvider reference for the full API.

useMainDevice

Reads the shared { adapter, device } from the nearest GPUDeviceProvider. It throws No DeviceContext found. when called outside a provider.

function DebugOverlay() {
  const { adapter, device } = useMainDevice();
  return null;
}

useDevice

Requests a GPUAdapter and GPUDevice for you and returns them once ready. Both are null until the async request resolves, so guard on device before rendering. It also calls warnIfNotHardwareAccelerated for you.

function Scene() {
  const { adapter, device } = useDevice();
  if (!device) {
    return null; // still requesting
  }
  // render with device…
  return null;
}

Pass adapter options and a device descriptor to request features (you cannot add features to an existing device later):

const { device } = useDevice(
  { powerPreference: "high-performance" },
  { requiredFeatures: ["rnwebgpu/native-texture" as GPUFeatureName] },
);

warnIfNotHardwareAccelerated

Logs a console warning when the adapter is a software fallback, common on Android emulators. useDevice already calls it; use it directly when you request adapters yourself. See the reference.

warnIfNotHardwareAccelerated(adapter);

See also

• Canvas - the rendering surface and frame loop
• Native APIs - the React Native specific differences
• Worklets - running these on the UI thread