How to render svg image in React-Native?

Question

Please try to help me! I need to render svg image from my folder "project/assest/images/test.svg" on android and ios view.

I have tried :

Solution 1 : <Image source={imagePath}></Image>

Solution 2 :

import SvgUri from 'react-native-svg-uri';
 <View>
    <SvgUri
      width="200"
      height="200"
      source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
    />
  </View>

Solution 3 : First i should, convert svg file to png,jpeg then render simple image, but that very weired way on view

Please help, what did i wrong in this.

Answer 1

You can also try react-native-svg package for SVG

For Example --

import * as React from 'react';
import { SvgUri } from 'react-native-svg';

export default () => (
  <SvgUri
    width="100%"
    height="100%"
    uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
  />
);