Graphics

@knitui/graphics is the Skia layer: a canvas, a few effect views, and the data-driven audio visualizer — plus a re-export of Skia itself so you do not need a second import path.

npx expo install @knitui/graphics @shopify/react-native-skia

import { GraphicsProvider, GraphicCanvas } from "@knitui/graphics";

Web needs the runtime loaded first

Warning

Skia's web build captures global.CanvasKit when the module evaluates, so the WASM runtime must be in place before anything imports the Skia barrel:

import { loadGraphicsRuntime } from "@knitui/graphics/runtime";

await loadGraphicsRuntime();               // no-op on native
const { GraphicCanvas } = await import("@knitui/graphics");

Get the order wrong and canvases render blank with no error.

What is in it

GraphicsProvider

Sets up the Skia context for the tree.

EffectView

Shader-backed effects over content.

ShadowView

Skia-drawn shadows beyond what the style system can express.

AudioVisualizer

Data-driven spectrum rendering — pair with @knitui/media's DSP.

AudioMesh

A mesh visualisation driven by the same data.

The package is deliberately small: it does not wrap Skia's drawing API. Use Skia directly through the re-export and let this package handle setup, platform loading and the two or three composites worth sharing.

The WebGL context budget

Animating Skia correctly

Keep data in shared values and build Skia objects inside useDerivedValue:

// breaks on web
const path = useSharedValue(Skia.Path.Make());

// correct on both platforms
const points = useSharedValue<number[]>([]);
const path = useDerivedValue(() => buildPath(points.value), [points]);

An SkPath in a shared value survives on native and fails on the web, which makes it a nasty bug to find. See Animation.

Audio visualisation

The visualizer takes band data, not audio — the DSP lives in @knitui/media/dsp. That split is deliberate: analysis is pure TypeScript and testable, drawing is Skia and platform-bound.

const { bands } = useAudioSpectrum({ bandCount: 32 });

<AudioVisualizer bands={bands} />;