GPUDeviceProvider

GPUDeviceProvider requests a GPUDevice once and shares it through React context, rendering children only when device is non-null. Wrap your scene root so every child can read the shared device with useMainDevice instead of requesting its own.

Props

interface DeviceProviderProps {
  ?: ;
  ?: GPURequestAdapterOptions;
  ?: GPUDeviceDescriptor;
}

Usage

import {  } from "react";
import {  } from "react-native";
import {
  ,
  ,
  ,
  ,
} from "react-native-webgpu";

function () {
  const  = ();
  const {  } = ();

  (() => {
    if (!) return;

    const  = .!.("webgpu")!;
    const  = . as HTMLCanvasElement;
    const  = ..();

    . = . * .();
    . = . * .();
    .({ , , : "premultiplied" });

    const  = "https://example.com/video.mp4";
    const  = .(, "nv12");
    .();

    // Render loop: copyLatestFrame → importExternalTexture → draw → present
    // See [Native Extensions](/api/gpu-device-extensions)
  }, []);

  return < ={} ={{ : 1 }} />;
}

export function () {
  return (
    <
      ={{
        : ["rnwebgpu/native-texture" as ],
      }}
    >
      < />
    </>
  );
}

Request features (like "rnwebgpu/native-texture") here: you cannot add features to an existing device later.

While the device is loading, the provider returns null (nothing rendered). If you need a loading UI, wrap the provider:

function () {
  return (
    <>
      <>
        < />
      </>
      {/* Optional: show a spinner until Scene mounts */}
    </>
  );
}

useMainDevice

useMainDevice is the hook that consumes this provider's context. It returns the same { adapter, device } the provider created, so any descendant can share that one device instead of requesting its own. If you are not using a provider, useDevice requests a device directly instead.

function () {
  const { ,  } = ();
  // Read adapter info / feature list, or pass `device` to Three.js, overlays, etc.
  return null;
}

Must be inside the provider

useMainDevice throws No DeviceContext found. when called outside a GPUDeviceProvider. Because the provider renders null until the device is ready, any child that calls it only mounts once device is non-null.

GPUDeviceProvider

Props

Usage

useMainDevice

See also

On this page