The React Native project has become the defacto way to build cross-platform apps using Javascript. Drawing is very natural in most mobile UIs, so why not make it easy in React Native too?

rn-perfect-sketch-canvas component is a React Native component for drawing perfect pressure-sensitive freehand lines using perfect-freehand and Skia renderer. Enjoy.

How to use it:

1. Install and import the rn-perfect-sketch-canvas.

# NPM
$ npm i @shopify/react-native-skia rn-perfect-sketch-canvas

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

2. Add the sketch canvas component to the app.

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,
  },
});

3. Available components.

// reset
reset()

// undo/redo
undo() Undo
redo() Redo

// convert the image into base64 data
toBase64(format?: ImageFormat, quality?: number)

// convert the canvas into an image
toImage()

// get the svg string of all paths
toSvg(width: number, height: number, backgroundColor?: string)

// get the array of point groups that got drawn in the canvas
toPoints()

// draw from an array of point groups.
addPoints(points: [x, y][][])

Preview:

Download Details:

Author: wobsoriano

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/wobsoriano/rn-perfect-sketch-canvas

License: MIT