Skia

Core Skia API for creating graphics primitives

The Skia object provides factory methods for creating all Skia graphics primitives including paths, paints, images, shaders, and more.

Importing Skia

import { Skia } from "@shopify/react-native-skia";

Point

Create a point object.

Skia.Point · (x: number, y: number) => SkPoint

Creates a point at coordinates (x, y)

const point = Skia.Point(100, 150);
console.log(point); // { x: 100, y: 150 }

Rect

Create rectangle objects.

Skia.XYWHRect · (x: number, y: number, width: number, height: number) => SkRect

Creates a rectangle from position and dimensions

const rect = Skia.XYWHRect(10, 20, 100, 50);

Path

Create and manipulate paths.

Skia.Path.Make · () => SkPath

Creates a new empty path

const path = Skia.Path.Make();
path.moveTo(0, 0);
path.lineTo(100, 100);
path.close();

Skia.Path.MakeFromSVGString · (svgPath: string) => SkPath | null

Creates a path from an SVG path string

const path = Skia.Path.MakeFromSVGString("M 0 0 L 100 100 Z");

Skia.Path.MakeFromOp · (path1: SkPath, path2: SkPath, op: PathOp) => SkPath | null

Creates a path from a boolean operation on two paths

const result = Skia.Path.MakeFromOp(path1, path2, PathOp.Union);

Paint

Create paint objects for styling.

Skia.Paint · () => SkPaint

Creates a new paint object with default settings

const paint = Skia.Paint();
paint.setColor(Skia.Color("blue"));
paint.setStyle(PaintStyle.Stroke);
paint.setStrokeWidth(2);

Color

Create color values.

Skia.Color · (color: string | number) => SkColor

Converts color strings or numbers to Skia color format

const red = Skia.Color("red");
const blue = Skia.Color("#0000FF");
const green = Skia.Color("rgb(0, 255, 0)");
const rgba = Skia.Color("rgba(255, 0, 0, 0.5)");

Matrix

Create transformation matrices.

Skia.Matrix · (values?: number[]) => SkMatrix

Creates a matrix from an array of 9 values, or an identity matrix if no values provided

const identity = Skia.Matrix();
const custom = Skia.Matrix([1, 0, 0, 0, 1, 0, 0, 0, 1]);

// Transform operations
const translated = identity.translate(50, 100);
const rotated = identity.rotate(Math.PI / 4);
const scaled = identity.scale(2, 2);

RRect

Create rounded rectangles.

Skia.RRectXY · (rect: SkRect, rx: number, ry: number) => SkRRect

Creates a rounded rectangle with specified corner radii

const rect = Skia.XYWHRect(10, 10, 100, 100);
const rrect = Skia.RRectXY(rect, 10, 10);

Font

Create font objects.

Skia.Font · (typeface?: SkTypeface, size?: number) => SkFont

Creates a font with optional typeface and size

const font = Skia.Font(null, 24); // System font, 24pt
const customFont = Skia.Font(typeface, 16);

Image

Create and load images.

Skia.Image.MakeImageFromEncoded · (data: Uint8Array) => SkImage | null

Creates an image from encoded data (PNG, JPEG, etc.)

const imageData = await fetch(url).then(r => r.arrayBuffer());
const image = Skia.Image.MakeImageFromEncoded(new Uint8Array(imageData));

Surface

Create drawing surfaces.

Skia.Surface.Make · (width: number, height: number) => SkSurface | null

Creates an offscreen surface for drawing

const surface = Skia.Surface.Make(300, 300);
const canvas = surface.getCanvas();

// Draw on canvas
canvas.drawCircle(150, 150, 100, paint);

// Get result as image
const image = surface.makeImageSnapshot();

Shader

Create shader effects.

Skia.Shader.MakeLinearGradient · (start: SkPoint, end: SkPoint, colors: SkColor[], positions?: number[], mode?: TileMode) => SkShader

Creates a linear gradient shader

const shader = Skia.Shader.MakeLinearGradient(
  Skia.Point(0, 0),
  Skia.Point(100, 100),
  [Skia.Color("red"), Skia.Color("blue")],
  null,
  TileMode.Clamp
);

Skia.Shader.MakeRadialGradient · (center: SkPoint, radius: number, colors: SkColor[], positions?: number[], mode?: TileMode) => SkShader

Creates a radial gradient shader

Skia.Shader.MakeSweepGradient · (cx: number, cy: number, colors: SkColor[], positions?: number[], mode?: TileMode) => SkShader

Creates a sweep (conical) gradient shader

ImageFilter

Create image filter effects.

Skia.ImageFilter.MakeBlur · (sigmaX: number, sigmaY: number, mode: TileMode, input: SkImageFilter | null) => SkImageFilter

Creates a blur filter

