0
# Core Skia API
1

2
Direct access to native Skia objects, factory functions, and low-level graphics operations through the main Skia API object.
3

4
## Capabilities
5

6
### Main Skia API Object
7

8
The `Skia` object provides factory functions and utilities for all Skia types.
9

10
```typescript { .api }
11
/**
12
 * Main Skia API object containing all factory functions
13
 */
14
const Skia: {
15
  // Geometry factories
16
  Point(x: number, y: number): SkPoint;
17
  XYWHRect(x: number, y: number, width: number, height: number): SkRect;
18
  RRectXY(rect: SkRect, rx: number, ry: number): SkRRect;
19
  RSXform(scos: number, ssin: number, tx: number, ty: number): SkRSXform;
20
  RSXformFromRadians(scale: number, radians: number, tx: number, ty: number, px: number, py: number): SkRSXform;
21
  
22
  // Graphics object factories
23
  Paint(): SkPaint;
24
  Path: PathFactory;
25
  Matrix(matrix?: readonly number[]): SkMatrix;
26
  Font(typeface?: SkTypeface, size?: number): SkFont;
27
  Color(color: Color): SkColor;
28
  
29
  // Filter and effect factories
30
  ColorFilter: ColorFilterFactory;
31
  ImageFilter: ImageFilterFactory;
32
  MaskFilter: MaskFilterFactory;
33
  PathEffect: PathEffectFactory;
34
  Shader: ShaderFactory;
35
  RuntimeEffect: RuntimeEffectFactory;
36
  
37
  // Resource factories
38
  Image: ImageFactory;
39
  AnimatedImage: AnimatedImageFactory;
40
  Data: DataFactory;
41
  SVG: SVGFactory;
42
  Surface: SurfaceFactory;
43
  Typeface: TypefaceFactory;
44
  Video(url: string): Promise<Video> | Video;
45
  
46
  // Text and layout
47
  TextBlob: TextBlobFactory;
48
  FontMgr: FontMgrFactory;
49
  TypefaceFontProvider: TypefaceFontProviderFactory;
50
  ParagraphBuilder: ParagraphBuilderFactory;
51
  
52
  // Rendering and recording
53
  PictureRecorder(): SkPictureRecorder;
54
  Picture: PictureFactory;
55
  Surface: SurfaceFactory;
56
  Context(surface: bigint, width: number, height: number): SkiaContext;
57
  
58
  // Advanced features
59
  RuntimeShaderBuilder(rt: SkRuntimeEffect): SkRuntimeShaderBuilder;
60
  ContourMeasureIter(path: SkPath, forceClosed: boolean, resScale: number): SkContourMeasureIter;
61
  MakeVertices(mode: VertexMode, positions: SkPoint[], textureCoordinates?: SkPoint[], colors?: Color[], indices?: number[], isVolatile?: boolean): SkVertices;
62
  Skottie: SkottieFactory;
63
  NativeBuffer: NativeBufferFactory;
64
  Recorder(): JsiRecorder;
65
};
66
```
67

68
### Geometry Factories
69

70
```typescript { .api }
71
/**
72
 * Create a 2D point
73
 */
74
function Point(x: number, y: number): SkPoint;
75

76
/**
77
 * Create a rectangle from position and size
78
 */
79
function XYWHRect(x: number, y: number, width: number, height: number): SkRect;
80

81
/**
82
 * Create a rounded rectangle
83
 */
84
function RRectXY(rect: SkRect, rx: number, ry: number): SkRRect;
85

86
/**
87
 * Create a rotation-scale-translation transform
88
 */
89
function RSXform(scos: number, ssin: number, tx: number, ty: number): SkRSXform;
90

91
/**
92
 * Create transform from rotation in radians
93
 */
94
function RSXformFromRadians(
95
  scale: number, 
96
  radians: number, 
97
  tx: number, 
98
  ty: number, 
99
  px: number, 
100
  py: number
101
): SkRSXform;
102
```
103

104
### Path Factory
105

106
```typescript { .api }
107
interface PathFactory {
108
  /** Create empty path */
109
  Make(): SkPath;
110
  
111
  /** Create path from SVG path string */
112
  MakeFromSVGString(svg: string): SkPath;
113
  
114
  /** Create path from command array */
115
  MakeFromCmds(cmds: PathCommand[]): SkPath;
116
  
117
  /** Create path from points */
118
  MakeFromPoints(points: SkPoint[], close?: boolean): SkPath;
119
  
120
  /** Interpolate between two paths */
121
  MakeFromPathInterpolation(path1: SkPath, path2: SkPath, weight: number): SkPath | null;
122
}
123

124
interface SkPath {
125
  /** Add rectangle to path */
126
  addRect(rect: SkRect, dir?: PathDirection, start?: number): void;
127
  
128
  /** Add rounded rectangle to path */
129
  addRRect(rrect: SkRRect, dir?: PathDirection, start?: number): void;
130
  
131
  /** Add circle to path */
132
  addCircle(x: number, y: number, r: number, dir?: PathDirection): void;
133
  
134
  /** Add oval to path */
135
  addOval(oval: SkRect, dir?: PathDirection, start?: number): void;
136
  
137
  /** Add arc to path */
138
  addArc(oval: SkRect, startAngle: number, sweepAngle: number): void;
139
  
140
  /** Move to point */
141
  moveTo(x: number, y: number): void;
142
  
143
  /** Line to point */
144
  lineTo(x: number, y: number): void;
145
  
146
  /** Quadratic curve to point */
147
  quadTo(x1: number, y1: number, x2: number, y2: number): void;
148
  
149
  /** Cubic curve to point */
150
  cubicTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
151
  
152
  /** Close current contour */
153
  close(): void;
154
  
155
  /** Get path bounds */
156
  getBounds(): SkRect;
157
  
158
  /** Check if path contains point */
159
  contains(x: number, y: number): boolean;
160
  
161
  /** Get path as SVG string */
162
  toSVGString(): string;
163
  
164
  /** Create copy of path */
165
  copy(): SkPath;
166
  
167
  /** Transform path */
168
  transform(matrix: SkMatrix): void;
169
}
170
```
171

