@react-native-ohos/masked-view/lib/module/MaskedView.js

React Native MaskedView component

function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * 
 * @format
 */

import * as React from 'react';
import { View, StyleSheet, requireNativeComponent } from 'react-native';
import RNCMaskedViewNativeComponent from './RNCMaskedViewNativeComponent';
const RNCMaskedView = RNCMaskedViewNativeComponent;
/**
 * Renders the child view with a mask specified in the `maskElement` prop.
 *
 * ```
 * import React from 'react';
 * import { Text, View } from 'react-native';
 * import MaskedView from 'react-native-masked-view';
 *
 * 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.
 *
 */
export default class MaskedView extends React.Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "_hasWarnedInvalidRenderMask", false);
  }
  render() {
    const {
      maskElement,
      children,
      ...otherViewProps
    } = this.props;
    if (! /*#__PURE__*/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 /*#__PURE__*/React.createElement(View, otherViewProps, children);
    }
    return /*#__PURE__*/React.createElement(RNCMaskedView, otherViewProps, /*#__PURE__*/React.createElement(View, {
      pointerEvents: "none",
      style: StyleSheet.absoluteFill
    }, maskElement), children);
  }
}
//# sourceMappingURL=MaskedView.js.map