CtrlK
BlogDocsLog inGet started
Tessl Logo

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

High-performance React Native Graphics using Skia

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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]>;
};
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@shopify/react-native-skia@2.2.x
Publish Source
CLI
Badge
tessl/npm-shopify--react-native-skia badge