React Native MaskedView new architecture

[hansdesmedt]

Hi,

We try to update https://github.com/react-native-masked-view/masked-view to the new architecture.

We still have an issue with the iOS part.

https://github.com/hansdesmedt/masked-view/blob/master/ios/RNCMaskedView.mm

We cannot find the right fabric method to get the reactSubviews and assign the first view to the self.maskView.

Someone who can help?

- (void)setContentView:(UIView *)contentView
{
  [super setContentView:contentView];
  // RNCMaskedView expects that the first subview rendered is the mask.
  UIView *maskView = [self.reactSubviews firstObject];
  self.maskView = maskView;

  // Add the other subviews to the view hierarchy
  for (NSUInteger i = 1; i < self.reactSubviews.count; i++) {
    UIView *subview = [self.reactSubviews objectAtIndex:i];
    [_view addSubview:subview];
  }
}

this is an example of an app running the new architecture

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

 import React from 'react';
 import type {Node} from 'react';
 import {Text, View} from 'react-native';
 import MaskedView from '@react-native-masked-view/masked-view';
 
 const App: () => Node = () => {
   return (
     <MaskedView
       style={{flex: 1, flexDirection: 'row', height: '100%'}}
       maskElement={
         <View
           style={{
             // Transparent background because mask is based off alpha channel.
             backgroundColor: 'white',
             flex: 1,
             justifyContent: 'center',
             alignItems: 'center',
           }}>
           <Text
             style={{
               fontSize: 60,
               color: 'black',
               fontWeight: 'bold',
             }}>
             Basic Mask
           </Text>
         </View>
       }>
       {/* Shows behind the mask, you can put anything here, such as an image */}
       <View style={{flex: 1, height: '100%', backgroundColor: '#324376'}} />
       <View style={{flex: 1, height: '100%', backgroundColor: '#F5DD90'}} />
       <View style={{flex: 1, height: '100%', backgroundColor: '#F76C5E'}} />
       <View style={{flex: 1, height: '100%', backgroundColor: '#e1e1e1'}} />
     </MaskedView>
   );
 };


 
 export default App;

The maskElement prop is blended into the react tree here https://github.com/hansdesmedt/masked-view/blob/master/src/MaskedView.js so that shouldn't be a problem.

Thanks!

[gispada]

I am not sure whether this is the right approach, so I'll share it here and wait for someone that knows Fabric a bit better (and I only tried with the example provided).

It seems that RCTViewComponentView does not expose reactSubviews. Instead, you can override the method mountChildComponentView, that gets called for every subview, and apply the mask when the index is 0.

Something like this:

- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
{
    if (index == 0) {
        self.contentView.maskView = childComponentView;
    } else {
        [self.contentView mountChildComponentView:childComponentView index:index];
    }
}

However, if you override mountChildComponentView and change the way you insert subviews, you might also need to override unmountChildComponentView because there are two assertions that might not hold true anymore.

[hansdesmedt]

Ok thanks a lot! that worked! added the unmountChildComponentView to the solution. 🙏