CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-shopify--react-native-skia

High-performance React Native Graphics using Skia

Pending
Overview
Eval results
Files

skia-api.mddocs/

Core Skia API

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

Capabilities

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

Geometry Factories

/**
 * 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;

Path Factory

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

Image Factory

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

Paint Factory and Interface

/**
 * 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;
}

Shader Factory

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

Matrix Operations

/**
 * 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;
}

Usage Examples

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

Core Types

// 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

docs

advanced.md

animation.md

canvas-views.md

effects-filters.md

index.md

paint-styling.md

shapes.md

skia-api.md

text.md

tile.json