0
# React Native Skia
1

2
React Native Skia is a high-performance 2D graphics library that brings the Skia Graphics Library - the same graphics engine that powers Google Chrome, Android, and Flutter - to React Native. It provides a comprehensive API for creating complex animations, custom drawings, visual effects, data visualizations, games, and interactive experiences with hardware acceleration while maintaining React Native's declarative UI paradigm and cross-platform compatibility.
3

4
## Package Information
5

6
- **Package Name**: @shopify/react-native-skia
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @shopify/react-native-skia`
10
- **Peer Dependencies**: `react >= 19.0`, `react-native >= 0.78`, `react-native-reanimated >= 3.19.1` (optional)
11

12
## Core Imports
13

14
```typescript
15
import { Canvas, Circle, Rect, Paint, Skia } from "@shopify/react-native-skia";
16
```
17

18
For specific functionality:
19

20
```typescript
21
// React components
22
import { Canvas, Group, Paint } from "@shopify/react-native-skia";
23

24
// Shape components
25
import { Circle, Rect, Path, Text } from "@shopify/react-native-skia";
26

27
// Core Skia API
28
import { Skia } from "@shopify/react-native-skia";
29

30
// Effects and filters
31
import { LinearGradient, Blur, Shadow } from "@shopify/react-native-skia";
32

33
// Animation utilities
34
import { interpolate, interpolateColors } from "@shopify/react-native-skia";
35
```
36

37
## Basic Usage
38

39
```typescript
40
import React from "react";
41
import { Canvas, Circle, Paint } from "@shopify/react-native-skia";
42

