CODEWITHSUNDEEP
reactjsnative
WizMeister
WizMeister

Reputation: 619

React Native Mask Image with another image

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

Answers (1)

WizMeister
WizMeister

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

Related Questions