Skip to content

Latest commit

 

History

History
37 lines (26 loc) · 2.16 KB

README.markdown

File metadata and controls

37 lines (26 loc) · 2.16 KB
Raw

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 git@github.com: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!

Example code result Example code result

Example code result 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