react-native-svg-editor

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

react-native-svg-editor

★ 23 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Native Svg Editor

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

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

> :construction: 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!

~~~ jsx
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](https://play.google.com/store/apps/details?id=com.thumbnaillab) and [Apple App Store](https://apps.apple.com/us/app/svg-editor-graphic-ui-design/id1624759841). 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.

react-native-svg-editor

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README