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

Properties

• style?: StyleProp;
• strokeColor?: string | SharedValue;
• strokeWidth?: number | SharedValue;
• backgroundColor?: string | SharedValue;;
• background?: React.ReactNode;
• foreground?: React.ReactNode;
• 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;