content: /**
   * Copyright (c) 2015-present, Facebook, Inc.
   * All rights reserved.
   *
   * This source code is licensed under the BSD-style license found in the
   * LICENSE file in the root directory of this source tree. An additional grant
   * of patent rights can be found in the PATENTS file in the same directory.
   *
   * @providesModule MaskedViewIOS
   * @flow
   */
  
  const PropTypes = require('prop-types');
  const React = require('React');
  const StyleSheet = require('StyleSheet');
  const View = require('View');
  const ViewPropTypes = require('ViewPropTypes');
  const requireNativeComponent = require('requireNativeComponent');
  
  import type { ViewProps } from 'ViewPropTypes';
  
  type Props = ViewProps & {
    children: any,
    /**
     * Should be a React element to be rendered and applied as the
     * mask for the child element.
     */
    maskElement: React.Element<*>,
  };
  
  /**
   * Renders the child view with a mask specified in the `maskElement` prop.
   *
   * ```
   * import React from 'react';
   * import { MaskedView, Text, View } from 'react-native';
   *
   * class MyMaskedView extends React.Component {
   *   render() {
   *     return (
   *       <MaskedView
   *         style={{ flex: 1 }}
   *         maskElement={
   *           <View style={styles.maskContainerStyle}>
   *             <Text style={styles.maskTextStyle}>
   *               Basic Mask
   *             </Text>
   *           </View>
   *         }
   *       >
   *         <View style={{ flex: 1, backgroundColor: 'blue' }} />
   *       </MaskedView>
   *     );
   *   }
   * }
   * ```
   *
   * The above example will render a view with a blue background that fills its
   * parent, and then mask that view with text that says "Basic Mask".
   *
   * The alpha channel of the view rendered by the `maskElement` prop determines how
   * much of the view's content and background shows through. Fully or partially
   * opaque pixels allow the underlying content to show through but fully
   * transparent pixels block that content.
   *
   */
  class MaskedViewIOS extends React.Component {
    props: Props;
  
    static propTypes = {
      ...ViewPropTypes,
      maskElement: PropTypes.element.isRequired,
    };
  
    _hasWarnedInvalidRenderMask = false;
  
    render() {
      const { maskElement, children, ...otherViewProps } = this.props;
  
      if (!React.isValidElement(maskElement)) {
        if (!this._hasWarnedInvalidRenderMask) {
          console.warn(
            'MaskedView: Invalid `maskElement` prop was passed to MaskedView. ' +
              'Expected a React Element. No mask will render.'
          );
          this._hasWarnedInvalidRenderMask = true;
        }
        return <View {...otherViewProps}>{children}</View>;
      }
  
      return (
        <RCTMaskedView {...otherViewProps}>
          <View pointerEvents="none" style={StyleSheet.absoluteFill}>
            {maskElement}
          </View>
          {children}
        </RCTMaskedView>
      );
    }
  }
  
  const RCTMaskedView = requireNativeComponent('RCTMaskedView', {
    name: 'RCTMaskedView',
    displayName: 'RCTMaskedView',
    propTypes: {
      ...ViewPropTypes,
    },
  });
  
  module.exports = MaskedViewIOS;
  