react-native-svg

Render SVG images or write your own in-line and animate them, fun!

How to use it

• npm i react-native-svg --save
• Then add RNSVg.Xcodeproj to your Libraries, and libRNSvg.a to your linked binaries.
• Also add libxmyl2.2.dylib to your linked binaries.
• var Svg = require('react-native-svg'); 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

• 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