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

Methods

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.

• terrylinla/react-native-sketch-canvas - A React Native component for drawing by touching on both iOS and Android.
• uragirii/rn-skia-sketch-canvas - A React Native component for drawing using Skia renderer.

License

MIT