or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced.mdanimation.mdcanvas-views.mdeffects-filters.mdindex.mdpaint-styling.mdshapes.mdskia-api.mdtext.md
tile.json

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

High-performance React Native Graphics using Skia

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@shopify/react-native-skia@2.2.x

To install, run

npx @tessl/cli install tessl/npm-shopify--react-native-skia@2.2.0

index.mddocs/

React Native Skia

React Native Skia is a high-performance 2D graphics library that brings the Skia Graphics Library - the same graphics engine that powers Google Chrome, Android, and Flutter - to React Native. It provides a comprehensive API for creating complex animations, custom drawings, visual effects, data visualizations, games, and interactive experiences with hardware acceleration while maintaining React Native's declarative UI paradigm and cross-platform compatibility.

Package Information

  • Package Name: @shopify/react-native-skia
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @shopify/react-native-skia
  • Peer Dependencies: react >= 19.0, react-native >= 0.78, react-native-reanimated >= 3.19.1 (optional)

Core Imports

import { Canvas, Circle, Rect, Paint, Skia } from "@shopify/react-native-skia";

For specific functionality:

// React components
import { Canvas, Group, Paint } from "@shopify/react-native-skia";

// Shape components
import { Circle, Rect, Path, Text } from "@shopify/react-native-skia";

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

// Effects and filters
import { LinearGradient, Blur, Shadow } from "@shopify/react-native-skia";

// Animation utilities
import { interpolate, interpolateColors } from "@shopify/react-native-skia";

Basic Usage

import React from "react";
import { Canvas, Circle, Paint } from "@shopify/react-native-skia";

export default function BasicExample() {
  return (
    <Canvas style={{ width: 200, height: 200 }}>
      <Circle cx={100} cy={100} r={50}>
        <Paint color="red" />
      </Circle>
    </Canvas>
  );
}

With animations using React Native Reanimated:

import React from "react";
import { Canvas, Circle, Paint } from "@shopify/react-native-skia";
import { useSharedValue, withRepeat, withTiming } from "react-native-reanimated";

export default function AnimatedExample() {
  const radius = useSharedValue(30);
  
  React.useEffect(() => {
    radius.value = withRepeat(withTiming(50, { duration: 1000 }), -1, true);
  }, []);

  return (
    <Canvas style={{ width: 200, height: 200 }}>
      <Circle cx={100} cy={100} r={radius}>
        <Paint color="blue" />
      </Circle>
    </Canvas>
  );
}

Architecture

React Native Skia is built around several key architectural components:

  • React Component System: Declarative JSX components for all graphics operations (<Canvas>, <Circle>, <Paint>, etc.)
  • Skia API Bindings: Direct access to native Skia objects and factory functions through the Skia object
  • Animation Integration: Seamless integration with React Native Reanimated for smooth, native-performance animations
  • Node Tree System: Internal DOM-like tree structure that converts JSX to native Skia drawing commands
  • Cross-Platform Native Modules: Platform-specific implementations for iOS, Android, and Web (CanvasKit)
  • Memory Management: Automatic cleanup of native resources and manual control for advanced use cases

Capabilities

Canvas and Views

Core rendering infrastructure providing canvas components and low-level view access for graphics rendering.

// Main canvas component for rendering
function Canvas(props: CanvasProps): JSX.Element;

interface CanvasProps {
  style?: ViewStyle;
  debug?: boolean;
  opaque?: boolean;
  onSize?: SharedValue<SkSize>;
  colorSpace?: "p3" | "srgb";
}

// Canvas reference methods
interface CanvasRef {
  makeImageSnapshot(rect?: SkRect): SkImage;
  makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;
  redraw(): void;
  getNativeId(): number;
}

Canvas and Views

Shape Drawing

Comprehensive set of drawing components for creating basic and advanced shapes, paths, and geometric primitives.

// Basic shapes
function Circle(props: CircleProps): JSX.Element;
function Rect(props: RectProps): JSX.Element;
function Path(props: PathProps): JSX.Element;

