React Native Svg Editor

A react native component that lets you display & edit svg files graphically.

⚠️ This library was originally built for personal use. The documentation is minimal so be prepared to do a lot of code digging!

🚧 Please keep in mind that the svg spec isn't implemented fully but I tried to cover as much as possible. That's why contributions will be appreciated!

Installation

npm i react-native-svg-editor --save

yarn add react-native-svg-editor

Install peer dependencies

npm i react-native-svg react-native-haptic-feedback react-native-view-shot react-native-gesture-handler react-native-fs --save

yarn add react-native-svg react-native-haptic-feedback react-native-view-shot react-native-gesture-handler react-native-fs

If you are developing for iOS devices on Mac, do pod install after installing peer dependencies

cd ios && pod install && cd ../

React Native Gesture Handler Installation

Add GestureHandlerRootView according to react-native-gesture-handler instructions: https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation

Usage

Please check out https://github.com/DevChanQ/react-native-svg-editor/blob/master/components/BaseSvgEditor.js Most public functions that you should access are commented so you will get a sense of how to use them!

import SvgEditor from 'react-native-svg-editor';

const EditorView = () => {
  const canvasRef = useRef(null);
  const svg = `<svg width="400" height="180" xmlns="http://www.w3.org/2000/svg"><rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /></svg>`

  const changeSelectedElementOpacity = (opacity) => {
    // set the selected elements opacity
    /*
      setting the element's attributes causes state change and thus re-renders the whole svg tree.
      use the function `updateSelectedElementAttributes(attributes)` to update the element's internal attributes
    */
    canvasRef.current.setSelectedElementAttributes({ opacity });
  };

  const undo = () => {
    canvasRef.current.undo();
  };

  const redo = () => {
    canvasRef.current.redo();
  };

  return (
    <View style={{ flex: 1 }}>
      <SvgEditor
        ref={canvasRef}
        svg={svg} />
    </View>
  );
}

Live Demo

You can try out the SVG Editor app on Google Play and Apple App Store. React Native SVG Editor is the core that powers everything related to svg editing.

Contribute

This project was originally created for my personal applications. It was getting harder as harder to maintain as the size of the library grew, so I figured it's best to make the library open sourced so anyone interested can take part in the project. Documentation is minimal so contributions are welcomed. Please support the project by making Issues and PRs.