How to show SVG file on React Native?

Question

I want to show svg files (I have bunch of svg images) but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I tried to do that with native way but it's really hard work to show just svg image.

Example code:

import Svg, {
  Use,
  Image,
} from 'react-native-svg';

<View>
  <Svg width="80" height="80">
     <Image href={require('./svg/1f604.svg')} />
  </SvgRn>
</View>

Also I know the react native doesn't support svg basically but I think someone fixed this problem with tricky way (with/without react-native-svg)

Answer 1

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.

Answer 2

Use https://github.com/vault-development/react-native-svg-uri

Install

npm install react-native-svg-uri --save
react-native link react-native-svg # not react-native-svg-uri

Usage

import SvgUri from 'react-native-svg-uri';


<SvgUri source={require('./path_to_image/image.svg')} />

Answer 3

I had the same problem. I'm using this solution I found: React Native display SVG from a file

It's not perfect, and i'm revisiting today, because it performs a lot worse on Android.

Answer 4

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)

Answer 5

I posted another solution here How can I insert an image in svg format into a reactnative application, This approach use a vector font(from svg) instead a svg file. PS: Its works great in ios and android, and you also can change the color and size of your vector icon.

If you want to try insert a svg directly into your app, you can try react-native-remote-svg, this approach have some troubles with android https://github.com/seekshiva/react-native-remote-svg

install the lib: yarn add react-native-remote-svg, import to your screen:

import Image from 'react-native-remote-svg'

and use

 <View>
    <Image source={require('./money.svg')} />
</View>