High-performance React Native Graphics using Skia
—
Direct access to native Skia objects, factory functions, and low-level graphics operations through the main Skia API object.
The Skia object provides factory functions and utilities for all Skia types.
/**
* Main Skia API object containing all factory functions
*/
const Skia: {
// Geometry factories
Point(x: number, y: number): SkPoint;
XYWHRect(x: number, y: number, width: number, height: number): SkRect;
RRectXY(rect: SkRect, rx: number, ry: number): SkRRect;
RSXform(scos: number, ssin: number, tx: number, ty: number): SkRSXform;
RSXformFromRadians(scale: number, radians: number, tx: number, ty: number, px: number, py: number): SkRSXform;
// Graphics object factories
Paint(): SkPaint;
Path: PathFactory;
Matrix(matrix?: readonly number[]): SkMatrix;
Font(typeface?: SkTypeface, size?: number): SkFont;
Color(color: Color): SkColor;
// Filter and effect factories
ColorFilter: ColorFilterFactory;
ImageFilter: ImageFilterFactory;
MaskFilter: MaskFilterFactory;
PathEffect: PathEffectFactory;
Shader: ShaderFactory;
RuntimeEffect: RuntimeEffectFactory;
// Resource factories
Image: ImageFactory;
AnimatedImage: AnimatedImageFactory;
Data: DataFactory;
SVG: SVGFactory;
Surface: SurfaceFactory;
Typeface: TypefaceFactory;
Video(url: string): Promise<Video> | Video;
// Text and layout
TextBlob: TextBlobFactory;
FontMgr: FontMgrFactory;
TypefaceFontProvider: TypefaceFontProviderFactory;
ParagraphBuilder: ParagraphBuilderFactory;
// Rendering and recording
PictureRecorder(): SkPictureRecorder;
Picture: PictureFactory;
Surface: SurfaceFactory;
Context(surface: bigint, width: number, height: number): SkiaContext;
// Advanced features
RuntimeShaderBuilder(rt: SkRuntimeEffect): SkRuntimeShaderBuilder;
ContourMeasureIter(path: SkPath, forceClosed: boolean, resScale: number): SkContourMeasureIter;
MakeVertices(mode: VertexMode, positions: SkPoint[], textureCoordinates?: SkPoint[], colors?: Color[], indices?: number[], isVolatile?: boolean): SkVertices;
Skottie: SkottieFactory;
NativeBuffer: NativeBufferFactory;
Recorder(): JsiRecorder;
};/**
* Create a 2D point
*/
function Point(x: number, y: number): SkPoint;
/**
* Create a rectangle from position and size
*/
function XYWHRect(x: number, y: number, width: number, height: number): SkRect;
/**
* Create a rounded rectangle
*/
function RRectXY(rect: SkRect, rx: number, ry: number): SkRRect;
/**
* Create a rotation-scale-translation transform
*/
function RSXform(scos: number, ssin: number, tx: number, ty: number): SkRSXform;
/**
* Create transform from rotation in radians
*/
function RSXformFromRadians(
scale: number,
radians: number,
tx: number,
ty: number,
px: number,
py: number
): SkRSXform;interface PathFactory {
/** Create empty path */
Make(): SkPath;
/** Create path from SVG path string */
MakeFromSVGString(svg: string): SkPath;
/** Create path from command array */
MakeFromCmds(cmds: PathCommand[]): SkPath;
/** Create path from points */
MakeFromPoints(points: SkPoint[], close?: boolean): SkPath;
/** Interpolate between two paths */
MakeFromPathInterpolation(path1: SkPath, path2: SkPath, weight: number): SkPath | null;
}
interface SkPath {
/** Add rectangle to path */
addRect(rect: SkRect, dir?: PathDirection, start?: number): void;
/** Add rounded rectangle to path */
addRRect(rrect: SkRRect, dir?: PathDirection, start?: number): void;
/** Add circle to path */
addCircle(x: number, y: number, r: number, dir?: PathDirection): void;
/** Add oval to path */
addOval(oval: SkRect, dir?: PathDirection, start?: number): void;
/** Add arc to path */
addArc(oval: SkRect, startAngle: number, sweepAngle: number): void;
/** Move to point */
moveTo(x: number, y: number): void;
/** Line to point */
lineTo(x: number, y: number): void;
/** Quadratic curve to point */
quadTo(x1: number, y1: number, x2: number, y2: number): void;
/** Cubic curve to point */
cubicTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
/** Close current contour */
close(): void;
/** Get path bounds */
getBounds(): SkRect;
/** Check if path contains point */
contains(x: number, y: number): boolean;
/** Get path as SVG string */
toSVGString(): string;
/** Create copy of path */
copy(): SkPath;
/** Transform path */
transform(matrix: SkMatrix): void;
}interface ImageFactory {
/** Create image from encoded data */
MakeImageFromEncoded(encoded: SkData): SkImage | null;
/** Create image from pixel data */
MakeImage(info: ImageInfo, pixels: Uint8Array, bytesPerRow: number): SkImage | null;
/** Create image from texture */
MakeImageFromTexture(context: SkiaContext, texture: any, info: ImageInfo): SkImage | null;
}
interface SkImage {
/** Get image width */
width(): number;
/** Get image height */
height(): number;
/** Encode image to data */
encodeToBytes(format?: EncodedImageFormat, quality?: number): SkData;
/** Create shader from image */
makeShader(tmx?: TileMode, tmy?: TileMode, filter?: FilterMode, mipmap?: MipmapMode, localMatrix?: SkMatrix): SkShader;
/** Read pixels from image */
readPixels(srcX?: number, srcY?: number, imageInfo?: ImageInfo): Uint8Array | null;
}/**
* Create a new paint object
*/
function Paint(): SkPaint;
interface SkPaint {
/** Set paint color */
setColor(color: SkColor): void;
/** Get paint color */
getColor(): SkColor;
/** Set paint style (fill or stroke) */
setStyle(style: PaintStyle): void;
/** Set stroke width */
setStrokeWidth(strokeWidth: number): void;
/** Set blend mode */
setBlendMode(blendMode: BlendMode): void;
/** Set anti-alias */
setAntiAlias(antiAlias: boolean): void;
/** Set shader */
setShader(shader: SkShader | null): void;
/** Set color filter */
setColorFilter(colorFilter: SkColorFilter | null): void;
/** Set image filter */
setImageFilter(imageFilter: SkImageFilter | null): void;
/** Set mask filter */
setMaskFilter(maskFilter: SkMaskFilter | null): void;
/** Set path effect */
setPathEffect(pathEffect: SkPathEffect | null): void;
/** Copy paint */
copy(): SkPaint;
}interface ShaderFactory {
/** Create linear gradient shader */
MakeLinearGradient(start: SkPoint, end: SkPoint, colors: SkColor[], positions?: number[], mode?: TileMode, localMatrix?: SkMatrix, flags?: number): SkShader;
/** Create radial gradient shader */
MakeRadialGradient(center: SkPoint, radius: number, colors: SkColor[], positions?: number[], mode?: TileMode, localMatrix?: SkMatrix, flags?: number): SkShader;
/** Create sweep gradient shader */
MakeSweepGradient(cx: number, cy: number, colors: SkColor[], positions?: number[], mode?: TileMode, localMatrix?: SkMatrix, flags?: number, startAngle?: number, endAngle?: number): SkShader;
/** Create two-point conical gradient */
MakeTwoPointConicalGradient(start: SkPoint, startRadius: number, end: SkPoint, endRadius: number, colors: SkColor[], positions?: number[], mode?: TileMode, localMatrix?: SkMatrix, flags?: number): SkShader;
/** Create color shader */
MakeColor(color: SkColor, colorSpace?: SkColorSpace): SkShader;
/** Create blend shader */
MakeBlend(blendMode: BlendMode, dst: SkShader, src: SkShader): SkShader;
/** Create turbulence shader */
MakeTurbulence(baseFreqX: number, baseFreqY: number, numOctaves: number, seed: number, tileW?: number, tileH?: number): SkShader;
/** Create fractal noise shader */
MakeFractalNoise(baseFreqX: number, baseFreqY: number, numOctaves: number, seed: number, tileW?: number, tileH?: number): SkShader;
}/**
* Create transformation matrix
*/
function Matrix(matrix?: readonly number[]): SkMatrix;
interface SkMatrix {
/** Concatenate with another matrix */
concat(other: SkMatrix): void;
/** Pre-concatenate with another matrix */
preConcat(other: SkMatrix): void;
/** Post-concatenate with another matrix */
postConcat(other: SkMatrix): void;
/** Add translation */
preTranslate(dx: number, dy: number): void;
/** Add scaling */
preScale(sx: number, sy: number, px?: number, py?: number): void;
/** Add rotation */
preRotate(degrees: number, px?: number, py?: number): void;
/** Add skew */
preSkew(kx: number, ky: number, px?: number, py?: number): void;
/** Get matrix values as array */
get(): number[];
/** Set matrix from array */
set(values: readonly number[]): void;
/** Reset to identity */
identity(): void;
/** Invert matrix */
invert(): SkMatrix | null;
/** Transform point */
mapPoints(points: SkPoint[]): SkPoint[];
/** Transform rectangle */
mapRect(rect: SkRect): SkRect;
}import { Skia } from "@shopify/react-native-skia";
// Create geometric objects
const point = Skia.Point(10, 20);
const rect = Skia.XYWHRect(0, 0, 100, 50);
const rrect = Skia.RRectXY(rect, 5, 5);
// Create and manipulate paths
const path = Skia.Path.Make();
path.addRect(rect);
path.addCircle(50, 25, 20);
const svgPath = path.toSVGString();
// Create paint and set properties
const paint = Skia.Paint();
paint.setColor(Skia.Color("red"));
paint.setStyle(PaintStyle.Stroke);
paint.setStrokeWidth(2);
// Create gradients
const gradient = Skia.Shader.MakeLinearGradient(
{ x: 0, y: 0 },
{ x: 100, y: 0 },
[Skia.Color("red"), Skia.Color("blue")],
null,
TileMode.Clamp
);
paint.setShader(gradient);
// Create matrix transformations
const matrix = Skia.Matrix();
matrix.preRotate(45, 50, 25);
matrix.preScale(1.5, 1.5);
// Load images
const loadImage = async (uri: string) => {
const data = await fetch(uri).then(r => r.arrayBuffer());
const skData = Skia.Data.fromBytes(new Uint8Array(data));
return Skia.Image.MakeImageFromEncoded(skData);
};// Geometric primitives
interface SkPoint {
x: number;
y: number;
}
interface SkRect {
x: number;
y: number;
width: number;
height: number;
}
interface SkRRect {
rect: SkRect;
rx: number;
ry: number;
}
interface SkRSXform {
scos: number;
ssin: number;
tx: number;
ty: number;
}
// Core graphics types
interface SkColor {
r: number;
g: number;
b: number;
a: number;
}
// Enums
enum PaintStyle {
Fill = 0,
Stroke = 1
}
enum TileMode {
Clamp = 0,
Repeat = 1,
Mirror = 2,
Decal = 3
}
enum BlendMode {
// ... (comprehensive blend mode enum)
}
enum PathDirection {
CW = 0, // Clockwise
CCW = 1 // Counter-clockwise
}
enum VertexMode {
Triangles = 0,
TriangleStrip = 1,
TriangleFan = 2
}
// Color and image types
type Color = string | number | Float32Array;
enum EncodedImageFormat {
JPEG = 3,
PNG = 4,
WEBP = 6
}
interface ImageInfo {
width: number;
height: number;
colorType: ColorType;
alphaType: AlphaType;
}Install with Tessl CLI
npx tessl i tessl/npm-shopify--react-native-skia