Awesome

React Native SVG Elements

Use React Native to draw SVG Elements.

Supported SVG Elements

• Path
• Use
• Defs
• Mask
• LinearGradient
• G

##Example Draw Sine function

'use strict';

function drawSine(t) {
  var path = `M ${0} ${Math.sin(t) * 100 + 120}`;
  var x, y;

  for (var i = 0; i <= 10; i += 0.5) {
    x = i * 50;
    y = Math.sin(t + x) * 100 + 120;
    path = path + ` L ${x} ${y}`
  }

  return path;
}


var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
} = React;

var {Svg, Path} = require('react-native-svg-elements');
var TimerMixin = require('react-timer-mixin');

var Wave = React.createClass({
  mixins: [TimerMixin],

  getInitialState() {
    return {t: 0}
  },

  componentDidMount() {
    this.setInterval(this.updateTime, 16);
  },

  updateTime() {
    this.setState({t: this.state.t + 0.05});
  },

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'black', justifyContent: 'center', alignItems: 'center'}}>
        <Svg width={500} height={500} style={{width: 320, height: 350}}
             forceUpdate={this.state.t.toString()}>
          <Path fill="none" stroke="#00D8FF" strokeWidth="3" strokeMiterlimit="10"
                d={drawSine(this.state.t)} />
        </Svg>
      </View>
    );
  }
});

Getting started

1. npm install react-native-svg-elements --save
2. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
3. add ./node_modules/react-native-svg-elements/RCTSvg.xcodeproj
4. In the XCode project navigator, select your project, select the Build Phases tab and in the Link Binary With Libraries section add libRCTSvg.a
5. var Svg = require('react-native-svg-elements'); var Path = Svg.Path

Todo

• Support Rect
• Support onPress and other events

Credits

Thanks to @GenerallyHelpfulSoftware for SVG rendering library (https://github.com/GenerallyHelpfulSoftware/SVGgh). Thanks to @brentvatne for React Native SVG library (https://github.com/brentvatne/react-native-svg) examples given from.