0
# Advanced Features
1

2
Advanced capabilities including pictures, video integration, SVG support, custom shaders, and offscreen rendering in React Native Skia.
3

4
## Capabilities
5

6
### Picture Recording and Playback
7

8
Pictures allow recording drawing commands for efficient playback and reuse.
9

10
```typescript { .api }
11
/**
12
 * Component for rendering recorded pictures
13
 */
14
function Picture(props: PictureProps): JSX.Element;
15

16
interface PictureProps extends DrawingNodeProps {
17
  /** Recorded picture to render */
18
  picture: SkPicture;
19
}
20

21
/**
22
 * Create picture recorder for capturing drawing commands
23
 */
24
function PictureRecorder(): SkPictureRecorder;
25

26
interface SkPictureRecorder {
27
  /** Begin recording to a canvas with bounds */
28
  beginRecording(bounds: SkRect): SkCanvas;
29
  
30
  /** Finish recording and return the picture */
31
  finishRecordingAsPicture(): SkPicture;
32
}
33

34
interface SkPicture {
35
  /** Get the recorded bounds */
36
  getBounds(): SkRect;
37
  
38
  /** Play back the picture on a canvas */
39
  playback(canvas: SkCanvas): void;
40
  
41
  /** Create shader from picture */
42
  makeShader(tmx?: TileMode, tmy?: TileMode, localMatrix?: SkMatrix, bounds?: SkRect): SkShader;
43
}
44

45
/**
46
 * Picture factory for creating and loading pictures
47
 */
48
interface PictureFactory {
49
  /** Create picture from recorded data */
50
  MakeFromData(data: SkData): SkPicture | null;
51
}
52
```
53

54
### SVG Support
55

56
Scalable Vector Graphics integration for rendering vector images.
57

58
```typescript { .api }
59
/**
60
 * Component for rendering SVG images
61
 */
62
function ImageSVG(props: ImageSVGProps): JSX.Element;
63

64
interface ImageSVGProps extends DrawingNodeProps {
65
  /** SVG object to render */
66
  svg: SkSVG;
67
  /** Override SVG width */
68
  width?: number;
69
  /** Override SVG height */
70
  height?: number;
71
}
72

73
/**
74
 * SVG factory for loading and creating SVG objects
75
 */
76
interface SVGFactory {
77
  /** Create SVG from string data */
78
  MakeFromString(svg: string): SkSVG;
79
  
80
  /** Create SVG from binary data */
81
  MakeFromData(data: SkData): SkSVG;
82
}
83

84
interface SkSVG {
85
  /** Get SVG dimensions */
86
  getSize(): SkSize;
87
  
88
  /** Render SVG to canvas */
89
  render(canvas: SkCanvas): void;
90
  
91
  /** Set container size for responsive SVGs */
92
  setContainerSize(size: SkSize): void;
93
}
94
```
95

96
### Video Integration
97

98
Video frame access and playback integration.
99

100
```typescript { .api }
101
/**
102
 * Load video for frame access
103
 * @param url - Video URL or local path
104
 * @returns Promise resolving to Video object or immediate Video object
105
 */
106
function Video(url: string): Promise<Video> | Video;
107

108
interface Video {
109
  /** Get video duration in seconds */
110
  duration(): number;
111
  
112
  /** Get video frame rate */
113
  framerate(): number;
114
  
115
  /** Get video dimensions */
116
  getSize(): SkSize;
117
  
118
  /** Get frame at specific time */
119
  getFrame(time: number): SkImage;
120
  
121
  /** Seek to specific time */
122
  seek(time: number): void;
123
  
124
  /** Get current playback position */
125
  getCurrentTime(): number;
126
}
127

128
/**
129
 * Hook for video playback with Reanimated integration
130
 */
131
function useVideo(url: string): Video | null;
132
```
133

134
### Lottie Animation Support
135

136
Integration with Lottie animations through Skottie.
137

138
```typescript { .api }
139
/**
140
 * Component for rendering Lottie animations
141
 */
142
function Skottie(props: SkottieProps): JSX.Element;
143

144
interface SkottieProps extends DrawingNodeProps {
145
  /** Skottie animation object */
146
  animation: SkSkottieAnimation;
147
  /** Current frame (0.0 to 1.0) */
148
  frame: number;
149
}
150

151
/**
152
 * Skottie factory for loading Lottie animations
153
 */
154
interface SkottieFactory {
155
  /** Create animation from Lottie JSON string */
156
  MakeFromString(json: string): SkSkottieAnimation;
157
  
158
  /** Create animation from binary data */
159
  MakeFromData(data: SkData): SkSkottieAnimation;
160
}
161

162
interface SkSkottieAnimation {
163
  /** Get animation duration in seconds */
164
  duration(): number;
165
  
166
  /** Get animation frame rate */
167
  fps(): number;
168
  
169
  /** Get animation bounds */
170
  getBounds(): SkRect;
171
  
172
  /** Render frame to canvas */
173
  render(canvas: SkCanvas, bounds: SkRect): void;
174
  
175
  /** Seek to specific time */
176
  seekFrame(frame: number): void;
177
  
178
  /** Seek to specific time in seconds */
179
  seekFrameTime(seconds: number): void;
180
}
181
```
182

