0

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?

Ketan Malhotra
  • 1,255
  • 3
  • 16
  • 44
  • Does this work when you try to load a local image with `require('../localimage.jpg')`? I checked the [resolveAssetSource](https://github.com/facebook/react-native/blob/73c3aa8d326a24608e88949e71dbb910b604dede/Libraries/Image/resolveAssetSource.js#L70) and it expects a local image or an object. – bennygenel Sep 09 '17 at 08:19
  • As I stated, it works for local images. I need to use it for non-local images. Any idea on how to? – Ketan Malhotra Sep 09 '17 at 08:42
  • This is just an idea but could it be possible because of you are giving the size as a percentage and resolveAssetSource is messing up. Can you try giving a fixed width and height with the source uri please? – bennygenel Sep 09 '17 at 08:58
  • It doesn't work. It shows nothing. I suppose it has to have the percent etc format since it's using their custom RNSVGImage Component to load it. Any other idea? – Ketan Malhotra Sep 09 '17 at 17:50
  • If you are not getting the error and just can't show the image then its probably a size issue. I'm sorry but I have no further idea since I didn't use that library before. – bennygenel Sep 09 '17 at 18:19

1 Answers1

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.

Shiva Nandan
  • 1,835
  • 1
  • 13
  • 11