172
### Image Factory
173

174
```typescript { .api }
175
interface ImageFactory {
176
  /** Create image from encoded data */
177
  MakeImageFromEncoded(encoded: SkData): SkImage | null;
178
  
179
  /** Create image from pixel data */
180
  MakeImage(info: ImageInfo, pixels: Uint8Array, bytesPerRow: number): SkImage | null;
181
  
182
  /** Create image from texture */
183
  MakeImageFromTexture(context: SkiaContext, texture: any, info: ImageInfo): SkImage | null;
184
}
185

186
interface SkImage {
187
  /** Get image width */
188
  width(): number;
189
  
190
  /** Get image height */
191
  height(): number;
192
  
193
  /** Encode image to data */
194
  encodeToBytes(format?: EncodedImageFormat, quality?: number): SkData;
195
  
196
  /** Create shader from image */
197
  makeShader(tmx?: TileMode, tmy?: TileMode, filter?: FilterMode, mipmap?: MipmapMode, localMatrix?: SkMatrix): SkShader;
198
  
199
  /** Read pixels from image */
200
  readPixels(srcX?: number, srcY?: number, imageInfo?: ImageInfo): Uint8Array | null;
201
}
202
```
203

204
### Paint Factory and Interface
205

206
```typescript { .api }
207
/**
208
 * Create a new paint object
209
 */
210
function Paint(): SkPaint;
211

212
interface SkPaint {
213
  /** Set paint color */
214
  setColor(color: SkColor): void;
215
  
216
  /** Get paint color */
217
  getColor(): SkColor;
218
  
219
  /** Set paint style (fill or stroke) */
220
  setStyle(style: PaintStyle): void;
221
  
222
  /** Set stroke width */
223
  setStrokeWidth(strokeWidth: number): void;
224
  
225
  /** Set blend mode */
226
  setBlendMode(blendMode: BlendMode): void;
227
  
228
  /** Set anti-alias */
229
  setAntiAlias(antiAlias: boolean): void;
230
  
231
  /** Set shader */
232
  setShader(shader: SkShader | null): void;
233
  
234
  /** Set color filter */
235
  setColorFilter(colorFilter: SkColorFilter | null): void;
236
  
237
  /** Set image filter */
238
  setImageFilter(imageFilter: SkImageFilter | null): void;
239
  
240
  /** Set mask filter */
241
  setMaskFilter(maskFilter: SkMaskFilter | null): void;
242
  
243
  /** Set path effect */
244
  setPathEffect(pathEffect: SkPathEffect | null): void;
245
  
246
  /** Copy paint */
247
  copy(): SkPaint;
248
}
249
```
250

251
### Shader Factory
252

253
```typescript { .api }
254
interface ShaderFactory {
255
  /** Create linear gradient shader */
256
  MakeLinearGradient(start: SkPoint, end: SkPoint, colors: SkColor[], positions?: number[], mode?: TileMode, localMatrix?: SkMatrix, flags?: number): SkShader;
257
  
258
  /** Create radial gradient shader */
259
  MakeRadialGradient(center: SkPoint, radius: number, colors: SkColor[], positions?: number[], mode?: TileMode, localMatrix?: SkMatrix, flags?: number): SkShader;
260
  
261
  /** Create sweep gradient shader */
262
  MakeSweepGradient(cx: number, cy: number, colors: SkColor[], positions?: number[], mode?: TileMode, localMatrix?: SkMatrix, flags?: number, startAngle?: number, endAngle?: number): SkShader;
263
  
264
  /** Create two-point conical gradient */
265
  MakeTwoPointConicalGradient(start: SkPoint, startRadius: number, end: SkPoint, endRadius: number, colors: SkColor[], positions?: number[], mode?: TileMode, localMatrix?: SkMatrix, flags?: number): SkShader;
266
  
267
  /** Create color shader */
268
  MakeColor(color: SkColor, colorSpace?: SkColorSpace): SkShader;
269
  
270
  /** Create blend shader */
271
  MakeBlend(blendMode: BlendMode, dst: SkShader, src: SkShader): SkShader;
272
  
273
  /** Create turbulence shader */
274
  MakeTurbulence(baseFreqX: number, baseFreqY: number, numOctaves: number, seed: number, tileW?: number, tileH?: number): SkShader;
275
  
276
  /** Create fractal noise shader */
277
  MakeFractalNoise(baseFreqX: number, baseFreqY: number, numOctaves: number, seed: number, tileW?: number, tileH?: number): SkShader;
278
}
279
```
280