183
### Runtime Shaders
184

185
Custom GPU shaders for advanced visual effects.
186

187
```typescript { .api }
188
/**
189
 * Runtime effect factory for creating custom shaders
190
 */
191
interface RuntimeEffectFactory {
192
  /** Create runtime effect from SKSL shader source */
193
  Make(sksl: string): SkRuntimeEffect | null;
194
  
195
  /** Create runtime effect from SKSL with error reporting */
196
  MakeForShader(sksl: string): { effect: SkRuntimeEffect | null; errors: string };
197
}
198

199
interface SkRuntimeEffect {
200
  /** Create shader from this effect */
201
  makeShader(uniforms?: number[], children?: SkShader[]): SkShader;
202
  
203
  /** Create shader builder */
204
  makeShaderBuilder(): SkRuntimeShaderBuilder;
205
  
206
  /** Get uniform information */
207
  getUniforms(): RuntimeEffectUniform[];
208
  
209
  /** Get children information */
210
  getChildren(): RuntimeEffectChild[];
211
}
212

213
interface SkRuntimeShaderBuilder {
214
  /** Set uniform value by name */
215
  setUniform(name: string, value: number | number[]): void;
216
  
217
  /** Set child shader by name */
218
  setChild(name: string, shader: SkShader): void;
219
  
220
  /** Build the final shader */
221
  makeShader(localMatrix?: SkMatrix): SkShader;
222
}
223

224
interface RuntimeEffectUniform {
225
  name: string;
226
  offset: number;
227
  type: string;
228
  count: number;
229
}
230

231
interface RuntimeEffectChild {
232
  name: string;
233
  type: string;
234
}
235
```
236

237
### Surface and Context Management
238

239
Low-level surface creation and graphics context management.
240

241
```typescript { .api }
242
/**
243
 * Surface factory for creating rendering surfaces
244
 */
245
interface SurfaceFactory {
246
  /** Create CPU raster surface */
247
  MakeRasterN32Premul(width: number, height: number): SkSurface | null;
248
  
249
  /** Create surface from existing pixels */
250
  MakeRasterDirect(imageInfo: ImageInfo, pixels: ArrayBuffer, bytesPerRow: number): SkSurface | null;
251
}
252

253
interface SkSurface {
254
  /** Get the canvas for drawing */
255
  getCanvas(): SkCanvas;
256
  
257
  /** Create image snapshot */
258
  makeImageSnapshot(bounds?: SkRect): SkImage;
259
  
260
  /** Get surface width */
261
  width(): number;
262
  
263
  /** Get surface height */
264
  height(): number;
265
  
266
  /** Flush pending drawing operations */
267
  flush(): void;
268
}
269

270
/**
271
 * Create graphics context for GPU rendering
272
 */
273
function Context(surface: bigint, width: number, height: number): SkiaContext;
274

275
interface SkiaContext {
276
  /** Flush GPU commands */
277
  flush(): void;
278
}
279
```
280

281
### Vertices and Custom Geometry
282

283
Custom mesh geometry with vertices, texture coordinates, and colors.
284

285
```typescript { .api }
286
/**
287
 * Create vertex geometry
288
 */
289
function MakeVertices(
290
  mode: VertexMode,
291
  positions: SkPoint[],
292
  textureCoordinates?: SkPoint[],
293
  colors?: Color[],
294
  indices?: number[],
295
  isVolatile?: boolean
296
): SkVertices;
297

298
interface SkVertices {
299
  /** Get vertex bounds */
300
  getBounds(): SkRect;
301
}
302

303
enum VertexMode {
304
  Triangles = 0,
305
  TriangleStrip = 1,
306
  TriangleFan = 2
307
}
308
```
309

310
### Native Buffer Management
311

312
Memory management for efficient data handling.
313

314
```typescript { .api }
315
/**
316
 * Native buffer factory for memory management
317
 */
318
interface NativeBufferFactory {
319
  /** Allocate native buffer */
320
  Make(size: number): SkNativeBuffer;
321
}
322

323
interface SkNativeBuffer {
324
  /** Get buffer size */
325
  size(): number;
326
  
327
  /** Get typed array view */
328
  getTypedArray(): Uint8Array;
329
}
330
```
331

