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
```