How to render svg in react-native?

Question

Please show me the way how to render SVG file in react-native (0.49). Thank you in advance.

I tried to use this library: https://github.com/matc4/react-native-svg-uri

But it does not work. Detail Error: https://anotepad.com/notes/d2itr5

Picture Error:

Answer 1

Use this react-native-svg

For more understanding see this video: https://www.youtube.com/watch?v=TdkzJkrHCgQ

Here's the workaround:

index.js

import React, {Component} from 'react';
import{
  AppRegistry,
  StyleSheet
} from 'react-native';

import Pin from './classes/pin';

export default class MainPage extends Component {
  render(){
    return (
      <Pin />
    );
  }
}
AppRegistry.registerComponent('demo1', ()=> MainPage);

Pin.js

import React, {Component} from 'react';

import {
  StyleSheet,
  View,
  Text,
  AppRegistry
} from 'react-native';



import Back from '../icons/back.js';
import Deliver from '../icons/deliver.js';
import Heart from '../icons/heart.js';
import Elipse from '../icons/elipse.js';
import Thumbtack from '../icons/thumbtack.js';

export default class Pin extends Component{
    render(){
      return(
        <View style={styles.PinContainer}>
          <View style={styles.PinHeader}>
              <View style={styles.HeaderUitility}>
                <Back />
                <Heart />
                <Deliver />
                <Elipse />
              </View>

              <View style={styles.HeaderPinButtonContainer}>
                <View style={styles.PinButton}>
                  <Thumbtack style={styles.Pinpin}/>
                  <Text style={styles.PinText}>SAVE</Text>
                </View>
              </View>
          </View>
          <View style={styles.PinMiddle}>

          </View>

          <View style={styles.PinFooter}>

          </View>
        </View>
      )
    }
}

const styles = StyleSheet.create({
  PinContainer:{
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#cecece'
  },

  PinHeader:{
    flexDirection: 'row',
    backgroundColor: 'white',
    alignItems: 'flex-end',
    justifyContent: 'space-between',
    height: 56,
    padding: 8,
    paddingBottom: 12
  },

  HeaderUitility:{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },

  PinButton: {
    flexDirection: 'row',
    backgroundColor: 'red',
    padding:8,
    borderRadius: 6,
    justifyContent: 'space-around',
    width: 70
  },

  HeaderPinButtonContainer:{
    flex: 1,
    alignItems: 'flex-end',
  },

  PinText:{
    color: 'white',
  }

})

SVG files:

1. Back button:

import React, { Component } from 'react';
import Svg,{
    Circle,
    Ellipse,
    G,
    LinearGradient,
    RadialGradient,
    Line,
    Path,
    Polygon,
    Polyline,
    Rect,
    Symbol,
    Text,
    Use,
    Defs,
    Stop
} from 'react-native-svg';

export default class Back extends Component {
    render() {
        return (
            <Svg height="26.5" width="16">
            <Path d="M3.1,13.5c-0.3,0.3-0.3,0.3,0,0.5c0.3,0.3,11.5,11.5,11.5,11.5c0.5,0.5,0.5,1.2,0,1.7c-0.5,0.5-1.2,0.5-1.7,0
L0.4,14.7C0.2,14.5,0,14.2,0,13.8c0-0.4,0.2-0.7,0.4-0.9L13,0.4c0.5-0.5,1.2-0.5,1.7,0c0.5,0.5,0.5,1.2,0,1.7
C10.8,5.9,3.4,13.3,3.1,13.5z"/>
            </Svg>
        );
    }
}

2. Deliver icon:

import React, {Component} from 'react'; import Svg,{
    Circle,
    Ellipse,
    G,
    LinearGradient,
    RadialGradient,
    Line,
    Path,
    Polygon,
    Polyline,
    Rect,
    Symbol,
    Text,
    Use,
    Defs,
    Stop } from 'react-native-svg';

export default class Deliver extends Component {
    render() {
        return (
            <Svg height="26.5" width="32">
            <Path d="M29,0.6L2,13l9.3,4.4v8.8l8.1-5l7.4,3.5L29,0.6z 
             M25.7,4L12.4,16l-6.3-3L25.7,4z M13,23v-4.9l4.5,2.1L13,23z  
             M14.1,16.8L26.8,5.4L25.3,22L14.1,16.8z"/>
            </Svg>
        );
    } }

3. Heart icon:

import React, {Component} from 'react';
import Svg,{
    Circle,
    Ellipse,
    G,
    LinearGradient,
    RadialGradient,
    Line,
    Path,
    Polygon,
    Polyline,
    Rect,
    Symbol,
    Text,
    Use,
    Defs,
    Stop
} from 'react-native-svg';

export default class Heart extends Component {
    render() {
        return (
            <Svg height="26.5" width="32">
            <Path d="M12.5,25.1c0.9,0.9,2.2,1.4,3.4,1.4c1.2,0,2.5-0.4,3.4-1.4l10.1-10c3.5-3.5,3.5-9.1,0-12.5
c-3.5-3.5-9.1-3.5-12.5,0L16,3.5l-0.9-0.9C11.6-0.9,6-0.9,2.6,2.6c-3.5,3.5-3.5,9.1,0,12.5L12.5,25.1z"/>
            </Svg>
        );
    }
}