Reputation: 619
I am trying to mask an image with a shape using the react-native-svg library but things don’t work pretty well on android (clipPaths do not support transforms) so I am looking how to mask the image with another image let’s say a png assert that has a black shape in it.
Has anyone achieved something like that?
Upvotes: 1
Views: 4724
Reputation: 619
I finally managed to do this by using the viewBox property and correctly setting the sizes of the underlying paths and elements. The viewbox size is the size of the path I use to do the clipping. imageWidth & imageHeight are the final dimensions I want to have for the clipped image (and the mask)
<Svg width={ imageWidth } height={ imageHeight } viewBox='0 0 320 224'>
<Defs>
<ClipPath id='clip'>
<Path d={ path } />
</ClipPath>
</Defs>
<Image
width='100%'
height='100%'
preserveAspectRatio='xMidYMid slice'
href={ { uri: filePath, isStatic: true } }
clipPath='url(#clip)'
/>
</Svg>
Upvotes: 2