clozr / react-native-svgkit

Experimental SVG library for react-native based off of SVGKit. Not under active development, if you would like to take over and push this forward please get in touch @notbrent on Twitter

react-native-svgkit

Render SVG images or write your own in-line and animate them, fun! Uses SVGKit. Formerly known as react-native-svgkit, but this now belongs to a library that is actually under active development: see magicmight's react-native-svg.

How to use it

• npm i react-native-svgkit --save
• cd node_modules/react-native-svgkit/Libraries/ && git clone [email protected]:SVGKit/SVGKit.git)
• Then add RNSVg.Xcodeproj to your Libraries, and libRNSvg.a to your linked binaries.
• Also add libxmyl2.2.dylib (libxml2.2.tbd for iOS9) to your linked binaries.
• var Svg = require('react-native-svgkit'); var Path = Svg.Path

Examples

Wave.js and ReactLogo.js for examples!

This chart renders from a source file, but I'm sure that a backend could be made for d3/xkcd to do this for us live

Uses SVGKit to do all of the hard work.

TODO (probably never going to happen unless you want to do it)

• Hit detection and events on individual SVG composites (Path, Line, etc)
• Component for every SVG element: ‘circle’, ‘ellipse’, ‘line’, ‘polygon’, ‘polyline’, ‘rect’, etc..
• Load source over HTTP
• Look at performance..
• Add animations to morph from one svg to another like this
• Add support for "drawing" animations like this