@benjeau/react-native-draw

Cross-platform React Native drawing component based on SVG

Note: Performance may not be great, this is not my main focus right now, but will be tackled via resolving this issue

Example application with React Native performance overlay

Installation

npm install @benjeau/react-native-draw
# or
yarn add @benjeau/react-native-draw

Also, you need to install react-native-gesture-handler, @react-native-community/slider and react-native-svg, and follow their installation instructions.

Usage

import React, { useRef } from 'react';
import { Draw, DrawRef } from "@benjeau/react-native-draw";

export default function App() {
  const drawRef = useRef<DrawRef>(null);

  const removeLastPath = () => {
    drawRef.current?.undo();
  }

  const clearDrawing = () => {
    drawRef.current?.clear();
  }

  // ... for more ref functions, look below

  return (
    <Draw
      ref={drawRef}
      height={600}
      initialValues={{
        color: "#B644D0",
        thickness: 10,
        opacity: 0.5,
        paths: []
      }}
    />
  )
}

Props

All of the props are optional

name	description	type	default
colors	Color palette colors, specifying the color palette sections each containing rows of colors	string[][][]	DEFAULT_COLORS
height	Height of the canvas	number	height of the window - 80
width	Width of the canvas	number	width of the window
autoDismissColorPicker	Automatically close the color picker after selecting a color	boolean	false
initialValues	Initial values for color the brush and paths	DrawInitialValues	see below
hideBottom	Hide all of the bottom section, below the canvas, or only certain functionalities	boolean or HideBottom	false
brushPreview	Change brush preview preset or remove it	stroke or dot or none	stroke
simplifyOptions	SVG simplification options	SimplifyOptions	see below
canvasStyle	Override the style of the container of the canvas	StyleProp	-
buttonStyle	Override the style of the buttons	StyleProp	-
onPathsChange	Callback function when paths change	(paths: PathType[]) => any	-
eraserSize	Width of eraser (to compensate for path simplification)	number	5
combineWithLatestPath	Combine current path with the last path if it's the same color, thickness, and opacity	boolean	false

DrawInitialValues

name	description	type	default
color	Initial brush color, from the colors provided	string	the first color of the first row in the first section from colors
thickness	Initial thickness of the brush strokes	number	3
opacity	Initial opacity of the brush strokes	number	1
paths	Paths to be already drawn	PathType[]	[]
tool	Initial tool of the canvas	DrawingTool	brush

SimplifyOptions

name	description	type	default
simplifyPaths	Enable SVG path simplification on paths, except the one currently being drawn	boolean	true
simplifyCurrentPath	Enable SVG path simplification on the stroke being drawn	boolean	false
amount	Amount of simplification to apply	number	10
roundPoints	Ignore fractional part in the points. Improves performance	boolean	true

Ref functions

name	description	type
setColor	Set the brush color	Dispatch<SetStateAction<string>>
undo	Undo last brush stroke	() => void
clear	Removes all brush strokes	() => void
getPaths	Get brush strokes data	() => PathType[]
addPath	Append a path to the current drawing paths	(path: PathType) => void
getSvg	Get SVG path string of the drawing	() => string

Helper functions

• If you need to create an SVG path, createSVGPath() is available to create the string representation of an SVG path.

Contributing

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

License

MIT