react-native-canvas-kit

landscape.mp4

A batteries-included 2D canvas kit for React Native, built on top of React Native Skia. Canvas Kit layers a scene graph over Skia and ships with pre-built shapes, gestures and interactivity, a transformer, and brushes, so you don't have to compose a canvas experience from scratch.

React Native Canvas Kit is heavily inspired by Konva. Full guides and API reference live in the documentation site.

What you get

• Shapes: Rect, Circle, Ellipse, Line, RegularPolygon, Star, Text, and Image, all sharing a common set of transform and styling props.
• Interactivity: tap and press events with hierarchy-aware hit testing and ancestor bubbling, plus draggable nodes.
• Multi-touch gestures: pinch-to-scale and rotate handled on the UI thread.
• Transformer: an interactive selection box with resize and rotate handles, attachable to any node.
• Brushes: a BrushLayer with UI-thread stroke capture and a set of ready-made brushes (pen, pencil, marker, highlighter, tape, eraser).

Installation

npm install react-native-canvas-kit @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

React Native Skia, Reanimated, Gesture Handler, and Worklets are peer dependencies: install them alongside the library.

Package	Version
@shopify/react-native-skia	>= 1.0.0
react-native-gesture-handler	>= 2.0.0
react-native-reanimated	^4.0.0
react-native-worklets	>= 0.5.0

Canvas Kit ships no native code of its own, but Reanimated 4 requires React Native's New Architecture, so react-native-canvas-kit@1.x runs on the New Architecture only. See the installation guide for the worklets Babel plugin and native setup.

Versions: 1.x targets Reanimated 4 (New Architecture). If you are still on Reanimated 3 / the legacy architecture, pin react-native-canvas-kit@0.x.

Usage

import { Stage, Layer, Circle, Rect } from 'react-native-canvas-kit';

export function Hello() {
  return (
    <Stage width={300} height={300}>
      <Layer>
        <Rect
          x={20}
          y={20}
          width={120}
          height={80}
          fill="#8a2be2"
          cornerRadius={12}
        />
        <Circle
          x={200}
          y={140}
          radius={50}
          fill="#ff5aa5"
          stroke="#1b0030"
          strokeWidth={4}
        />
      </Layer>
    </Stage>
  );
}

The tree mirrors a classic 2D canvas hierarchy:

Stage → the Skia canvas surface
 └ Layer → a logical grouping with its own transform
    └ Group → a transformable container of shapes
       └ Shape → Rect, Circle, Line, Text, Image etc.

Documentation

• Introduction
• Installation and Quick Start
• Core Concepts: Stage, Layer, and Group
• Shapes and Styling,
• Gestures, Transformers etc
• Brushes

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

---

Made with create-react-native-library