V

Volodymyr

3 min

Skia, Lottie, shaders, and SVG are the graphics engines

Skia, Lottie, shaders, SVG, Matter.js, Three.js, WebGPU, and Filament paint in ways I had to learn separately. Swapping one for another is a different screen.

React Native can draw in more than one way. A canvas, a designed timeline, a scene graph, a physics world. I used to lose those engines inside springs and nicknames. So I put them in Graphics.

Graphics is not Core and not Patterns

Core is what drives a value: a gesture, a scroll, a shared value from react-native-reanimated. Patterns is the name of the motion: morph, shimmer, parallax.

Graphics is the painter. The API that actually puts pixels, paths, or meshes on the screen. Mixing the three cuts makes search worse. You remember the engine, or you are trying to learn the engine, and you land in a recipe pile instead.

What each term is

Skia. React Native Skia is a canvas on the UI thread. Paths, text, images, and custom drawing in code. When the mark is something you draw, not something you play back.

Shader. A program for pixels. Noise, liquid fills, distortion, computed color. It usually rides a Skia or GPU surface. It is not a gradient prop with a fancy name.

SVG. Vectors as views. Icons, illustrations, path morphs that stay sharp at any size. Geometry you already know from the web, now moving in the tree.

Lottie. A designed composition, usually from After Effects, played as JSON. The designer ships the timeline. You run it. You are not constructing the frames yourself.

Matter.js. 2D rigid-body physics. Gravity, collisions, stacks of bodies. When the motion has to feel like objects, not like a tween.

Three.js. A 3D scene graph: cameras, meshes, lights. Use it when the mark needs depth and a scene, not a flat canvas.

WebGPU. The modern GPU API. Compute and draw closer to the metal, without borrowing Three.js's scene graph first.

Filament. Google's physically based 3D renderer. Heavier real-time 3D, a different contract than a 2D canvas or a Lottie file.

Why they live in one group

Finding is the first reason. If you remember "it was Skia" or "it was a Lottie," you should not have to guess whether I filed it under Layout, Morph, or a random animation dump. One group, eight terms, same job family: painting.

Separation is the second. Graphic concepts are easier to keep honest when they are not mixed with drivers and nicknames. Skia stays Skia. A shimmer stays a pattern. The clock stays in Core.

Learning is the third. Walking this list is a map of how React Native actually draws. Canvas, shader, vector, composition, physics, scene, GPU, PBR. That is a useful curriculum. It is a bad jumble if those words live in three different corners of the sidebar.

This is the shelf

Everything I keep for that painter layer lives in the Graphics group. New Skia, Shader, SVG, Lottie, Matter.js, Three.js, WebGPU, and Filament work lands there whenever I find it.