43
export default function BasicExample() {
44
  return (
45
    <Canvas style={{ width: 200, height: 200 }}>
46
      <Circle cx={100} cy={100} r={50}>
47
        <Paint color="red" />
48
      </Circle>
49
    </Canvas>
50
  );
51
}
52
```
53

54
With animations using React Native Reanimated:
55

56
```typescript
57
import React from "react";
58
import { Canvas, Circle, Paint } from "@shopify/react-native-skia";
59
import { useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
60

61
export default function AnimatedExample() {
62
  const radius = useSharedValue(30);
63
  
64
  React.useEffect(() => {
65
    radius.value = withRepeat(withTiming(50, { duration: 1000 }), -1, true);
66
  }, []);
67

68
  return (
69
    <Canvas style={{ width: 200, height: 200 }}>
70
      <Circle cx={100} cy={100} r={radius}>
71
        <Paint color="blue" />
72
      </Circle>
73
    </Canvas>
74
  );
75
}
76
```
77

78
## Architecture
79

80
React Native Skia is built around several key architectural components:
81

82
- **React Component System**: Declarative JSX components for all graphics operations (`<Canvas>`, `<Circle>`, `<Paint>`, etc.)
83
- **Skia API Bindings**: Direct access to native Skia objects and factory functions through the `Skia` object
84
- **Animation Integration**: Seamless integration with React Native Reanimated for smooth, native-performance animations
85
- **Node Tree System**: Internal DOM-like tree structure that converts JSX to native Skia drawing commands
86
- **Cross-Platform Native Modules**: Platform-specific implementations for iOS, Android, and Web (CanvasKit)
87
- **Memory Management**: Automatic cleanup of native resources and manual control for advanced use cases
88

89
## Capabilities
90

91
### Canvas and Views
92

93
Core rendering infrastructure providing canvas components and low-level view access for graphics rendering.
94

95
```typescript { .api }
96
// Main canvas component for rendering
97
function Canvas(props: CanvasProps): JSX.Element;
98

99
interface CanvasProps {
100
  style?: ViewStyle;
101
  debug?: boolean;
102
  opaque?: boolean;
103
  onSize?: SharedValue<SkSize>;
104
  colorSpace?: "p3" | "srgb";
105
}
106

107
// Canvas reference methods
108
interface CanvasRef {
109
  makeImageSnapshot(rect?: SkRect): SkImage;
110
  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;
111
  redraw(): void;
112
  getNativeId(): number;
113
}
114
```
115

116
[Canvas and Views](./canvas-views.md)
117

118
### Shape Drawing
119

120
Comprehensive set of drawing components for creating basic and advanced shapes, paths, and geometric primitives.
121

122
```typescript { .api }
123
// Basic shapes
124
function Circle(props: CircleProps): JSX.Element;
125
function Rect(props: RectProps): JSX.Element;
126
function Path(props: PathProps): JSX.Element;
127

128
interface CircleProps extends DrawingNodeProps {
129
  cx: number;
130
  cy: number;
131
  r: number;
132
}
133

134
interface RectProps extends DrawingNodeProps {
135
  x: number;
136
  y: number;
137
  width: number;
138
  height: number;
139
}
140
```
141

142
[Shape Drawing](./shapes.md)
143

144
### Paint and Styling
145

146
Paint system for controlling appearance including colors, strokes, fills, and blend modes.
147

148
```typescript { .api }
149
function Paint(props: PaintProps): JSX.Element;
150

151
interface PaintProps {
152
  color?: Color;
153
  strokeWidth?: number;
154
  style?: "fill" | "stroke";
155
  blendMode?: BlendMode;
156
  opacity?: number;
157
  antiAlias?: boolean;
158
}
159
```
160

161
[Paint and Styling](./paint-styling.md)
162

163
### Text Rendering
164

165
Typography system with fonts, text shaping, paragraph layout, and text-along-path capabilities.
166

167
```typescript { .api }
168
function Text(props: TextProps): JSX.Element;
169
function TextPath(props: TextPathProps): JSX.Element;
170

171
interface TextProps extends DrawingNodeProps {
172
  text: string;
173
  font: SkFont;
174
  x?: number;
175
  y?: number;
176
}
177

178
interface TextPathProps extends DrawingNodeProps {
179
  text: string;
180
  font: SkFont;
181
  path: PathDef;
182
}
183
```
184

185
[Text Rendering](./text.md)
186

187
### Effects and Filters
188

189
Comprehensive effects system including shaders, gradients, image filters, color filters, mask filters, and path effects.
190

191
```typescript { .api }
192
// Gradient shaders
193
function LinearGradient(props: LinearGradientProps): JSX.Element;
194
function RadialGradient(props: RadialGradientProps): JSX.Element;
195

196
// Image filters
197
function Blur(props: BlurProps): JSX.Element;
198
function Shadow(props: ShadowProps): JSX.Element;
199

200
interface LinearGradientProps {
201
  start: Vector;
202
  end: Vector;
203
  colors: Color[];
204
  positions?: number[];
205
}
206
```
207

208
[Effects and Filters](./effects-filters.md)
209

210
### Animation Integration
211

212
Animation utilities and React Native Reanimated integration for creating smooth, performant animations.
213

214
```typescript { .api }
215
function interpolate(
216
  x: number,
217
  input: readonly number[],
218
  output: readonly number[],
219
  type?: ExtrapolationType
220
): number;
221

222
function interpolateColors(
223
  value: number,
224
  inputRange: number[],
225
  outputRange: Color[]
226
): number[];
227

228
function mixColors(value: number, x: Color, y: Color): Float32Array;
229
```
230

231
[Animation Integration](./animation.md)
232

233
### Core Skia API
234

235
Direct access to native Skia objects, factory functions, and low-level graphics operations.
236

237
```typescript { .api }
238
// Main Skia API object
239
const Skia: {
240
  // Geometry factories
241
  Point(x: number, y: number): SkPoint;
242
  XYWHRect(x: number, y: number, width: number, height: number): SkRect;
243
  Paint(): SkPaint;
244
  Path: PathFactory;
245
  
246
  // Resource factories
247
  Image: ImageFactory;
248
  Font(typeface?: SkTypeface, size?: number): SkFont;
249
  
250
  // Filter factories
251
  ColorFilter: ColorFilterFactory;
252
  ImageFilter: ImageFilterFactory;
253
  Shader: ShaderFactory;
254
};
255
```
256

257
[Core Skia API](./skia-api.md)
258

259
### Advanced Features
260

261
Advanced capabilities including pictures, video integration, SVG support, custom shaders, and offscreen rendering.
262

263
```typescript { .api }
264
// Offscreen rendering
265
function drawAsImage(
266
  element: ReactElement,
267
  size: SkSize
268
): Promise<SkImage>;
269

270
function drawAsPicture(
271
  element: ReactElement,
272
  bounds?: SkRect
273
): Promise<SkPicture>;
274

275
// Video integration
276
function Video(url: string): Promise<Video> | Video;
277

278
// SVG support
279
const SVG: SVGFactory;
280
```
281

282
[Advanced Features](./advanced.md)
283

284
## Core Types
285

286
```typescript { .api }
287
// Geometric primitives
288
interface SkPoint {
289
  x: number;
290
  y: number;
291
}
292

293
interface SkRect {
294
  x: number;
295
  y: number;
296
  width: number;
297
  height: number;
298
}
299

300
interface SkSize {
301
  width: number;
302
  height: number;
303
}
304

305
// Color representation
306
type Color = string | number | Float32Array;
307

308
// Vector for 2D coordinates
309
type Vector = SkPoint | { x: number; y: number };
310

311
// Path definitions
312
type PathDef = string | SkPath;
313

314
// Transform definitions
315
interface TransformProps {
316
  transform?: Transform3d[];
317
  origin?: Vector;
318
  matrix?: InputMatrix;
319
}
320

321
// Base drawing node properties
322
interface DrawingNodeProps extends TransformProps {
323
  children?: React.ReactNode;
324
}
325

326
// Animation support
327
type SkiaProps<T> = {
328
  [K in keyof T]: T[K] | SharedValue<T[K]> | DerivedValue<T[K]>;
329
};
330
```