interface CircleProps extends DrawingNodeProps {
  cx: number;
  cy: number;
  r: number;
}

interface RectProps extends DrawingNodeProps {
  x: number;
  y: number;
  width: number;
  height: number;
}

Shape Drawing

Paint and Styling

Paint system for controlling appearance including colors, strokes, fills, and blend modes.

function Paint(props: PaintProps): JSX.Element;

interface PaintProps {
  color?: Color;
  strokeWidth?: number;
  style?: "fill" | "stroke";
  blendMode?: BlendMode;
  opacity?: number;
  antiAlias?: boolean;
}

Paint and Styling

Text Rendering

Typography system with fonts, text shaping, paragraph layout, and text-along-path capabilities.

function Text(props: TextProps): JSX.Element;
function TextPath(props: TextPathProps): JSX.Element;

interface TextProps extends DrawingNodeProps {
  text: string;
  font: SkFont;
  x?: number;
  y?: number;
}

interface TextPathProps extends DrawingNodeProps {
  text: string;
  font: SkFont;
  path: PathDef;
}

Text Rendering

Effects and Filters

Comprehensive effects system including shaders, gradients, image filters, color filters, mask filters, and path effects.

// Gradient shaders
function LinearGradient(props: LinearGradientProps): JSX.Element;
function RadialGradient(props: RadialGradientProps): JSX.Element;

// Image filters
function Blur(props: BlurProps): JSX.Element;
function Shadow(props: ShadowProps): JSX.Element;

interface LinearGradientProps {
  start: Vector;
  end: Vector;
  colors: Color[];
  positions?: number[];
}

Effects and Filters

Animation Integration

Animation utilities and React Native Reanimated integration for creating smooth, performant animations.

function interpolate(
  x: number,
  input: readonly number[],
  output: readonly number[],
  type?: ExtrapolationType
): number;

function interpolateColors(
  value: number,
  inputRange: number[],
  outputRange: Color[]
): number[];

function mixColors(value: number, x: Color, y: Color): Float32Array;

Animation Integration

Core Skia API

Direct access to native Skia objects, factory functions, and low-level graphics operations.

// Main Skia API object
const Skia: {
  // Geometry factories
  Point(x: number, y: number): SkPoint;
  XYWHRect(x: number, y: number, width: number, height: number): SkRect;
  Paint(): SkPaint;
  Path: PathFactory;
  
  // Resource factories
  Image: ImageFactory;
  Font(typeface?: SkTypeface, size?: number): SkFont;
  
  // Filter factories
  ColorFilter: ColorFilterFactory;
  ImageFilter: ImageFilterFactory;
  Shader: ShaderFactory;
};

Core Skia API

Advanced Features

Advanced capabilities including pictures, video integration, SVG support, custom shaders, and offscreen rendering.

// Offscreen rendering
function drawAsImage(
  element: ReactElement,
  size: SkSize
): Promise<SkImage>;

function drawAsPicture(
  element: ReactElement,
  bounds?: SkRect
): Promise<SkPicture>;

// Video integration
function Video(url: string): Promise<Video> | Video;

// SVG support
const SVG: SVGFactory;

Advanced Features

Core Types

// Geometric primitives
interface SkPoint {
  x: number;
  y: number;
}

interface SkRect {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface SkSize {
  width: number;
  height: number;
}

// Color representation
type Color = string | number | Float32Array;

// Vector for 2D coordinates
type Vector = SkPoint | { x: number; y: number };

// Path definitions
type PathDef = string | SkPath;

// Transform definitions
interface TransformProps {
  transform?: Transform3d[];
  origin?: Vector;
  matrix?: InputMatrix;
}

// Base drawing node properties
interface DrawingNodeProps extends TransformProps {
  children?: React.ReactNode;
}

// Animation support
type SkiaProps<T> = {
  [K in keyof T]: T[K] | SharedValue<T[K]> | DerivedValue<T[K]>;
};