skia
Installation
SKILL.md
Graphics & Advanced Rendering (Skia)
React Native Skia exposes Google's Skia 2D engine to React. It draws on the GPU through a declarative <Canvas> tree, and integrates directly with Reanimated so animated values drive the canvas on the UI thread. Use it for graphical work the standard view system cannot express cleanly.
The single most important rule: Skia is for custom, GPU-heavy drawing — not for shapes a View can already render. If expo-linear-gradient, react-native-svg, or a styled View with borderRadius does the job, use that. Reach for Skia only when you need shaders, charts/graphs, complex vector paths, image filters/blurs, or high-frame-rate custom drawing. Never simulate graphics by stacking nested Views.
When to reach for Skia (and when not to)
| Reach for Skia | Use something else |
|---|---|
| Custom SkSL shaders / procedural effects | Solid fills, rounded corners → styled View |
| Charts, graphs, sparklines, gauges | A single linear/radial gradient → expo-linear-gradient |
| Complex or animated vector paths (morphing, drawing-on) | Static icons / simple vector shapes → react-native-svg |
| Image filters, blurs, color matrices, displacement | A blurred backdrop → expo-blur (BlurView) |
| GPU-heavy effects (glow, noise, gradient meshes, particles) | Shadows on a card → shadow* / elevation style props |
| High-frame-rate custom drawing (audio waveforms, canvases) | Layout-driven motion → Reanimated transform/opacity |