Skip to content
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
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Libraries Fix SVGKit submodule Sep 18, 2015
SvgExample.xcodeproj Finally fix this for requireNativeComponent, bump to 0.2 Jun 4, 2015
iOS Add chart example Apr 16, 2015
.gitignore Initial commit Apr 16, 2015
.gitmodules
Chart.js
D3Chart.js Simplify example Apr 20, 2015
Line.js Finally fix this for requireNativeComponent, bump to 0.2 Jun 4, 2015
Path.js Finally fix this for requireNativeComponent, bump to 0.2 Jun 4, 2015
README.markdown Woops Apr 20, 2016
ReactLogo.js Initial commit Apr 16, 2015
Svg.js Do not rely on type.displayName Sep 25, 2015
Wave.js Prepare for npm publish Apr 29, 2015
chart-example.png Better cropping Apr 16, 2015
chart.svg
index.ios.js
line.gif
logo.gif
package.json Version bump for rename and that is all Apr 20, 2016
test.svg Initial commit Apr 16, 2015

README.markdown

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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.