Reputation: 35920
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
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