react-native-svg

What is react-native-svg?

The react-native-svg package allows React Native developers to render SVG images within their mobile applications. It provides a set of SVG primitives that work in a similar way to the standard React Native components. With react-native-svg, you can create complex shapes, paths, and graphics that are scalable without losing quality, which is essential for responsive design.

What are react-native-svg's main functionalities?

Drawing basic shapes

This code sample demonstrates how to draw a basic circle shape with a green fill and a blue stroke.

{"<Svg height=\"100\" width=\"100\"><Circle cx=\"50\" cy=\"50\" r=\"45\" stroke=\"blue\" strokeWidth=\"2.5\" fill=\"green\"/></Svg>"}

Creating paths

This code sample shows how to create a path using the 'Path' component, which allows for more complex shapes and lines.

{"<Svg height=\"100\" width=\"100\"><Path d=\"M40 60 A 10 10 0 0 0 60 60\" fill=\"none\" stroke=\"black\"/></Svg>"}

Applying gradients

This code sample illustrates how to apply a linear gradient to an ellipse shape.

{"<Svg height=\"100\" width=\"100\"><Defs><LinearGradient id=\"grad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\"><Stop offset=\"0%\" stopColor=\"rgb(255,255,0)\" stopOpacity=\"0\" /><Stop offset=\"100%\" stopColor=\"rgb(255,0,0)\" stopOpacity=\"1\" /></LinearGradient></Defs><Ellipse cx=\"50\" cy=\"50\" rx=\"50\" ry=\"20\" fill=\"url(#grad)\"/></Svg>"}

Text rendering

This code sample shows how to render text within an SVG using the 'Text' component.

{"<Svg height=\"100\" width=\"100\"><Text x=\"50\" y=\"50\" textAnchor=\"middle\" fill=\"purple\">SVG Text</Text></Svg>"}

Other packages similar to react-native-svg

victory-native

Victory-native is a collection of components for building interactive data visualizations in React Native applications. It is built on top of react-native-svg and provides a higher-level abstraction for creating charts and graphs. While react-native-svg is more about drawing SVG elements, victory-native focuses on data representation and charting.

react-native-canvas

React-native-canvas provides a 2D drawing context similar to HTML canvas. It is not SVG-based but allows for dynamic graphics and animations. It can be more performant for complex animations but lacks the scalability of SVG.

react-native-art-svg

React-native-art-svg is another library for rendering SVG images in React Native. It is based on the ART library, which is a retained mode vector drawing system. It offers similar functionalities to react-native-svg but has a different API and is less commonly used.

README

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