CODEWITHSUNDEEP
react-native
Gil Birman
Gil Birman

Reputation: 35920

How do you mask a react-native <View /> with any shape?

It seems that all components in react-native are rectangles or rounded-rectangles (which can also represent a circle).

How do you mask a <View /> with an arbitrary shape like a hexagon?

Upvotes: 5

Views: 7797

Answers (1)

Gil Birman
Gil Birman

Reputation: 35920

I came to the conclusion that this feature isn't available out of the box, so I implemented a native component in Objective-C called react-native-masked-view.

The basic idea is to use the mask property of the UIView class:

CALayer *mask = [CALayer layer];
mask.contents = (id)[_maskUIImage CGImage];
mask.frame = self.bounds; //TODO custom: CGRectMake(left, top, width, height);
self.layer.mask = mask;
self.layer.masksToBounds = YES;

and it works something like this in JavaScript:

<MaskedView maskImage="mask.png">
   ...
</MaskedView>

Upvotes: 4

Related Questions