Skia

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);

Components

Core APIs

Animation

Importing Skia

Point

Rect

Path

Paint

Color

Matrix

RRect

Font

Image

Surface

Shader

ImageFilter

ColorFilter

PathEffect

MaskFilter

RuntimeEffect

Data

SVG

ContourMeasure

Vertices

Utility Functions

Build docs developers (and LLMs) love

Components

Core APIs

Animation

​Importing Skia

​Point

​Rect

​Path

​Paint

​Color

​Matrix

​RRect

​Font

​Image

​Surface

​Shader

​ImageFilter

​ColorFilter

​PathEffect

​MaskFilter

​RuntimeEffect

​Data

​SVG

​ContourMeasure

​Vertices

​Utility Functions

Build docs developers (and LLMs) love

Importing Skia

Point

Rect

Path

Paint

Color

Matrix

RRect

Font

Image

Surface

Shader

ImageFilter

ColorFilter

PathEffect

MaskFilter

RuntimeEffect

Data

SVG

ContourMeasure

Vertices

Utility Functions