name: olore-react-native-skia-latest description: Local react-native-skia documentation reference (latest). React Native Skia documentation. Use for high-performance 2D graphics, shaders, animations, canvas rendering, image filters, path effects, and Skia API in React Native.
react-native-skia Documentation
React Native Skia documentation. Use for high-performance 2D graphics, shaders, animations, canvas rendering, image filters, path effects, and Skia API in React Native.
Documentation Structure
contents/
├── getting-started/ # Installation, setup, web, headless (5 files)
├── canvas/ # Canvas component, rendering modes, contexts (3 files)
├── shapes/ # Paths, boxes, ellipses, polygons, atlas, vertices (8 files)
├── animations/ # Reanimated integration, hooks, gestures, textures (4 files)
├── shaders/ # SkSL language, gradients, image shaders, Perlin noise (5 files)
├── image-filters/ # Blur, shadows, offset, morphology, displacement, runtime shader (7 files)
├── text/ # Text, paragraph, glyphs, text on path, text blob (5 files)
├── paint/ # Paint overview and properties (2 files)
└── (root) # Images, SVG, group, mask, filters, effects, video, skottie (13 files)
Topic Guide
| Topic | Key Files |
|---|---|
| Installation & setup | contents/getting-started/installation.md, contents/getting-started/hello-world.md |
| Web support | contents/getting-started/web.mdx |
| Canvas & rendering modes | contents/canvas/canvas.md, contents/canvas/rendering-modes.md |
| Paths & shapes | contents/shapes/path.md, contents/shapes/box.md, contents/shapes/ellipses.md, contents/shapes/polygons.md |
| Path API migration | contents/shapes/path-migration.md |
| Animations with Reanimated | contents/animations/reanimated3.md, contents/animations/hooks.md |
| Gestures | contents/animations/gestures.md |
| Shaders & SkSL | contents/shaders/language.md, contents/shaders/gradients.md, contents/shaders/images.md |
| Image filters | contents/image-filters/overview.md, contents/image-filters/blur.md, contents/image-filters/shadows.md |
| Runtime shaders | contents/image-filters/runtime-shader.md |
| Text rendering | contents/text/text.md, contents/text/paragraph.md, contents/text/glyphs.md |
| Paint & blend modes | contents/paint/overview.md, contents/paint/properties.md |
| Images & SVG | contents/image.md, contents/image-svg.md, contents/animated-images.md |
| Mask & clipping | contents/mask.md, contents/mask-filters.md |
| Color filters | contents/color-filters.md |
| Backdrop filters | contents/backdrop-filters.md |
| Video | contents/video.md |
| Lottie animations (Skottie) | contents/skottie.md |
| Snapshot views | contents/snapshot-views.md |
| Path effects | contents/path-effects.md |
| Atlas / sprite batching | contents/shapes/atlas.md |
| Pictures (immediate mode) | contents/pictures.md |
When to use
Use this skill when the user asks about:
- Drawing 2D graphics, shapes, paths, or canvas in React Native
- Skia shaders, SkSL, gradients, and visual effects
- Animating Skia components with Reanimated or gesture handlers
- Image filters (blur, shadow, displacement, morphology)
- Text rendering, paragraphs, and glyphs
- Using the Paint API and blend modes
- Loading and rendering images, SVGs, or video frames
- Lottie animations with Skottie
- React Native Skia API reference (Canvas, Group, Path, etc.)
- Migrating from older Path API to immutable PathBuilder
How to find information
- Use Topic Guide above to identify relevant files
- Read
TOC.mdfor complete file listing by directory - Read specific files from
contents/{path}