/** * 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<any>, }; /** * 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> { 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;