What Skia is, and why the demos sit together

When I started my career, Skia felt like magic. A canvas on the UI thread. Circles and paths that moved with gestures. Stuff that looked impossible on a normal React Native view tree. I wanted every good Skia animation I could find in one place — and early on, that was harder than the API itself.

What Skia is, briefly

@shopify/react-native-skia is a React Native binding to Skia, the same 2D graphics engine behind Chrome and Android. You get a Canvas and drawing nodes — Circle, Path, Text, Group, shaders, images — rendered on the UI thread.

The smallest honest on-ramp still looks like this:

import { Canvas, Circle } from "@shopify/react-native-skia";

export function Dot() {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={50} cy={50} r={24} color="#7DD3FC" />
    </Canvas>
  );
}

That is a react native canvas you own in code. Not a video. Not a Lottie file you press play on. You draw the scene. You redraw it when shared values change.

A Circle is not the hard part

The hard part starts when that Circle has to follow a finger.

You wire useSharedValue from Reanimated into cx or a transform, and suddenly you are building a reactive graph: gesture to value to Skia props, without a bridge round-trip. Drop that connection and the canvas looks fine in a screenshot and dead in a real drag.

Path work flips the same switch. A static SVG string in a Path is still the Circle demo in a fancy hat. Morphing paths, measuring text onto a curve, clipping a blur to a custom mask — that is where Skia earns the Graphics shelf next to shaders and Lottie. Shaders are the pixel program. Skia is the scene those programs sit in.

Lottie is a different contract. You ship a baked timeline. A skia canvas is code you redraw every frame. Same Graphics group on the catalog, opposite mental model.

Good examples were hard to find

Docs get you a Canvas and a Circle. They do not get you a feed of real gestures, morphs, and production-shaped canvases. GitHub is full of half-finished Skia sandboxes, abandoned forks, and demos that only look right at one screen size.

Early on I burned afternoons hunting for something I could learn from — and later ship from. The API was not the bottleneck. Finding a clean example was.

So I started collecting them. One shelf. Learning, inspiration, and shipping in the same place. That was the dream: every Skia animation I trusted, together, instead of scattered across issues and random repos.

Finding the good ones is still the search

I already know Skia exists. The afternoon I lose now is remembering which demo handled the gesture graph cleanly, which one cheated with a screenshot, and which one only looked right once. That is the finding problem, not the API problem.

The shelf is the Skia filter

Everything I keep for that canvas workhorse lives in the Skia filter. New ones land there whenever I find them.