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 firstname.lastname@example.org:SVGKit/SVGKit.git)
- Then add RNSVg.Xcodeproj to your Libraries, and libRNSvg.a to your linked binaries.
- Also add
libxml2.2.tbdfor iOS9) to your linked binaries.
var Svg = require('react-native-svgkit'); var Path = Svg.Path
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