Need help with react-native-svgkit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
brentvatne

Description

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

412 Stars 44 Forks 46 Commits 16 Opened issues

Services available

Need anything else?

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!

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.