281
### Matrix Operations
282

283
```typescript { .api }
284
/**
285
 * Create transformation matrix
286
 */
287
function Matrix(matrix?: readonly number[]): SkMatrix;
288

289
interface SkMatrix {
290
  /** Concatenate with another matrix */
291
  concat(other: SkMatrix): void;
292
  
293
  /** Pre-concatenate with another matrix */
294
  preConcat(other: SkMatrix): void;
295
  
296
  /** Post-concatenate with another matrix */
297
  postConcat(other: SkMatrix): void;
298
  
299
  /** Add translation */
300
  preTranslate(dx: number, dy: number): void;
301
  
302
  /** Add scaling */
303
  preScale(sx: number, sy: number, px?: number, py?: number): void;
304
  
305
  /** Add rotation */
306
  preRotate(degrees: number, px?: number, py?: number): void;
307
  
308
  /** Add skew */
309
  preSkew(kx: number, ky: number, px?: number, py?: number): void;
310
  
311
  /** Get matrix values as array */
312
  get(): number[];
313
  
314
  /** Set matrix from array */
315
  set(values: readonly number[]): void;
316
  
317
  /** Reset to identity */
318
  identity(): void;
319
  
320
  /** Invert matrix */
321
  invert(): SkMatrix | null;
322
  
323
  /** Transform point */
324
  mapPoints(points: SkPoint[]): SkPoint[];
325
  
326
  /** Transform rectangle */
327
  mapRect(rect: SkRect): SkRect;
328
}
329
```
330

331
## Usage Examples
332

333
```typescript
334
import { Skia } from "@shopify/react-native-skia";
335

336
// Create geometric objects
337
const point = Skia.Point(10, 20);
338
const rect = Skia.XYWHRect(0, 0, 100, 50);
339
const rrect = Skia.RRectXY(rect, 5, 5);
340

341
// Create and manipulate paths
342
const path = Skia.Path.Make();
343
path.addRect(rect);
344
path.addCircle(50, 25, 20);
345
const svgPath = path.toSVGString();
346

347
// Create paint and set properties
348
const paint = Skia.Paint();
349
paint.setColor(Skia.Color("red"));
350
paint.setStyle(PaintStyle.Stroke);
351
paint.setStrokeWidth(2);
352

353
// Create gradients
354
const gradient = Skia.Shader.MakeLinearGradient(
355
  { x: 0, y: 0 },
356
  { x: 100, y: 0 },
357
  [Skia.Color("red"), Skia.Color("blue")],
358
  null,
359
  TileMode.Clamp
360
);
361
paint.setShader(gradient);
362

363
// Create matrix transformations
364
const matrix = Skia.Matrix();
365
matrix.preRotate(45, 50, 25);
366
matrix.preScale(1.5, 1.5);
367

368
// Load images
369
const loadImage = async (uri: string) => {
370
  const data = await fetch(uri).then(r => r.arrayBuffer());
371
  const skData = Skia.Data.fromBytes(new Uint8Array(data));
372
  return Skia.Image.MakeImageFromEncoded(skData);
373
};
374
```
375

376
## Core Types
377

378
```typescript { .api }
379
// Geometric primitives
380
interface SkPoint {
381
  x: number;
382
  y: number;
383
}
384

385
interface SkRect {
386
  x: number;
387
  y: number;
388
  width: number;
389
  height: number;
390
}
391

392
interface SkRRect {
393
  rect: SkRect;
394
  rx: number;
395
  ry: number;
396
}
397

398
interface SkRSXform {
399
  scos: number;
400
  ssin: number;
401
  tx: number;
402
  ty: number;
403
}
404

405
// Core graphics types
406
interface SkColor {
407
  r: number;
408
  g: number;
409
  b: number;
410
  a: number;
411
}
412

413
// Enums
414
enum PaintStyle {
415
  Fill = 0,
416
  Stroke = 1
417
}
418

419
enum TileMode {
420
  Clamp = 0,
421
  Repeat = 1,
422
  Mirror = 2,
423
  Decal = 3
424
}
425

426
enum BlendMode {
427
  // ... (comprehensive blend mode enum)
428
}
429

430
enum PathDirection {
431
  CW = 0,   // Clockwise
432
  CCW = 1   // Counter-clockwise
433
}
434

435
enum VertexMode {
436
  Triangles = 0,
437
  TriangleStrip = 1,
438
  TriangleFan = 2
439
}
440

441
// Color and image types
442
type Color = string | number | Float32Array;
443

444
enum EncodedImageFormat {
445
  JPEG = 3,
446
  PNG = 4,
447
  WEBP = 6
448
}
449

450
interface ImageInfo {
451
  width: number;
452
  height: number;
453
  colorType: ColorType;
454
  alphaType: AlphaType;
455
}
456
```