CODEWITHSUNDEEP
reactjsreact-reduxreact-nativereact-native-navigation
Kunvar Singh
Kunvar Singh

Reputation: 1885

How to render svg image in React-Native?

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.

Upvotes: 8

Views: 27999

Answers (3)

Lenoarod
Lenoarod

Reputation: 3620

here are two ways to use SVG in react-native.
one way is to translate the SVG to JSX use this site.
the other way is to use a font instead of SVG directly:

  1. firstly, use SVG files to generate font. I use this site. it is fontello.
  2. then I use react-native-vector-icons to generate icon. for more details, you can see its API

Upvotes: -2

Vipul
Vipul

Reputation: 941

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"
  />
);

Upvotes: 10

Vishal Rabadiya
Vishal Rabadiya

Reputation: 515

You can try with this

<SvgUri width="200" height="200" source={require('./project/assest/images/test.svg')} />

May this will help you

Upvotes: -1

Related Questions