const blur = Skia.ImageFilter.MakeBlur(10, 10, TileMode.Decal, null);
paint.setImageFilter(blur);

Skia.ImageFilter.MakeOffset · (dx: number, dy: number, input: SkImageFilter | null) => SkImageFilter

Creates an offset filter

Skia.ImageFilter.MakeDropShadow · (dx: number, dy: number, sigmaX: number, sigmaY: number, color: SkColor, input: SkImageFilter | null) => SkImageFilter

Creates a drop shadow filter

ColorFilter

Create color filter effects.

Skia.ColorFilter.MakeBlend · (color: SkColor, mode: BlendMode) => SkColorFilter

Creates a blend color filter

const filter = Skia.ColorFilter.MakeBlend(
  Skia.Color("red"),
  BlendMode.Multiply
);

Skia.ColorFilter.MakeMatrix · (matrix: number[]) => SkColorFilter

Creates a color matrix filter (20 values)

const grayscale = Skia.ColorFilter.MakeMatrix([
  0.21, 0.72, 0.07, 0, 0,
  0.21, 0.72, 0.07, 0, 0,
  0.21, 0.72, 0.07, 0, 0,
  0,    0,    0,    1, 0,
]);

Skia.ColorFilter.MakeLerp · (t: number, src: SkColorFilter, dst: SkColorFilter) => SkColorFilter

Interpolates between two color filters

PathEffect

Create path effects.

Skia.PathEffect.MakeDash · (intervals: number[], phase: number) => SkPathEffect

Creates a dash path effect

const dash = Skia.PathEffect.MakeDash([10, 5], 0);
paint.setPathEffect(dash);

Skia.PathEffect.MakeCorner · (radius: number) => SkPathEffect

Rounds corners of a path

Skia.PathEffect.MakeDiscrete · (segLength: number, deviation: number, seed: number) => SkPathEffect

Creates a jagged/rough edge effect

MaskFilter

Create mask filters.

Skia.MaskFilter.MakeBlur · (style: BlurStyle, sigma: number, respectCTM: boolean) => SkMaskFilter

Creates a blur mask filter

const blur = Skia.MaskFilter.MakeBlur(BlurStyle.Normal, 5, true);
paint.setMaskFilter(blur);

RuntimeEffect

Create custom shaders.

Skia.RuntimeEffect.Make · (sksl: string) => SkRuntimeEffect | null

Compiles an SkSL shader

const source = Skia.RuntimeEffect.Make(`
  uniform vec2 resolution;
  uniform float time;
  
  half4 main(vec2 coord) {
    vec2 uv = coord / resolution;
    return vec4(uv.x, uv.y, 0.5 + 0.5 * sin(time), 1.0);
  }
`);

Data

Work with data buffers.

Skia.Data.fromBytes · (bytes: Uint8Array) => SkData

Creates a data object from a byte array

Skia.Data.fromBase64 · (base64: string) => SkData

Creates a data object from a base64 string

SVG

Load SVG images.

Skia.SVG.MakeFromString · (svg: string) => SkSVG | null

Parses an SVG string

const svg = Skia.SVG.MakeFromString(`
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
`);

ContourMeasure

Measure paths.

Skia.ContourMeasureIter · (path: SkPath, forceClosed: boolean, resScale: number) => SkContourMeasureIter

Creates an iterator for measuring path contours

const iter = Skia.ContourMeasureIter(path, false, 1);
const contour = iter.next();
if (contour) {
  const length = contour.length();
  const pos = contour.getPosTan(length / 2);
}

Vertices

Create vertex arrays for triangle meshes.

Skia.MakeVertices · (mode: VertexMode, positions: SkPoint[], textureCoordinates?: SkPoint[], colors?: SkColor[], indices?: number[]) => SkVertices

Creates a vertex array

const vertices = Skia.MakeVertices(
  VertexMode.Triangles,
  [
    Skia.Point(0, 0),
    Skia.Point(100, 0),
    Skia.Point(50, 100),
  ],
  null,
  [
    Skia.Color("red"),
    Skia.Color("green"),
    Skia.Color("blue"),
  ]
);

Utility Functions

vec · (x: number, y: number) => Vector

Shorthand for creating vectors

import { vec } from "@shopify/react-native-skia";
const point = vec(100, 200); // Same as { x: 100, y: 200 }

rect · (x: number, y: number, width: number, height: number) => SkRect

Shorthand for creating rectangles

import { rect } from "@shopify/react-native-skia";
const bounds = rect(0, 0, 300, 300);

rrect · (rect: SkRect, rx: number, ry: number) => SkRRect

Shorthand for creating rounded rectangles

import { rrect, rect } from "@shopify/react-native-skia";
const roundedBox = rrect(rect(0, 0, 100, 100), 10, 10);