@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

DrawInitialValues

SimplifyOptions

Ref functions

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