332
### Path Measurement
333

334
Advanced path analysis and measurement utilities.
335

336
```typescript { .api }
337
/**
338
 * Create contour measure iterator for path analysis
339
 */
340
function ContourMeasureIter(
341
  path: SkPath,
342
  forceClosed: boolean,
343
  resScale: number
344
): SkContourMeasureIter;
345

346
interface SkContourMeasureIter {
347
  /** Get next contour measure */
348
  next(): SkContourMeasure | null;
349
}
350

351
interface SkContourMeasure {
352
  /** Get contour length */
353
  length(): number;
354
  
355
  /** Get position and tangent at distance */
356
  getPosTan(distance: number): { pos: SkPoint; tan: SkPoint } | null;
357
  
358
  /** Get segment of the contour as path */
359
  getSegment(startD: number, stopD: number, startWithMoveTo: boolean): SkPath;
360
  
361
  /** Check if contour is closed */
362
  isClosed(): boolean;
363
}
364
```
365

366
## Usage Examples
367

368
```typescript
369
import { 
370
  Picture, 
371
  ImageSVG, 
372
  Skottie, 
373
  Skia, 
374
  drawAsPicture 
375
} from "@shopify/react-native-skia";
376

377
// Create and use pictures
378
const createPicture = () => {
379
  const recorder = Skia.PictureRecorder();
380
  const canvas = recorder.beginRecording({ x: 0, y: 0, width: 100, height: 100 });
381
  
382
  const paint = Skia.Paint();
383
  paint.setColor(Skia.Color("red"));
384
  canvas.drawCircle(50, 50, 25, paint);
385
  
386
  return recorder.finishRecordingAsPicture();
387
};
388

389
// Render picture component
390
<Picture picture={myPicture} />
391

392
// SVG rendering
393
const svg = Skia.SVG.MakeFromString(`
394
  <svg width="100" height="100">
395
    <circle cx="50" cy="50" r="25" fill="blue" />
396
  </svg>
397
`);
398

399
<ImageSVG svg={svg} />
400

401
// Lottie animation
402
const animation = Skia.Skottie.MakeFromString(lottieJson);
403

404
<Skottie animation={animation} frame={animatedProgress} />
405

406
// Runtime shader
407
const effect = Skia.RuntimeEffect.Make(`
408
  uniform float time;
409
  uniform vec2 resolution;
410
  
411
  half4 main(vec2 coord) {
412
    vec2 uv = coord / resolution;
413
    float d = length(uv - 0.5);
414
    float c = sin(d * 10.0 + time) * 0.5 + 0.5;
415
    return half4(c, c * 0.5, c * 0.2, 1.0);
416
  }
417
`);
418

419
if (effect) {
420
  const shader = effect.makeShader([time, width, height]);
421
  // Use shader with Paint component
422
}
423

424
// Offscreen rendering
425
const renderToImage = async () => {
426
  const image = await drawAsImage(
427
    <Circle cx={50} cy={50} r={25}>
428
      <Paint color="green" />
429
    </Circle>,
430
    { width: 100, height: 100 }
431
  );
432
  return image;
433
};
434
```
435

436
## Core Types
437

438
```typescript { .api }
439
// Advanced geometry types
440
interface SkVertices {
441
  getBounds(): SkRect;
442
}
443

444
enum VertexMode {
445
  Triangles = 0,
446
  TriangleStrip = 1,
447
  TriangleFan = 2
448
}
449

450
// Image and surface types
451
interface ImageInfo {
452
  width: number;
453
  height: number;
454
  colorType: ColorType;
455
  alphaType: AlphaType;
456
}
457

458
enum ColorType {
459
  Unknown = 0,
460
  Alpha_8 = 1,
461
  RGB_565 = 2,
462
  ARGB_4444 = 3,
463
  RGBA_8888 = 4,
464
  BGRA_8888 = 5,
465
  RGB_888x = 6,
466
  RGBA_1010102 = 7,
467
  RGB_101010x = 8,
468
  Gray_8 = 9,
469
  RGBA_F16Norm = 10,
470
  RGBA_F16 = 11,
471
  RGBA_F32 = 12
472
}
473

474
enum AlphaType {
475
  Unknown = 0,
476
  Opaque = 1,
477
  Premul = 2,
478
  Unpremul = 3
479
}
480

481
// Tile modes for shaders and images
482
enum TileMode {
483
  Clamp = 0,
484
  Repeat = 1,
485
  Mirror = 2,
486
  Decal = 3
487
}
488

489
// Size and dimension types
490
interface SkSize {
491
  width: number;
492
  height: number;
493
}
494

495
// Common utility types
496
type Color = string | number | Float32Array;
497
type PathDef = string | SkPath;
498
```