Image URL not supported in react-native-svg

Question

I'm working with the library react-native-svg: https://github.com/react-native-community/react-native-svg to clip an image with a custom shape.

This is my code:

<Svg
  height="100"
  width="100">
  <Defs>
      <ClipPath id="clip">
          <Circle cx="50%" cy="50%" r="40%"/>
      </ClipPath>
  </Defs>
  <Image
      width="100%"
      height="100%"
      href={{uri : 'http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg'}}
      clipPath="url(#clip)"/>
</Svg>

Here's the sample that I referred to: https://github.com/react-native-community/react-native-svg#image for the Image part (Note: Under SVG tag, the native-react-svg custom defined Image tag is used) but it only supports local images.

I tried to dig deeper and found that it uses a resolveAssetSource function that probably only helps it load local images. I couldn't fix it though.

Anyone got a clue on what can be done to make this work?

Answer 1

I recently published react-native-remote-svg package that lets you load local and remote svg images. You can directly point to actual .svg files and don't need to recreate svg in a jsx file. Please give it a try and let me know if you face any issues.