How can I show SVG file on React Native?

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>

i know react native doesn’t support svg basically but i think someone fix this problem with tricky way (with/without react-native-svg)

Also i created the topic on stack overflow. http://stackoverflow.com/questions/38830568/how-can-i-show-svg-file-on-react-native

[matc4]

Hello, i made this library react-native-svg-uri. You can render SVG Images from an URL or a static file.

[Introvertuous]

The idea is just to break down your svg into its individual paths and then each path would be a property within the json object.

{
"path":"M41.55-23.70Q41.55-18.18 40.17-13.62Q38.78-9.07 36.16-5.78Q33.54-2.50 29.97-0.77Q26.40 0.95 22.04 0.95Q16.10 0.95 11.76-2.34Q7.42-5.63 5.12-11.25Q2.81-16.88 2.81-23.48Q2.81-29.95 5.22-35.67Q7.63-41.38 12.20-44.84Q16.77-48.30 22.68-48.30Q28.13-48.30 32.43-45.32Q36.74-42.33 39.15-36.70Q41.55-31.08 41.55-23.70M22.04-2.53Q26.05-2.53 28.65-5.77Q31.25-9 32.43-14.26Q33.61-19.51 33.61-25.49Q33.61-29.88 32.92-33.43Q32.24-36.98 30.90-39.52Q29.57-42.05 27.54-43.45Q25.52-44.86 22.89-44.86Q19.27-44.86 16.79-42.56Q14.31-40.25 12.99-36.63Q11.67-33.01 11.20-29.30Q10.72-25.59 10.72-22.11Q10.72-17.75 11.71-13.31Q12.69-8.86 15.22-5.70Q17.75-2.53 22.04-2.53Z"
}

Then you can simply import the json into your app and use react-native-svg to render the svg like this:

  const json = require('./svg.json');

  render() {
    return (
      <Svg height={200} width={200} >
        <Path d={json['path']} />
      </Svg>
    );
  }