[SOLVED] Creating a masked out camera view + conceptual explanation how masking works.

[samsnori]

  /*
   To grasp how the `MaskedView` operates, imagine it this way:
    the `MaskedView` generates an alpha layer and applies it to
    its children. The outcome is then displayed on top of the
    background, as is typically done.

    In this instance, the `maskElement` generates an alpha layer
    with a transparency of 0.3 everywhere, except for the
    `<View>` element with the `css_cutout` style. There, the
    alpha values are set to 1.0, indicating that no transparency
    blending will occur.

        ┌─────────────────────────┐   
        │ 0.3, 0.3, 0.3, 0.3, 0.3 │   
        │                         │   
        │ 0.3, 0.3, 0.3, 0.3, 0.3 │   
        │                         │   
        │ 0.3, 0.3, 0.3, 0.3, 0.3 │   
        │                         │   
        │ 0.3, 0.3, 0.3, 0.3, 0.3 │   
        │     ┌─────────────┐     │   
        │ 0.3 │1.0, 1.0, 1.0│ 0.3 │   
        │     │             │     │   
        │ 0.3 │1.0, 1.0, 1.0│ 0.3 │   
        │     │             │     │   
        │ 0.3 │1.0, 1.0, 1.0│ 0.3 │   
        │     └─────────────┘     │   
        │ 0.3, 0.3, 0.3, 0.3, 0.3 │   
        │                         │   
        │ 0.3, 0.3, 0.3, 0.3, 0.3 │   
        │                         │   
        │ 0.3, 0.3, 0.3, 0.3, 0.3 │   
        │                         │   
        │ 0.3, 0.3, 0.3, 0.3, 0.3 │   
        └─────────────────────────┘   

   In this case the "backdrop" view is black which blends with
   the result of the masked view make those pixels a bit darker.

   */
  let css_wrapper = {
    ...StyleSheet.absoluteFill,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    justifyContent: 'center',
    alignItems: 'center'
  };

  let css_cutout = {
    width: 200,
    height: 200,
    backgroundColor: 'rgba(0, 0, 0, 1.0)'
  };

  let css_backdrop = {
    flex: 1,
    backgroundColor: 'black',
  };

  return (
    <View style={css_backdrop}>
      <MaskedView
        style={{flex: 1}}
        maskElement={
          <View style={css_wrapper}>
            <View style={css_cutout} />
          </View>
        }
      >
        <ImageBackground source={require('@app/assets/img/bg-test.png')} style={{flex: 1}}>
        </ImageBackground>
      </MaskedView>
    </View>
  );