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.

Showcase

Popular app experiences rebuilt with Canvas Kit:

canva.mov Canva	instagram_crop.mov Instagram	snapseed.mov Snapseed	docusign.mov DocuSign
gpay_scratch_card.mov Google Pay

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