/mobile-animation-skia

name: mobile-animation-skia
description: React Native Skia GPU-accelerated 2D graphics - Canvas, declarative drawing, shaders, image filters, Paragraph text, Atlas batch rendering, Reanimated animations

React Native Skia Patterns

> **Quick Guide:** Use `@shopify/react-native-skia` for GPU-accelerated 2D drawing in React Native. The Canvas component hosts a separate React renderer. Drawing primitives (Circle, Rect, Path, Image) compose declaratively. Paint attributes cascade through Groups. Animations use Reanimated shared values passed directly as props -- no `createAnimatedComponent` needed. Use `interpolateColors` from Skia for color animations (not Reanimated's `interpolateColor`). Use Atlas for batch rendering thousands of sprites. Use Paragraph for rich text layout. Group transforms default to top-left origin, not center.

---

<critical_requirements>

CRITICAL: Before Using This Skill

**(You MUST pass Reanimated shared values directly as Skia component props -- do NOT use createAnimatedComponent or useAnimatedProps)**

**(You MUST use `interpolateColors` from `@shopify/react-native-skia` for color animations -- Reanimated's `interpolateColor` uses a different internal color format and produces wrong results)**

**(You MUST use the `layer` property to apply paint effects to Paragraph, Picture, and ImageSVG components -- they do not follow standard paint inheritance rules)**

**(You MUST remember that Group transform origin defaults to top-left, not center -- set `origin` prop explicitly for center-based rotations)**

</critical_requirements>

---

**Auto-detection:** react-native-skia, @shopify/react-native-skia, Canvas, Skia.Path, Skia.Paint, Circle, Rect, Path, Group, Paint, ImageSVG, BackdropBlur, BackdropFilter, RuntimeShader, Atlas, Paragraph, ParagraphBuilder, usePathInterpolation, useClock, useRSXformBuffer, SkSL, image filter, shader, offscreen, Picture, FitBox

**When to use:**

• Drawing custom 2D graphics (charts, diagrams, custom shapes)
• Applying GPU-accelerated blur, shadow, or color filter effects
• Animating paths, shapes, or shader uniforms at 60 FPS
• Rendering rich text with mixed fonts using Paragraph API
• Batch rendering sprites/tiles with Atlas
• Creating custom image filters with SkSL shaders
• Generating images offscreen (thumbnails, exports)

**When NOT to use:**

• Standard UI layouts (use regular React Native views)
• Simple static images (use `<Image>` from React Native)
• 3D graphics (Skia is 2D only -- use a 3D solution)
• Text-only screens (use React Native `<Text>`)

**Key patterns covered:**

• Canvas setup and threading model
• Declarative drawing with shapes, paths, and images
• Paint inheritance and composition through Groups
• Reanimated integration (shared values as props, color interpolation)
• Image filters (Blur, Shadow, RuntimeShader) and backdrop filters
• Paragraph text layout with custom fonts
• Atlas batch rendering for sprites and tiles
• SkSL custom shaders with uniforms
• Picture recording for dynamic drawing operations
• SVG rendering with limitations

**Detailed Resources:**

• [examples/core.md](examples/core.md) - Canvas, shapes, paths, paint, groups, images
• [examples/animations.md](examples/animations.md) - Reanimated integration, path interpolation, color animation, Atlas animation
• [examples/effects.md](examples/effects.md) - Image filters, backdrop blur, shaders, RuntimeShader
• [examples/text-and-media.md](examples/text-and-media.md) - Paragraph API, SVG rendering, Picture recording, offscreen rendering
• [reference.md](reference.md) - Decision frameworks, paint property reference, SkSL types

---

<philosophy>

Philosophy

React Native Skia brings Skia (the graphics engine behind Chrome, Android, and Flutter) to React Native. It provides a **separate React renderer** inside the Canvas component -- you write JSX, but it renders to a GPU-accelerated Skia surface, not native views.

**Core mental model:**

1. **Canvas is the boundary** -- everything inside `<Canvas>` uses Skia's renderer, everything outside is regular React Native 2. **Declarative by default** -- compose shapes, paints, and effects as JSX children; use imperative API (`Skia.Path()`, `Skia.Paint()`) only when you need dynamic construction 3. **Paint cascades through Groups** -- a Group's color, opacity, shader, or filter applies to all children unless overridden (exception: Paragraph, Picture, and ImageSVG need the `layer` property) 4. **Animations run on UI thread** -- pass Reanimated shared values directly as props; Skia reads them on the UI thread with zero bridge cost 5. **Hybrid architecture** -- use Skia canvases only where custom visuals are needed; standard views handle layout and navigation

**When to reach for Skia:**

• Custom graphics that native views cannot express (gradients on paths, blur effects, charts)
• Performance-critical animations that must run on the GPU
• Batch rendering (Atlas for thousands of sprites)
• Rich text layout needing mixed fonts or decorations (Paragraph)
• Custom image processing (RuntimeShader with SkSL)

**When NOT to reach for Skia:**

• Standard UI (buttons, lists, forms) -- native views are simpler and more accessible
• Simple images -- React Native's `<Image>` is sufficient
• Accessibility-critical content -- Skia canvas elements are not accessible to screen readers; overlay native views for accessibility

</philosophy>

---

<patterns>

Core Patterns

Pattern 1: Canvas and Basic Shapes

Canvas is the root Skia drawing surface. It behaves like a regular React Native view (accepts `style`), but hosts its own React renderer internally.

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

const CANVAS_SIZE = 256;
const CIRCLE_RADIUS = 50;

<Canvas style={{ width: CANVAS_SIZE, height: CANVAS_SIZE }}>
  <Circle cx={128} cy={128} r={CIRCLE_RADIUS} color="cyan" />
  <Rect x={10} y={10} width={100} height={80} color="red" />
  <RoundedRect x=