How do you mask reactive-native <View / "> with any form?

Question

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

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

Answer 1

I came to the conclusion that this function is not available out of the box, so I implemented my own component in Objective-C called react-native-masked-view .

the main idea is to use a property maskof 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 in JavaScript it works like this:

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