iOS - Fabric - apply mask to component and its child components

[zabojad]

Hi there !

I've been trying to update several third party libraries so that they support both old and new architecture.

I'm struggling on this one: ibitcy/react-native-hole-view#22

The legacy code of this lib draws a "hole" in the component UI by applying a mask to its root layer, which applies it eventually to it's child components as well.

This was working fine with the old architecture and without Fabric. With Fabric, the mask is correctly applied to the main component's UI but is not having any effect of its children components's UI.

The related code to that in the lib is:

// ...

@interface RNHoleViewImpl : UIView

// ...

@implementation RNHoleViewImpl

- (instancetype)init
{
	self = [super init];
	if (self) {
		_maskLayer = [CAShapeLayer layer];
		_maskLayer.fillColor = [UIColor redColor].CGColor;
		_maskLayer.fillRule = kCAFillRuleEvenOdd;
		_maskLayer.shouldRasterize = YES;
		_maskLayer.rasterizationScale = [UIScreen mainScreen].scale;
		
		self.layer.mask = _maskLayer;
	}
	return self;
}
// ...

I honestly have no clue about what should be done to make it work like it was working with the old renderer/architecture...

[zabojad]

OK, issue resolved. I had to add the subview by overriding mountChildComponentView and unmountChildComponentView methods so that they add the children components to my component contentView.

// ...
- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
{
    [_view mountChildComponentView:childComponentView index:index];
}

- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
{
    [_view unmountChildComponentView:childComponentView index:index];
}
// ...