Perfect pressure-sensitive drawing for both iOS and Android.

Overview

rn-perfect-sketch-canvas

A React Native component for drawing perfect pressure-sensitive freehand lines using perfect-freehand and Skia renderer.

Installation

npm install @shopify/react-native-skia rn-perfect-sketch-canvas

Usage

import React, { useRef } from 'react';
import { StyleSheet, SafeAreaView, Button } from 'react-native';
import { SketchCanvas, SketchCanvasRef } from 'rn-perfect-sketch-canvas';

export default function App() {
  const canvasRef = useRef<SketchCanvasRef>(null);

  return (
    <SafeAreaView style={styles.container}>
      <SketchCanvas
        ref={canvasRef}
        strokeColor={'black'}
        strokeWidth={8}
        containerStyle={styles.container}
      />
      <Button onPress={canvasRef.current?.reset} title="Reset" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Props

Property Type Default Description
containerStyle object {} Styles to be applied on canvas component.
strokeColor string black Color of stroke.
strokeWidth number 8 Size (diameter) of the stroke.

Methods

Method Description
reset() Clear all the paths.
undo() Undo
redo() Redo
toBase64(format?: ImageFormat, quality?: number) Get the base64 of image.
toImage() Get a snapshot from the canvas in the surface.
toSvg(width: number, height: number, backgroundColor?: string) Get the svg string of all paths.
toPoints() Get the array of point groups that got drawn in the canvas.
addPoints(points: [x, y][][]) Draws from an array of point groups.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Inspired By

Please check out these previous works that helped inspire the creation of rn-perfect-sketch-canvas.

License

MIT

Comments
  • Is it possible to have a background image and also have that saved?

    Is it possible to have a background image and also have that saved?

    react-native-sketch-canvas had the ability to use a background image. This image would also be saved when calling the save function together with the path. Is the feature available?

    opened by joshua-revolutions 7
  • feat: added styling as second param to addCanvas function

    feat: added styling as second param to addCanvas function

    this allows to add custom styling when adding the points back

    const drawStyleOptions: StyleOptions = {
      strokeColor: "#FF3838",
      strokeStyle: "fill",
      strokeWidth: 4,
    };
    
    canvasRef.current?.addPoints(drawpoints, drawStyleOptions)
    
    opened by TwanLuttik 4
  • cannot read undefined property (useCanvasRef)

    cannot read undefined property (useCanvasRef)

    hello @wobsoriano, I am getting an issue after updating the library to the latest version 0.1.6, it was not there in the previous version, I know it is from @shopify/react-native-skia side, but I didn't change anything in the skia library.

    thank you. IMG_780FDE91C366-1

    opened by soorajpandey 3
  • iOS/Expo support?

    iOS/Expo support?

    Hey! First of all, thanks for the hard work on this, looks exactly what I need for a small project. =P Is this correct that this library only works for Android and Web? (https://reactnative.directory/?search=sketch) I'm using Expo to create a cross-platform app and wanted to use this for both, iOS and Android if possible. Thank you!

    opened by lucasmrl 2
  • toBase64 crashes app

    toBase64 crashes app

    Hello, whenever i tried using canvasRef.current.toBase64(); the app crashes without any error, other types of converter seems ok, how can i resolve this ? thanks.

    opened by abdullahIsa 2
  • Failing in production build

    Failing in production build

    In development without creating a build everything works well but when i created a build for production and installed on another phone for testing it keeps throwing errors.

    using react-native: "0.68.1" but with fabric or new architecture off

    photo_2022-05-03_01-08-41

    opened by abdullahIsa 2
  • How to generate a png or webp image without transparent background

    How to generate a png or webp image without transparent background

    Hi, it seems that giving a backgroundColor style for canvas is useless:

    <SketchCanvas
           ref={this.canvasRef}
           containerStyle={{flex: 1, backgroundColor: 'blue'}}
    

    and I don't know how to generate an image with white background, anyone who can help?

    opened by doublelam 0
  • 'useRef' for Javascript

    'useRef' for Javascript

    I noticed that your example is in TypeScript. When I try copying the sample code into my JavaScript code, I get an error, saying:

    Error: Function components cannot have string refs. We recommend using useRef() instead.

    When I remove the useRef, there are no errors, but then I can't reset the canvas.

    opened by aidyun 0
  • Android performance issue when having 20+ stokes on the page

    Android performance issue when having 20+ stokes on the page

    at the beginning the stoke follows the touch motion pretty closely. But as more stokes were drawn (or when one single stroke gets longer), the new stoke gradually lags behind touch motion increasingly severely.

    This is reproducible on the android emulator as well as on real android phones. However the performance on ios emulator remains reasonable even with a lot of strokes

    opened by 200210qb 5
  • Apple Pencil

    Apple Pencil

    Would it be possible to add some basic Apple Pencil support? I'm thinking mainly about detecting whether an Apple Pencil is used. Would be really cool if it could also use the adaptive pressure from the Pencil - but that's a bonus.. :)

    opened by robertherber 5
Releases(v0.3.0)
Owner
Robert Soriano
[object Object]
Robert Soriano
A renderer agnostic two-dimensional drawing api for the web.

Two.js A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, c

Jono Brandel 7.9k Dec 31, 2022
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
🌀 The Javacript framework for creating a portal to your data. Perfect for a single dataset or a full catalog.

?? Portal.JS The javascript framework for data portals ?? portal is a framework for rapidly building rich data portal frontends using a modern fronten

Datopian 2k Dec 30, 2022
Unpack tool for android applications running Shape SDK

shape-unpacker Simple frida agent used to unpack internal classes (com.apiguard3.internal.xxxxx) and native library (libag3.so) from Android applicati

Cat 4 Nov 24, 2022
Barcode generation library written in JavaScript that works in both the browser and on Node.js

Introduction JsBarcode is a barcode generator written in JavaScript. It supports multiple barcode formats and works in browsers and with Node.js. It h

Johan Lindell 4.7k Dec 30, 2022
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
Processing Foundation 18.6k Jan 1, 2023
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it. Any

Babylon.js 19.1k Jan 4, 2023
A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Metrics Graphics 7.5k Dec 22, 2022
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
Matteo Bruni 4.7k Jan 4, 2023
A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Metrics Graphics 7.5k Dec 22, 2022
TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

null 4 Mar 3, 2021
Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions.

chartjs-plugin-regression Chart.js plugin to calculate and draw statistical linear, exponential, power, logarithmic, and polynomial regressions using

Wilfredo Pomier 14 Dec 18, 2022
Visualize your tech stack and database with a simple, beautiful, and interactive web app.

Stacify Visualize your tech stack and database with a simple, beautiful, and interactive web app. Why Stacify Why would you want to use Stacify? Well,

Isaiah Hamilton 1 Jan 20, 2022
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

D3: Data-Driven Documents D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, C

D3 103.8k Jan 3, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

recharts 19.4k Jan 2, 2023