react-native-free-canvas

Free sketch on canvas base on @shopify/react-native-skia

Install

You need to install following dependencies

"@shopify/react-native-skia": ">=1.0.0",
"react": ">=18.0.0",
"react-native": ">=0.72.0",
"react-native-gesture-handler": ">=2.0.0",
"react-native-reanimated": ">=3.0.0"

Usage

import FreeCanvas from 'react-native-free-canvas';

const App = () => {
  return (
    <>
      <FreeCanvas style={{flex: 1}} />
    </>
  )
};

Make Line Smoother

import {CornerPathEffect} from '@shopify/react-native-skia';

// Add CornerPathEffect component to pathEffect props
<FreeCanvas
  style={{flex: 1}}
  pathEffect={<CornerPathEffect r={32} />} 
/>

Properties

- style?: StyleProp<ViewStyle>;
- strokeColor?: string | SharedValue<string>;
- strokeWidth?: number | SharedValue<number>;
- backgroundColor?: string | SharedValue<string>;
- background?: React.ReactNode; // Should be Skia component
- foreground?: React.ReactNode; // Should be Skia component
- pathEffect?: React.ReactNode; // Should be Skia Path Effects (https://shopify.github.io/react-native-skia/docs/path-effects)
- zoomable?: boolean;
- onDrawEnd?: () => void;

Methods

- reset: () => void;
- undo: () => void;
- toBase64: (
  fmt?: ImageFormat,
  quality?: number,
) => Promise<string | undefined>;
- getSnapshot: () => Promise<SkImage | undefined> | undefined;
- toPaths: () => DrawnPath[];
- drawPaths: (paths: DrawnPath[]) => void;

Inspired By

wobsoriano/rn-perfect-sketch-canvas A React Native component for drawing perfect pressure-sensitive freehand lines using perfect-freehand and Skia renderer.