How to show SVG file on React Native?

Question

I used the following solution:

1. Convert .svg image to JSX with https://svg2jsx.herokuapp.com/
2. Convert the JSX to react-native-svg component with https://svgr.now.sh/ (check the "React Native checkbox)

I posted another solution (react-native-vector-icons) here. This approach use a vector font (from SVG) instead a SVG file. PS: react-native-vector-icons is the best approach to deal with SVG in react-native, it's also works in iOS and android. You will be able to change the color and size of your vector icon.

If you want to insert a svg directly into your app, you can try a 3rd party library : react-native-svg. With more than 3k stars in github it's one of the best approach.

Install any one of these using npm:

• react-native-svg
• react-native-svg-uri

Then link it to native using

react-native link react-native-svg

An example with react-native-svg-uri:

import * as React from 'react';
import SvgUri from 'react-native-svg-uri'; // SVG Package
import testSvg from './test.svg';          // SVG File

export default () => (
  <SvgUri
    width="200"
    height="200"
    svgXmlData={testSvg}
  />
);

After trying many ways and libraries I decided to create a new font (with Glyphs or this tutorial) and add my SVG files to it, then use "Text" component with my custom font.

Hope this helps anyone that has the same problem with SVG in react-native.

Install react-native-svg-transformer

npm i react-native-svg-transformer --save-dev

I'm using SVG as following and it works fine

import LOGOSVG from "assets/svg/logo.svg"

in render

<View>
  <LOGOSVG 
    width="100%"
    height="70%"
  />
</View>